Color contrast is the most measurable factor in whether text is readable. The Web Content Accessibility Guidelines (WCAG) define a numerical ratio between text color and background, with specific thresholds for "AA" (typical compliance) and "AAA" (enhanced). Designs that pass these thresholds are readable for the vast majority of users including those with low vision and many forms of color blindness; designs that fail can be unusable for millions of people.
Key Takeaways
- Contrast ratio compares the relative luminance of two colors, ranging from 1:1 (no contrast) to 21:1 (black on white).
- WCAG AA requires 4.5:1 for normal text and 3:1 for large text.
- WCAG AAA requires 7:1 for normal text and 4.5:1 for large text.
- "Large text" is generally 18pt+, or 14pt+ bold.
- Tools like contrast checkers compute the ratio automatically from any pair of colors.
How Contrast Is Calculated
The WCAG contrast formula compares the relative luminance of two colors:
Contrast Ratio = (L1 + 0.05) / (L2 + 0.05)
Where L1 is the luminance of the lighter color and L2 is the luminance of the darker color. Luminance is a weighted sum of the linearized red, green, and blue channels:
L = 0.2126 × R + 0.7152 × G + 0.0722 × B
The weights reflect how the human eye perceives each color: green appears brighter than blue at the same intensity, which is why green has the largest weight.
You almost never need to calculate this by hand. Every modern design tool and accessibility checker does it automatically.
The Contrast Scale
Contrast ratios range from 1:1 to 21:1:
| Ratio | Example | Readability |
|---|---|---|
| 1:1 | Same color | Invisible |
| 1.5:1 | Very subtle | Decorative only |
| 3:1 | Minimum for large text (AA) | Borderline |
| 4.5:1 | AA for normal text | Generally readable |
| 7:1 | AAA for normal text | Strong contrast |
| 12:1+ | Strong contrast | Easy to read |
| 21:1 | Black on white | Maximum contrast |
A good rule of thumb: if you have to squint to read it, the contrast is probably too low.
WCAG Levels Explained
WCAG defines three conformance levels: A (basic), AA (standard), and AAA (enhanced). For contrast specifically:
WCAG AA (most common target):
- 4.5:1 for normal text
- 3:1 for large text (≥18pt, or ≥14pt bold)
- 3:1 for UI components and graphics
WCAG AAA (enhanced):
- 7:1 for normal text
- 4.5:1 for large text
Most regulatory frameworks (Section 508 in the U.S., EN 301 549 in Europe, the EAA) cite AA as the baseline. AAA is encouraged but rarely mandatory. For text-heavy reading interfaces, AAA significantly improves the experience for low-vision users.
What Counts as "Large Text"?
WCAG defines large text as:
- 18pt or larger (24px in CSS at default scale)
- OR 14pt bold or larger (19px bold in CSS)
The reasoning: larger and bolder characters are inherently easier to read, so they need less contrast to meet the same readability threshold.
Worked Examples
Black on white: #000000 on #FFFFFF → contrast ratio 21:1. Maximum possible. Passes everything.
Dark gray on white: #333333 on #FFFFFF → 12.6:1. Comfortable, passes AAA.
Medium gray on white: #666666 on #FFFFFF → 5.7:1. Passes AA, fails AAA for normal text.
Light gray on white: #999999 on #FFFFFF → 2.85:1. Fails AA. Common placeholder text that is too light.
Light blue on white: #7DD3FC on #FFFFFF → 1.9:1. Fails everything for text use.
Blue on white: #2563EB on #FFFFFF → 5.4:1. Passes AA for normal text.
A frequent mistake: using lighter text on white because it "looks nicer," then failing AA. Color choices that look elegant in a Figma file may be unreadable for users with mild visual impairment.
Real-World Failure Modes
The most common contrast failures:
- Placeholder text in form fields. Often gray on white, frequently failing AA.
- Disabled state text. Sometimes designed at low contrast intentionally, but if the user can't read it, they can't understand the disabled state.
- Light text on light backgrounds. White on light blue, light gray on lighter gray.
- Branded color on white. Many brand colors are vivid but mid-luminance, passing for large text but failing for body text.
- Text over images. Without an overlay, contrast varies pixel by pixel and often fails most of the image area.
- Hover and focus states. Easy to forget; need their own contrast check.
Designing for Contrast
A few practical rules:
Test the brand color against your background. If it fails AA, use it for accents, large text, or graphics, not body text.
Build a tonal palette. Take a base color and generate 9 shades (varying lightness). The darker shades work as text colors on light backgrounds; the lighter shades work as backgrounds for dark text.
Use sufficient luminance gap. A 30-point lightness gap in HSL usually produces passable contrast, though the exact ratio depends on hue and saturation.
Layer with overlays. When placing text over images, add a semi-transparent dark overlay (e.g., rgba(0, 0, 0, 0.4)) to standardize the background luminance.
Don't rely on color alone. Color blindness affects up to 8% of men and 0.5% of women. Pair color cues with icons, labels, or shapes. WCAG's "use of color" success criterion is a separate requirement from contrast.
Common Mistakes
Testing only the marketing page. Errors usually live in forms, modals, secondary navigation, and edge-state UI.
Forgetting state variations. Hover, focus, active, disabled: each combination needs its own check.
Ignoring brand color for body text. Brand colors are often chosen for vibrancy, not legibility. Use a darker variant for body copy.
Relying on screen capture comparisons. Visual judgment is unreliable; use a contrast checker for the exact ratio.
Treating AAA as overkill. For long-form reading or critical content, AAA is genuinely better, not just stricter.
Confusing contrast with color blindness. Contrast helps everyone; color blindness simulation tests specifically for hue confusion. Both matter, separately.
Color Blindness Considerations
About 1 in 12 men and 1 in 200 women have some form of color vision deficiency. The most common types:
- Deuteranomaly / Deuteranopia: reduced green sensitivity (~6% of men).
- Protanomaly / Protanopia: reduced red sensitivity (~1%).
- Tritanomaly / Tritanopia: reduced blue sensitivity (rare).
Red-green color blindness is by far the most common. UI elements using red and green together (status indicators, validation states) are the most affected.
Fixes:
- Use different shapes/icons alongside color
- Use blue and orange instead of red and green for two-state distinctions
- Test with a color blindness simulator (browser plugins available)
Contrast ratio compliance helps but does not solve color blindness; they are separate accessibility concerns.
Practical Scenarios
Scenario 1: Brand color check. A brand specifies #7C3AED (vibrant purple). Against white: contrast 5.6:1, passes AA for normal text. Against light gray #F3F4F6 background: 5.3:1, still passes AA.
Scenario 2: Dark mode design. White text #FFFFFF on dark background #111827: ratio 18.5:1. Pure white is sometimes too harsh; using #E5E7EB instead gives 14.6:1, still strong but slightly softer.
Scenario 3: Form placeholder. Default placeholder gray #9CA3AF on white: 2.85:1. Fails AA. Replace with #6B7280 (4.83:1) to pass.
Scenario 4: Status indicator. Red for "error" and green for "success" with similar lightness fails color blindness tests. Add icons (✓ and ✕) or use different shapes; the color becomes redundant rather than the only signal.
FAQ
What is a contrast ratio? A number describing the difference in relative luminance between two colors, ranging from 1:1 (identical) to 21:1 (black on white). Higher means more contrast.
What contrast ratio is required for accessibility? WCAG AA requires 4.5:1 for normal text and 3:1 for large text. AAA requires 7:1 and 4.5:1 respectively.
What is considered "large text" in WCAG? 18pt or larger (about 24px), or 14pt bold (about 19px bold). Larger characters need less contrast to be readable.
Does contrast ratio depend on the color format? No. Whether you specify a color in HEX, RGB, or HSL, the rendered pixel is the same, so the contrast ratio is identical.
Is AAA always better than AA? For text-heavy interfaces and critical content, yes. AAA can be hard to achieve with branded color palettes; AA is the practical baseline for most websites.
How does color blindness relate to contrast? They are related but distinct. Good contrast helps with low vision and lighting issues. Color blindness requires designs that don't depend on hue alone; pair color with shape, label, or icon.
Where can I check contrast? Online contrast checkers, browser DevTools (Chrome, Firefox), Figma plugins, and the Contrast Checker all compute the ratio from any two colors instantly.
Related Tools
The Contrast Checker evaluates any text/background color pair against WCAG AA and AAA. For format flexibility, use the Color Converter and HEX to RGB Converter.
Related Articles
Final Thoughts
Color contrast is the rare accessibility concern with a single, measurable, objective answer. Either the ratio meets WCAG or it doesn't. There's no debate, no edge case argument, just a number. That makes it one of the easiest accessibility wins available, and it benefits everyone, not just users with disabilities. Glare on a phone screen, eyes tired at the end of a workday, a parent reading on the train: anyone reading text under non-ideal conditions benefits from designs that meet WCAG. Spend the five minutes to run your colors through a checker. The improvement compounds across every user, every page, every visit.