Ensure sufficient color contrast between text and background
Content available in English only.
Accessibility isn’t just about avoiding violations — it’s about ensuring that everyone can use your product with confidence. This guide explains each rule’s intent, highlights common issues, and shows how to fix them according to WCAG and the European Accessibility Act (EAA).
These guidelines do not replace the official WCAG standards. They’re concise, developer-focused notes to help you identify and fix issues effectively.
If you have to squint to read it, the contrast is too low.
Why this matters and how to fix it
Why this matters
Low contrast text is difficult or impossible to read for users with low vision, color blindness, or visual fatigue. When contrast is insufficient, essential information becomes inaccessible.
How to fix this issue
Ensure text contrast meets WCAG minimum ratios: 4.5:1 for normal text and 3:1 for large text. If text sits on top of an image or gradient, add a solid or semi-opaque background to maintain contrast.
Developer guidance
Check contrast across all text—including buttons, form fields, placeholders, and hover/focus states. Do not rely on color alone for meaning. Use tokens or design variables to enforce consistent accessible contrast across themes.
Color Contrast Checker
Example text preview
Contrast ratio: 8.67:1
Normal text
Contrast Ratio:8.67:1
Normal Text (WCAG AA)
Pass ≥ 4.5
AAA
Pass ≥ 7.0
Code examples
Incorrect Implementation
<p style='color:#aaa;background:#fff;'>Low contrast text</p>Correct Implementation
<p style='color:#000;background:#fff;'>High contrast text</p>Real-World Examples
Before
<button style="color:#888; background:#f2f2f2;">Continue</button> <!-- Low contrast, difficult to read -->After
<button style="color:#000; background:#fff; border:1px solid #000;">Continue</button> <!-- Meets minimum contrast -->CSS Example (Guidance)
/* Use CSS variables to enforce accessible contrast */
:root {
--text-color: #111;
--bg-color: #fff;
}
.button {
color: var(--text-color);
background: var(--bg-color);
}
/* If needing more contrast for specific mode */
@media (prefers-contrast: more) {
:root {
--text-color: #000;
}
}Manual testing
- 1. Identify all text elements, including buttons, form fields, and link states.
- 2. Use a contrast checker (e.g., axe, Chrome DevTools, or WCAG contrast calculators) to verify text meets minimum ratios.
- 3. Check hover, focus, and disabled states—they must also meet contrast requirements.
- 4. If text overlays an image or gradient, add a background or overlay to maintain readability.
- 5. Test on multiple displays, including high-glare environments.
Trusted by organizations across Europe working toward WCAG and EAA conformance