Open menu

Color Contrast Checker

Enter a text color and a background color to see the WCAG 2.2 contrast ratio with pass or fail results for normal text, large text and UI components. The tool takes your font size and weight into account, shows the APCA lightness contrast clearly labelled as a draft method, and suggests the nearest color that passes while keeping the same hue. Preview your own sample text, then export a report or CSS variables.

Preset gallery

The quick brown fox jumps over the lazy dog.

UI border

4.76:1

Pass · AA normalPass · AA largeFail · AAA normalPass · AAA largePass · UI 3:1

APCA Lc 73 (draft) · content

Accessibility checks

  • Pass 4.76:1 passes WCAG AA for normal text (4.5:1).
  • Check AAA needs 7:1 at this size (now 4.76:1). AAA is optional but helps people with low vision.
  • Pass 4.76:1 is enough for icons, borders and focus indicators (3:1).
  • Pass APCA Lc 73 (draft): fine for content text at larger sizes or weights.

Export code

Contrast report
Text #64748B on #FFFFFF at 16px / 400

WCAG 2.2 contrast ratio: 4.76:1
  AA normal text (4.5:1): Pass
  AA large text (3:1): Pass
  AAA normal text (7:1): Fail
  AAA large text (4.5:1): Pass
  UI components & graphics (3:1): Pass

APCA Lc (draft, not a WCAG requirement): 73
Favourites on this device (0)

No favourites yet.

Colors
Text color
Background color
Text

How to use the contrast checker

  1. Set the text and background colors, or press Swap colors to test the reverse.
  2. Set the font size and weight. They decide whether the large-text rules apply.
  3. Type your own sample text to see it in place.
  4. Read the results: the ratio, AA and AAA for normal and large text, and 3:1 for UI elements.
  5. If it fails, press Use nearest passing color.
  6. Export a text report for your team, or the colors as CSS variables.

How the ratio is calculated

WCAG converts each color to relative luminance (how bright it appears) and compares them: (lighter + 0.05) / (darker + 0.05). The result ranges from 1:1 (identical colors) to 21:1 (black on white).

Worked examples

Example 1: grey body text

Load Grey on white: slate #64748B on white is about 4.8:1, so it passes AA for normal text. Lighter greys like #9CA3AF fail at about 2.5:1. Use the suggestion to find the lightest grey that still passes.

Example 2: white text on an orange button

Load White on orange. Bright orange with white text usually fails even for large bold text. Either darken the orange or switch to dark text on the button.

Example 3: dark mode secondary text

Load Dark mode muted. Mid-grey #6B7280 on #111827 looks fine on a good screen but falls below 4.5:1. Brighten it until it passes.

Common mistakes

  • Testing on a perfect monitor. People use phones in sunlight and older screens; the minimums exist for them.
  • Relying on color alone. Links, errors and statuses need underlines, icons or text too.
  • Checking only text. Input borders, icons and focus rings need 3:1 as well.

Testing beyond the numbers

Contrast ratios are a strong starting point, but real conditions vary. Check important pages on a phone outdoors, with night mode on, and with your operating system’s high-contrast setting. Ask whether thin fonts, small sizes or busy backgrounds make text harder to read than the ratio suggests, and adjust before you ship.

Frequently asked questions

What contrast ratio do I need?

WCAG 2.2 level AA requires 4.5:1 for normal text and 3:1 for large text (24px and up, or about 18.66px bold). Icons, input borders and focus indicators need 3:1. Level AAA raises text to 7:1 (4.5:1 for large text).

What is APCA?

The Advanced Perceptual Contrast Algorithm is a newer method that accounts for how we perceive light text on dark backgrounds differently from dark text on light ones. It's still a draft, not a WCAG requirement, so the tool shows it as extra information next to the official WCAG result.

How does the nearest passing color work?

The tool converts your text color to OKLCH and adjusts only its lightness, darker or lighter, whichever is closer, until it reaches the required ratio. Hue and colorfulness stay the same, so the suggestion still fits your design.

Does contrast apply to placeholder text and disabled controls?

WCAG exempts disabled controls and purely decorative text. Placeholder text isn't exempt, but it shouldn't carry essential information. Use real labels, and aim for readable placeholders anyway.

Do large text and icons need the same contrast?

No. WCAG asks for 4.5:1 for normal text but 3:1 for large text (24px, or about 19px bold) and for meaningful icons and UI component borders.

Sources