17.40
contrast ratio
AAA
AA · Normal
≥ 4.5 : 1
AA · Large
≥ 3 : 1
AAA · Normal
≥ 7 : 1
AAA · Large
≥ 4.5 : 1
APCA Lc 104.3 · Preferred for body text

APCA is the newer perceptual method proposed for WCAG 3. It is advisory: WCAG 2 ratios above are still what accessibility rules cite.

Large text preview — 24px bold and up.

Normal body text at 16px. The quick brown fox jumps over the lazy dog while a checker of contrast keeps every word legible against its background.

Small print at 13px — the hardest size to keep readable.

“Large” text is 18.66px bold or 24px regular and up. AA is the common legal baseline; AAA is the enhanced target. Ratios are cut, never rounded up, so “4.50” always passes. Everything is computed live in your browser. Check how it looks with color blindness.

WCAG color contrast checker

Pick a text color and a background color and the contrast ratio updates live, from 1:1 (identical) to 21:1 (black on white). The checker grades the pair against the WCAG 2 thresholds and previews real text so you can see the result, not just the number.

WCAG asks for a ratio of at least 4.5:1 for normal text and 3:1 for large text to meet AA, and 7:1 / 4.5:1 to meet the stricter AAA. Large text means roughly 18.66px bold or 24px regular and up. Use the swap button to flip foreground and background.

Transparent colors are blended before scoring (the background over white, then the text over that), so rgba(0,0,0,0.5) is judged as the grey it looks like. If a pair fails, the checker suggests the nearest passing text or background color with the same hue, and shows the APCA lightness contrast (Lc) that WCAG 3 is moving toward. Colors you save on the main page can be checked against each other in a matrix, and the pair is kept in the address, e.g. ?fg=1a1a1a&bg=ffffff.

Looking for something else? See all color tools.

Related color tools

Palette GeneratorHEX → RGBRGB → HEXImage Color Picker

Color Contrast Checker — frequently asked questions

What is a good contrast ratio?
Aim for at least 4.5:1 for body text and 3:1 for large text to meet WCAG AA — the level most accessibility laws reference. 7:1 for body text meets the enhanced AAA level. Higher is always safer for readability.
What counts as large text?
Text that is at least 24px, or 18.66px (14pt) when bold. Large text has a lower contrast requirement because bigger glyphs stay legible at lower contrast.
How are transparent colors scored?
The background is laid over white and the text over that result, the way a browser paints them, and the ratio is measured on those blended colors. A color with 50% alpha is therefore scored as the lighter or darker color you actually see, not as its opaque channels.
What is APCA?
APCA is a newer way to predict readability, drafted for WCAG 3. It gives a lightness contrast (Lc) that depends on which color is the text, so light-on-dark and dark-on-light differ. It is shown as advice only: WCAG 2 ratios are still what accessibility rules cite.
Does contrast cover color blindness?
Contrast ratio is about lightness difference, which helps everyone including many color-vision types, but it doesn't guarantee colors are distinguishable. To check that, try the color blindness simulator tool.
Is anything uploaded to a server?
No. Every conversion runs in your browser with JavaScript — the color values never leave your device, and the tool keeps working offline once the page has loaded.

All color tools

HEX → RGBRGB → HEXHEX → HSLHSL → HEXRGB → HSLHSL → RGBHEX → OKLCHOKLCH → HEXPalette GeneratorImage Color Picker

Spotted a bug or have a suggestion?

Found something broken, have an idea, or just want to say thanks about any of our tools? Every message reaches a real person.