Color contrast: the requirements, how to measure, how to fix

Low-contrast text is the single most common accessibility failure on the web. It affects people with low vision, color vision deficiencies and aging eyes — and anyone using a phone in sunlight.

The requirements

Exempt: logos, purely decorative elements, and disabled controls.

How contrast is measured

Contrast ratio compares the relative luminance of two colors, from 1:1 (identical) to 21:1 (black on white). You don’t need the math — use a tool:

• WebAIM Contrast Checker (free, online) — enter two hex values.
• Colour Contrast Analyser from TPGi (free desktop app) — eyedropper any pixel on screen.
• Browser DevTools — Chrome and Firefox show the contrast ratio when you inspect text color.

The usual suspects

• Light gray text on white for “elegant” body copy and form placeholders.
• Brand orange, yellow, light green or cyan on white buttons or links.
• White text on a photo, readable in some places but not others.
• Pale field borders that make inputs invisible to low-vision users.
• Disabled-looking active buttons.

Fixing it without losing your brand

1. Darken, don’t replace. A slightly deeper shade of your brand color often passes. Our own crimson, #B0121E, gives 6.7:1 on our off-white background.
2. Use the brand color for large elements (headlines, big buttons, backgrounds) where 3:1 applies, and a darker variant for small text and links.
3. Put text on solid backgrounds, or add a dark overlay behind text on photos.
4. Pair color with another cue. Underline links, add icons to error messages, label chart lines directly.

Don’t rely on color alone

Separately from contrast, WCAG 1.4.1 requires that color isn’t the only way information is conveyed. A form that shows errors only as red borders, or a chart where the lines differ only by color, fails — even with great contrast. Add text, icons, patterns or labels.