How to Check Color Contrast for Accessibility (WCAG)

Low-contrast text is one of the most common accessibility problems on the web. It affects people with low vision, older users, and anyone reading a phone in sunlight. The Web Content Accessibility Guidelines (WCAG) set clear, testable thresholds.

The WCAG thresholds

What	Level AA	Level AAA
Normal text	4.5:1	7:1
Large text	3:1	4.5:1
Icons, input borders, focus indicators	3:1	–

Large text means at least 18 pt (24 px) regular, or 14 pt (about 18.7 px) bold.

The first two rows come from success criteria 1.4.3 (AA) and 1.4.6 (AAA). The third row is criterion 1.4.11, Non-text Contrast, which covers the parts of controls you need to see to use them.

Logos and purely decorative elements are exempt, as is text in disabled controls.

How the ratio works

Contrast ratio compares the relative luminance of two colors, a measure of perceived brightness from 0 (black) to 1 (white):

ratio = (L1 + 0.05) ÷ (L2 + 0.05), where L1 is the lighter color.

Black on white gives the maximum, 21:1. Identical colors give 1:1. The formula accounts for the fact that our eyes are more sensitive to green than to blue, which is why yellow on white fails badly while dark blue on white passes easily.

Check a color pair

1. Open the contrast checker.
2. Enter the text color and the background. Hex, rgb(), hsl() and color names all work, and you can pick colors from the screen in browsers that support it.
3. Read the ratio and the pass/fail result for each level.
4. If it fails, look at the suggestions: the checker finds the nearest color that passes by changing only lightness, so your brand hue stays.

Example: #777777 on white is 4.48:1, just under AA. The suggested #767676 reaches 4.54:1: practically the same gray, but compliant.

Check a whole palette

Design systems have many color combinations. The palette contrast grid takes a list of colors and tests every foreground/background pair at once, then filters to the combinations that pass. It's a quick way to document which pairs designers are allowed to use.

Don't forget transparency and states

• Semi-transparent text blends with the background. Check the resulting color, not the base color. The contrast checker accounts for alpha.
• Hover, focus and disabled states need checking too. Focus indicators must meet 3:1 against their surroundings.
• Text on images changes contrast across the image. Add a solid or gradient overlay behind the text.

Contrast is not the only color issue

Around 8% of men and 0.5% of women have some form of color vision deficiency. Two colors can have fine contrast and still look alike to someone with red-green deficiency. Use the color blindness simulator to preview your design, and never rely on color alone to carry meaning: add icons, labels or patterns.

A realistic target

Aim for AA everywhere and AAA for long body text. It's also worth going a little beyond the minimum: a design that only just passes on a calibrated monitor may not pass on a dim laptop screen.

Common questions

Does contrast apply to placeholder text? Yes. Placeholder text is still text, so it needs 4.5:1 against the input background. Very light gray placeholders are a frequent failure. A visible label above the field is better anyway, because placeholders disappear as soon as someone starts typing.

What about dark mode? Every color pair has to pass in both themes. Pure white text on pure black can feel harsh; many designs use an off-white on a dark gray, which still reaches well over 7:1.

Is higher always better? For body text, practically yes. For large decorative headings you have more freedom, since 3:1 is enough at large sizes.

Do links need extra contrast? If links are only distinguished from surrounding text by color, WCAG asks for 3:1 between link color and body text color, or an additional cue such as an underline. An underline is the simplest fix.