Color contrast is the single most important factor in whether people can actually read your text. A beautifully designed interface with poor contrast is invisible to users with low vision, color vision deficiency, or even just a bright outdoor screen. This guide explains exactly how contrast ratios work, what WCAG requires, and how to test your designs.
What Is Color Contrast Ratio?
Color contrast ratio is a number that describes the difference in luminance (brightness) between two colors. It is calculated using a formula defined by WCAG 2.1:
Contrast Ratio = (L1 + 0.05) / (L2 + 0.05)
Where L1 = lighter color's relative luminance
L2 = darker color's relative luminanceThe ratio ranges from 1:1 (no contrast, same color) to 21:1 (maximum contrast, pure black on pure white). Higher ratios mean better readability.
Common Contrast Ratios
- 21:1 — Black on white (maximum possible)
- 12.6:1 — Dark gray (#333) on white
- 7:1 — WCAG AAA threshold for normal text
- 4.5:1 — WCAG AA threshold for normal text
- 3:1 — WCAG AA threshold for large text
- 1:1 — No contrast at all
WCAG Contrast Requirements
WCAG 2.1 defines two conformance levels for contrast, each with different thresholds depending on text size:
Level AA (Minimum)
- Normal text (under 18pt / 24px): 4.5:1 minimum
- Large text (18pt+ / 24px+ or 14pt+ bold): 3:1 minimum
- UI components (icons, borders): 3:1 minimum
Level AAA (Enhanced)
- Normal text (under 18pt / 24px): 7:1 minimum
- Large text (18pt+ / 24px+ or 14pt+ bold): 4.5:1 minimum
- UI components: No specific AAA requirement
AA is the legal minimum for most accessibility standards, including Section 508, EN 301 549, and the ADA. AAA is the gold standard — it provides the best experience for people with low vision, elderly users, and anyone viewing your content in challenging conditions like bright sunlight.
What Counts as Large Text?
WCAG defines "large text" as:
- 18pt (24px) or larger at normal weight
- 14pt (18.66px) or larger at bold weight (700+)
Large text has lower contrast requirements because larger characters are physically easier to read. This is why headlines can pass AA at 3:1 while body text needs 4.5:1.
How to Test Color Contrast
Testing contrast is straightforward with the right tools:
1. Use a contrast checker tool. Enter your foreground (text) and background colors as hex values, and the tool calculates the ratio and tells you whether you pass AA and AAA. The ToolShack Color Contrast Checker shows pass/fail for all four WCAG thresholds with a live preview.
2. Test in browser DevTools. Chrome and Firefox both include contrast ratio information in the accessibility panel of the element inspector. Select any text element and look for the contrast ratio in the computed styles.
3. Test with color blindness simulators. Even if your contrast ratio passes, some color combinations may still be problematic for people with color vision deficiency. Use a Color Blindness Simulator to check how your palette appears under different CVD conditions.
Common Contrast Mistakes
- Light gray text on white backgrounds: This is the most common violation. Gray (#999) on white has only a 2.8:1 ratio — below even the AA large text minimum.
- Placeholder text in form fields: Many browsers default to very light placeholder text. Check the contrast of your placeholder color.
- Disabled button text: Disabled elements are exempt from contrast requirements, but if the text is still readable, it should still meet contrast standards.
- Focus indicators: Keyboard focus rings need sufficient contrast against the background to be visible.
- Images with text overlays: Text on photographs often has inconsistent contrast. Add a semi-transparent overlay to ensure readability.
Practical Color Combinations That Work
Here are tested, accessible color combinations:
Dark gray on white — 15.4:1 ratio, AAA pass
Dark blue on white — 12.6:1 ratio, AAA pass
Dark brown on cream — 8.5:1 ratio, AAA pass
Dark teal on light green — 5.1:1 ratio, AA pass
Tools for Accessibility Testing
- Color Contrast Checker: Test your text/background combinations against all WCAG thresholds with live preview
- Color Blindness Simulator: See how your designs appear to people with different types of color vision deficiency
- Color Picker: Pick and convert colors between hex, RGB, and HSL formats
- Color Palette Extractor: Extract dominant colors from screenshots and design mockups
Conclusion
Color contrast is not optional — it is a legal requirement in many jurisdictions and a fundamental aspect of inclusive design. By testing your text against WCAG contrast thresholds, avoiding low-contrast color combinations, and using tools like the ToolShack Color Contrast Checker, you ensure that everyone can read and interact with your content. Start with AA compliance as your minimum, aim for AAA whenever possible, and always test with real users when possible.