Contrast Checker
Enter a text color and a background color. See the WCAG contrast ratio, what it passes, and the closest colors that would pass if it doesn't.
| Element | AA | AAA |
|---|
Large text — 24px regular
Large text — 19px bold
Normal body text at 16px. Contrast matters most for long reading, low-vision readers and screens in bright sunlight.
Small print at 13px, the size of captions and footnotes.
What the WCAG levels mean
WCAG 2 measures contrast as a ratio between the relative luminance of two colors, from 1:1 (identical) to 21:1 (black on white). Level AA — the level most laws and policies point to — needs 4.5:1 for normal text and 3:1 for large text. Level AAA raises that to 7:1 and 4.5:1.
Large text means at least 24px (18pt) regular, or about 18.66px (14pt) bold. Non-text contrast (success criterion 1.4.11) asks for 3:1 for the parts of controls and graphics people need to see: input borders, icons, focus indicators and chart lines.
How the fixes and APCA work
Suggested fixes keep the hue and colorfulness of your color and move only its lightness, in the OKLCH color space, until the ratio is met — lighter or darker, whichever is the smaller change. The result is rounded to a HEX value that is re-checked, so it really passes.
APCA (Accessible Perceptual Contrast Algorithm) is the contrast method proposed for the WCAG 3 draft. It accounts for polarity (dark on light vs light on dark) and font weight, and reports a lightness contrast value, Lc, from about −108 to 106. It isn't a legal requirement yet; use WCAG 2 for compliance and APCA as a second opinion, especially for dark themes.
Questions
What contrast ratio do I need for WCAG AA?
4.5:1 for normal body text, 3:1 for large text (24px, or about 18.66px bold), and 3:1 for UI components and meaningful graphics such as input borders and icons.
Does a semi-transparent text color work?
Yes. Enter it as rgba(0, 0, 0, 0.6) or an 8-digit HEX like #00000099. The tool blends it over the background first and measures the color you'd actually see. Suggested fixes are given as solid colors.
Why does my orange or mid-blue button fail with white text?
Saturated mid-tones like orange, bright green and cyan are much lighter than they look to WCAG's luminance formula, so white text on them often lands around 3:1. Use a darker shade of the color, or switch to dark text — the suggested fixes show both options.
Is 4.5:1 enough for dark mode?
It meets WCAG 2, but light text on dark backgrounds can feel stronger or weaker than the ratio suggests. Check the APCA Lc value too: aim for about Lc 75 or more (ignoring the minus sign) for body text.
Do disabled buttons and logos need to pass?
No. WCAG exempts inactive (disabled) controls, purely decorative elements, and text that is part of a logo or brand name. Everything else a person needs to read or operate should pass.