Color contrast isn't just about aesthetics—it's about readability. Poor contrast makes text difficult or impossible to read for users with low vision, color blindness, or even those viewing screens in bright sunlight.
What is Contrast Ratio?
Contrast ratio measures the difference in luminance (brightness) between foreground and background colors. The scale runs from 1:1 (no contrast, like white on white) to 21:1 (maximum contrast, black on white).
WCAG Contrast Requirements
Level AA (Recommended Minimum)
- Normal text: 4.5:1 minimum
- Large text (18px+ or 14px+ bold): 3:1 minimum
- UI components and graphics: 3:1 minimum
Level AAA (Enhanced)
- Normal text: 7:1 minimum
- Large text: 4.5:1 minimum
Common Contrast Failures
Light Gray Text
Designers love subtle gray text, but light gray (#999) on white (#fff) has only a 2.85:1 ratio—failing both AA and AAA.
/* Fails - 2.85:1 */
color: #999999;
background: #ffffff;
/* Passes AA - 4.64:1 */
color: #767676;
background: #ffffff;Brand Colors
Your brand's orange might look great, but orange (#f90) on white has only 2.15:1 contrast.
Placeholder Text
Form placeholders are often too light. If placeholder text conveys important information, it needs proper contrast.
Testing Contrast
Several free tools can check your contrast ratios:
- WebAIM Contrast Checker: Enter two hex colors and see the ratio
- Chrome DevTools: Inspect an element and see contrast in the color picker
- SiteDNA: Automatically scans all text on your pages and flags contrast issues
Fixing Contrast Issues
Option 1: Darken the Foreground
Shift text colors darker to increase contrast while maintaining the general hue.
Option 2: Lighten the Background
For dark-on-dark issues, a lighter background can help.
Option 3: Increase Font Size
Larger text has lower contrast requirements. If you can't change colors, consider larger type.
Special Considerations
Text Over Images
Text over photos is challenging. Solutions include:
- Adding a semi-transparent overlay behind text
- Using a solid banner area for text
- Adding a text shadow (though this shouldn't be your only solution)
Color Blindness
Contrast alone doesn't solve color blindness issues. Never use color as the only way to convey information. Add text, icons, or patterns.
<!-- Bad: relies only on color -->
<span class="error" style="color: red">•</span>
<!-- Good: uses color + text -->
<span class="error" style="color: red">Error: </span>Focus Indicators
Keyboard focus indicators also need 3:1 contrast against adjacent colors.
Automated Testing
Manually checking every color combination is tedious. SiteDNA scans your entire site and identifies all contrast failures, showing you exactly which elements need adjustment and what ratio they currently have.
Run a free scan to see your site's contrast issues ranked by impact.