Complete Guide to Web Color Accessibility
March 2025
Web color accessibility ensures that people with low vision, color blindness, or situational limitations can read and use your interface. The contrast ratio between text and background is the main technical requirement. The World Health Organization estimates that 2.2 billion people have a vision impairment; many rely on sufficient contrast and non-color cues to navigate the web. This guide explains WCAG requirements, how to test colors, and how to build accessible palettes using our color tools.
Accessibility is not optional. In the United States, the Americans with Disabilities Act (ADA) has been applied to websites in court rulings. The European Accessibility Act (EAA) mandates accessibility for certain digital services. Beyond compliance, good contrast improves readability for everyone: users in bright sunlight, on aging displays, or with temporary vision changes. The Understanding Color Contrast for Accessibility article offers a shorter overview.
Why contrast matters
Contrast is the luminance difference between foreground (text, icons) and background. Low contrast forces users to strain or zoom. For people with cataracts, glaucoma, or age-related vision changes, low contrast can make content unreadable. Sunlight on a laptop, a dim screen, or a small phone display amplifies the problem.
Luminance is computed from RGB values. The formula weights green most heavily (0.7152), then red (0.2126), then blue (0.0722). Two colors can look different in hue but have similar luminance, producing low contrast. Yellow on white often fails for this reason; both are bright. Darkening the text or background fixes it.
Accessibility is not optional. In many jurisdictions, public sector and some private sites must comply with WCAG. Lawsuits over inaccessible websites have increased. Beyond compliance, good contrast improves readability for everyone. Users report less eye fatigue and faster comprehension when contrast meets WCAG AA or AAA.
Situational limitations matter too. Someone reading on a phone outdoors, in a moving vehicle, or under fluorescent lighting may struggle with low contrast even if they have typical vision. Designing for the margins benefits the center.
WCAG contrast ratios
WCAG 2.1 defines success criteria for contrast. The formula uses relative luminance: (L1 + 0.05) / (L2 + 0.05), where L1 is the lighter and L2 the darker. The result is a ratio from 1:1 (no contrast) to 21:1 (black on white). The 0.05 prevents division by zero and models the way human vision perceives very dark colors.
Level AA (baseline): 4.5:1 for normal text, 3:1 for large text. Large text means 18pt+ or 14pt+ bold. Level AAA (enhanced): 7:1 for normal text, 4.5:1 for large text. Most sites aim for AA. AAA is preferable for dense content, healthcare, or education. Our contrast checker reports both levels.
Font weight affects perceived contrast. Bold text is easier to read at lower ratios because the strokes are thicker. WCAG therefore allows 3:1 for large bold text at AA. Thin fonts may need higher ratios than the minimum.
Non-text content (icons, borders, graphs) has a looser rule: 3:1 against adjacent colors. Decorative elements are exempt. Focus indicators and form controls need visible contrast. The exact thresholds depend on context; WCAG has detailed guidance. Logos and brand marks have an exception when they cannot be modified, but adjacent text must still meet contrast.
| WCAG Level | Normal text | Large text (18pt+ or 14pt+ bold) |
|---|---|---|
| AA | 4.5:1 | 3:1 |
| AAA | 7:1 | 4.5:1 |
Testing your colors
Enter foreground and background in the contrast checker. The tool shows the ratio, pass/fail for AA and AAA, and a live preview. Test every text/background pair in your design: body text, headings, buttons, labels, placeholder text, disabled states.
Gray-on-white is a common failure. #999999 on white gives roughly 2.8:1, below AA. #767676 reaches 4.54:1, barely passing. For dark text on white, #595959 or darker is safer. The accessible color combinations tool suggests pairs that pass.
Test in context. A color that passes in isolation may fail on a textured background or next to other elements. Use the color accessibility checker and color accessibility heatmap for broader palette analysis.
Testing workflow
Establish a checklist: body text, headings (H1–H6), links, buttons, form labels, placeholders, error messages, disabled states, focus indicators. Test each foreground/background pair. For design systems, document which combinations are approved. The design system color validator helps ensure palette consistency. Run the color blindness simulator as a final step to catch color-only distinctions.
Color blindness
About 8% of men and 0.5% of women have some form of color vision deficiency. Protanopia (red-blind), deuteranopia (green-blind), and tritanopia (blue-blind) are the main types. Red-green confusion is most common. Some users see in grayscale (achromatopsia). The color blindness simulator lets you preview designs for each type.
Protanopia and deuteranopia affect perception of red and green. Reds appear darker or browner; greens can look similar to reds. Tritanopia is rarer and affects blue-yellow perception. Simulations approximate these conditions; they are not perfect, but they highlight problematic color choices.
Do not rely on color alone to convey information. If status is shown only by red/green, add icons or text. Links should be distinguishable by more than color (underlines, weight). Form validation errors need more than a red outline; include a message.
Avoid red-green or red-blue as the only distinction. Yellow and blue remain distinguishable for most users. High contrast helps; even with color confusion, sufficient luminance difference preserves readability. Test charts and graphs: color-coded data should also use patterns, labels, or position to convey meaning.
Building accessible palettes
Start with a base color. Use the color picker to sample and adjust. Generate tints and shades with the tints and shades generator. Test each combination in the contrast checker.
Limit palette size. Three to five main colors plus neutrals are enough. Too many colors increase the chance of inaccessible pairs. Document which foreground/background pairs are approved. The color palette rating tool helps evaluate palettes. For Tailwind users, the Tailwind palette exporter generates config with accessible combinations.
For UI states (success, error, warning), the UI feedback color tester and UI states color visualizer show how state colors behave. Pair color with icons and labels. The color tokens generator creates design token-friendly palettes for design systems.
Text over images
Text on photos or gradients is tricky. The background varies across the image; one contrast measurement is not enough. Solutions: darken or lighten the image behind text, add a semi-opaque overlay, or place text in a solid band. The text over image contrast checker helps test these cases.
Ensure contrast over the area where text sits. Avoid placing text over busy, high-contrast regions. A gradient from dark to light may pass in one area and fail in another.
Dark mode
Dark backgrounds need different contrast handling. Pure white (#FFFFFF) on pure black (#000000) gives 21:1 but can cause halation for some users. Off-white on off-black (e.g., #E0E0E0 on #121212) is gentler while still passing AAA. The dark mode palette builder generates accessible dark themes.
Do not simply invert colors. Saturated colors that work on light backgrounds may vibrate or feel harsh on dark. Reduce saturation for dark mode.
Common mistakes
- Testing only one pair. Check body text, headings, buttons, links, placeholders, disabled states, and error messages. Each can have different foreground/background. The UI states color visualizer helps catch these.
- Ignoring focus indicators. Keyboard users need visible focus. Default browser focus is often too subtle. Use a 3:1 contrast focus ring or equivalent. Test with Tab navigation.
- Relying on color alone. Add icons, labels, or patterns. A red error state should include an error icon or message. Links need more than color (underline, weight).
- Assuming "large text" applies everywhere. 14pt bold counts as large; 14pt regular does not. Verify font size and weight. Use the accessible font size checker to confirm.
- Forgetting hover and active states. Button hover states must maintain contrast. A lighter hover that drops below 4.5:1 fails accessibility.
Tools
Contrast Checker – primary tool for ratio testing. Color Blindness Simulator – view through different vision types. Color Picker – pick and convert colors. Accessible Color Combinations – find passing pairs. Accessible Font Size Checker – test typography. Color Accessibility Heatmap – palette overview. All in color and design. See also the color complete guide for the full tool catalog.
Frequently asked questions about color accessibility
Quick answers to common accessibility questions.
Back to Learn · Browse color tools · Glossary: Contrast ratio · Glossary: WCAG