📋 In This Guide
Why Color Contrast Matters
Sufficient color contrast between text and its background is one of the most fundamental — and most frequently overlooked — accessibility requirements on the web. Low contrast text is genuinely hard to read for people with low vision or color vision deficiencies, and it's also harder to read for everyone in bright sunlight, on lower-quality screens, or simply when tired.
The Web Content Accessibility Guidelines (WCAG), maintained by the W3C, define precise, testable contrast ratio thresholds that any two colors either pass or fail — removing the guesswork from "does this look readable enough?"
Low Vision
Sufficient contrast is essential for readers with reduced visual acuity
Color Blindness
Affects roughly 1 in 12 men and 1 in 200 women worldwide
Bright Environments
Low contrast becomes nearly unreadable in sunlight or glare
Legal Compliance
WCAG AA is commonly referenced in accessibility regulations worldwide
How Contrast Ratio Is Calculated
Contrast ratio is derived from the relative luminance of each color — a measure of how bright a color appears, weighted according to how sensitive the human eye is to red, green, and blue light.
where L1 is the relative luminance of the lighter color and L2 is the relative luminance of the darker color
Relative luminance itself is calculated from gamma-corrected RGB channel values using fixed weights — 21.26% for red, 71.52% for green, and 7.22% for blue — reflecting the eye's much greater sensitivity to green light than to blue.
The resulting ratio ranges from 1:1 (identical colors, no contrast at all) to 21:1 (pure black against pure white, the maximum possible contrast).
WCAG AA vs AAA — What's the Difference
| Level | Normal Text | Large Text | Typical Requirement |
|---|---|---|---|
| AA (Standard) | 4.5:1 | 3:1 | Most legal and organizational accessibility requirements |
| AAA (Enhanced) | 7:1 | 4.5:1 | Stricter — recommended for text-heavy, high-accessibility content |
| UI Components | 3:1 | Icons, button borders, form field outlines (WCAG 2.1) | |
What Counts as "Large Text"
WCAG defines large text as text that is at least 18 point (24px) at regular weight, or at least 14 point (18.66px) at bold weight. Because larger, bolder strokes remain legible even with less contrast, WCAG allows a lower threshold (3:1 for AA) for text meeting this size.
Need a specific color's hex or RGB values?
Pick any color and get instant hex, RGB and HSL conversions.
Worked Example
Relative luminance of #FFFFFF = 1.0
Contrast ratio = (1.0 + 0.05) ÷ (0.1791 + 0.05) ≈ 4.54:1
This exact gray-on-white combination sits right at the WCAG AA normal text threshold (4.5:1) — commonly used as a reference example in accessibility documentation because it's essentially the darkest gray you can use on white while still meeting AA. Try it in the checker above using the "Gray on White" preset.
5 Common Contrast Mistakes to Avoid
Frequently Asked Questions
For WCAG AA, normal text needs at least 4.5:1 and large text needs at least 3:1. For the stricter AAA standard, normal text needs 7:1 and large text needs 4.5:1.
Contrast ratio is calculated from the relative luminance of both colors using (L1 + 0.05) / (L2 + 0.05), where L1 is the lighter color's luminance and L2 is the darker color's luminance, both derived from gamma-corrected RGB values.
At least 18 point (24px) regular weight, or at least 14 point (18.66px) bold weight. Large text gets a lower required contrast ratio because bigger, bolder strokes stay legible at lower contrast.
AA is the standard, widely required level used by most legal and organizational requirements. AAA is a stricter, enhanced level demanding higher contrast ratios, often reserved for text-heavy content aimed at users with significant visual impairments.
Roughly 1 in 12 men and 1 in 200 women have some form of color vision deficiency, and low contrast text is difficult to read for anyone with low vision, in bright sunlight, or on lower-quality screens.
This tool calculates contrast between two solid colors you select. WCAG recommends avoiding text over busy images entirely, or using a solid overlay behind text on photos so contrast can be reliably measured.
WCAG 2.1's non-text contrast requirement specifies a minimum of 3:1 for graphical objects and UI components such as icons, button borders, and form field outlines against their adjacent background.