Accessibility · 2 min read

Color Contrast Tips for Better Readability

Learn how to choose accessible color combinations that meet WCAG standards.

November 20, 20252 min read

Why Contrast Matters More Than You Think

Roughly 1 in 12 men and 1 in 200 women have some form of color vision deficiency. Add in situational impairments — using a phone in direct sunlight, working on a dim screen to save battery, aging eyes — and poor contrast affects a much larger portion of your users than you might expect.

WCAG defines two levels of contrast compliance:

  • AA (minimum): 4.5:1 ratio for normal text, 3:1 for large text (18px+ bold or 24px+ regular)
  • AAA (enhanced): 7:1 ratio for normal text, 4.5:1 for large text

For most products, AA compliance is the target. AAA is aspirational but not always practical, especially for brand colors.

Tools for Checking Contrast

Don't eyeball contrast — measure it. These tools make it easy:

  • WebAIM Contrast Checker — paste in two hex codes and get an instant pass/fail for AA and AAA
  • Chrome DevTools — inspect any element, and the color picker shows the contrast ratio and compliance level right in the panel
  • Figma plugins like Stark or A11y - Color Contrast Checker run directly in your design tool
  • axe DevTools — catches contrast failures as part of a broader accessibility audit

Practical Design Strategies

Meeting contrast requirements doesn't mean sacrificing aesthetics. Here are approaches that work:

  1. Start with your text colors. Ensure your primary body text and heading colors pass AA against your background before finalizing your palette. This is the highest-impact contrast decision.
  2. Don't rely on color alone. If you use red for error states, also add an icon, bold text, or a border. This helps colorblind users and makes the UI clearer for everyone.
  3. Test with simulated vision deficiencies. Chrome DevTools has a "Rendering" panel where you can simulate protanopia, deuteranopia, tritanopia, and achromatopsia. Run through your key flows with each simulation.
  4. Watch out for light grays. The most common contrast failure is light gray placeholder text or secondary text on white backgrounds. A gray that looks fine on your retina display may be invisible on a cheaper monitor.

Dark Mode Considerations

If your product supports dark mode, you need to check contrast in both themes. Colors that pass on a white background may fail on dark backgrounds and vice versa. Maintain separate color tokens for each mode and verify contrast for both.

A common mistake is inverting your palette (making dark mode the exact inverse of light mode). This rarely works well — you'll typically need to adjust saturation and lightness independently to maintain readability and visual comfort.