Skip to content
Gridtray

Color Contrast Checker

Enter a text color and a background. See the WCAG ratio, which levels pass, the APCA value, and when a pair fails, the nearest color that passes.

Colors

%

Nearest colors that pass

Same hue and saturation, lightness moved just far enough.

#4F5A69
Text, AAA (7:1)

Large text, 24px and up

Body text at 16px. Most reading happens at this size, so this is the line that has to pass AA at 4.5:1. If it is hard to read here, it will be harder on a phone in sunlight.

Small print at 13px: captions, footnotes, timestamps.

Outlined buttonIcons and borders need 3:1
Contrast ratio
5.42:1

Good for body text at AA.

APCA Lc 77.1
Experimental, not a legal standard
Normal text AA
needs 4.5:1
Pass
Normal text AAA
needs 7:1
Fail
Large text AA
needs 3:1
Pass
Large text AAA
needs 4.5:1
Pass
UI components and icons
needs 3:1
Pass

How to use the color contrast checker

  1. Set the text color and the background with the pickers, a HEX value or the eyedropper.
  2. Read the ratio and the five pass or fail results on the right.
  3. If the pair fails, pick one of the suggested colors. They keep your hue and only change lightness.
  4. Use the lightness slider to explore by hand, and Swap to test the reverse.
  5. Copy the link to share the exact pair with your team.

What the WCAG contrast levels mean

WCAG measures contrast as a ratio between the relative luminance of two colors, from 1:1 (identical) to 21:1 (black on white). The thresholds come from success criteria 1.4.3, 1.4.6 and 1.4.11:

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

Ratios here are truncated, not rounded: 4.499 shows as 4.49 and fails, because the guideline says “at least” 4.5:1. That is the same rule most audit tools apply.

How the suggestions are found

The checker converts your color to OKLCH, keeps its hue and chroma, and searches lightness in both directions for the smallest change that reaches the target. Of the darker and lighter candidates, it offers the one closest to your original. Your brand color stays recognisably itself; it just gets readable.

About APCA

APCA is a newer contrast model that accounts for text size, weight and polarity better than the WCAG 2 formula. It was proposed for WCAG 3, but the WCAG 3 contrast method is not settled and APCA is not a legal requirement. The value is shown for reference; decisions here use WCAG 2.2.

Questions

What contrast ratio do I need for body text?

At least 4.5:1 for WCAG 2.2 level AA, and 7:1 for AAA. Large text needs 3:1 for AA.

Does contrast apply to placeholder text and disabled buttons?

Placeholder text should meet 4.5:1 because people read it. Disabled controls are exempt from the requirement, but they still need to be recognisable.

Why is my ratio slightly different from another checker?

Some tools round the ratio up. This one truncates, so a pair never appears to pass when it is a fraction below the line.