PrivTab

Color Contrast Checker

Check whether text is easy to read on its background, using the WCAG 2 contrast rules.

Runs in your browser · No uploads

– contrast ratio

Large text: The quick brown fox

Normal text: The quick brown fox jumps over the lazy dog. 0123456789

Button outline
UseWCAG AAWCAG AAA
Normal text (below 24 px, or below 18.66 px bold)
Large text (24 px and up, or 18.66 px bold)
Icons, borders and form fields–
  • Nothing leaves your device
  • No server-imposed size limits
  • No sign-up, no watermark
  • Free

How to check color contrast

  1. Enter the text color and the background color, or pick them.
  2. Read the contrast ratio and the pass or fail results for normal text, large text and interface parts.
  3. If it fails, click a suggested color: the nearest shade that passes.

The WCAG requirements

UseAAAAA
Normal text4.5 : 17 : 1
Large text (24 px, or 18.66 px bold)3 : 14.5 : 1
Icons, borders, form fields3 : 1–

Good to know

  • The ratio is calculated with the WCAG 2 formula and compared without rounding, so 4.49 : 1 fails AA.
  • See-through text colors are blended with the background first, as browsers draw them.
  • Passing the ratio is required but not everything: font weight, size and thin lines also affect readability.

Frequently asked questions

What contrast ratio do I need?

For most text, at least 4.5 : 1 (WCAG AA). Large text needs 3 : 1. AAA asks for 7 : 1.

How are the suggestions made?

The text color keeps its hue and saturation and is made lighter or darker until it reaches the target ratio.

Is this APCA / WCAG 3?

No. It uses WCAG 2.1 and 2.2, which is what most laws and guidelines refer to today.