Understanding Color Contrast Requirements
A complete guide to WCAG color contrast standards and how to meet them.
What is Color Contrast?
Color contrast is the difference in light between text (or graphical elements) and its background. High contrast means there's a big difference between the foreground and background colors, making text easy to read. Low contrast means the colors are similar, which can make text difficult or impossible to read for many users.
Color contrast is measured as a ratio. Pure black text on a pure white background has the maximum contrast ratio of 21:1. Text that's the same color as its background has a contrast ratio of 1:1 (no contrast at all). WCAG specifies minimum contrast ratios to ensure text is readable by users with various visual abilities.
Why Color Contrast Matters
Insufficient color contrast is one of the most common accessibility issues on the web. It affects many users:
- Users with low vision need higher contrast to distinguish text from background
- Users with color blindness may not perceive certain color differences (about 8% of men and 0.5% of women)
- Older users often experience decreased contrast sensitivity as part of normal aging
- Users in challenging environments like bright sunlight or glare need good contrast to read screens
- Everyone benefits from readable text. Good contrast reduces eye strain and improves comprehension
Low contrast is also frequently cited in ADA website lawsuits. Gray text on light backgrounds, light text on images, and stylish but unreadable color combinations are common targets for legal complaints.
WCAG Contrast Requirements
WCAG defines contrast requirements in Success Criterion 1.4.3 (Contrast - Minimum) for Level AA and Success Criterion 1.4.6 (Contrast - Enhanced) for Level AAA. Since most legal settlements require Level AA compliance, we'll focus on those requirements.
Required Ratios for Level AA
| Element Type | Minimum Ratio | Definition |
|---|---|---|
| Normal text | 4.5:1 | Text smaller than 18pt (or 14pt bold) |
| Large text | 3:1 | Text 18pt+ (or 14pt+ bold), approximately 24px+ (or 19px+ bold) |
| UI components | 3:1 | Interactive elements, icons, graphical objects |
| Focus indicators | 3:1 | Visual focus rings around interactive elements |
What Counts as "Large Text"?
Large text has lower contrast requirements because bigger text is easier to read. WCAG defines large text as:
- 18 point (approximately 24 CSS pixels) or larger for regular weight text
- 14 point (approximately 18.5 CSS pixels) or larger for bold text
Be careful with this exception. Many sites use it to justify low contrast on headings while body text remains unreadable. Always ensure your body text meets 4.5:1.
Contrast Examples
Here are examples of passing and failing contrast ratios:
Common Contrast Problems
Gray Text Syndrome
One of the most common issues is using gray text instead of black for body copy. Designers often do this to create a "softer" look, but it can make text unreadable. Light gray text (#999999 or lighter) on a white background almost never meets contrast requirements.
Solution
Use a darker gray that meets 4.5:1 contrast. On a white background, text color should be approximately #595959 or darker. You can still achieve a soft look while maintaining readability.
Text Over Images
Text placed directly over photographs or complex backgrounds often fails contrast requirements because the background varies. Light text may be readable over dark parts of an image but invisible over light parts.
Solutions
Add a semi-transparent overlay behind text, use a solid background for the text area, add a text shadow, or choose images with consistent tones where text will appear.
Placeholder Text
Form placeholder text (the gray hint text inside input fields) is frequently too light. While placeholder text doesn't strictly need to meet contrast requirements since it's not actual content, users with low vision still need to read it.
Solution
Make placeholder text darker, and always use visible labels in addition to placeholders. Don't rely on placeholders as the only way to explain what users should enter.
Link Colors
Links must meet contrast requirements both against their background AND be distinguishable from surrounding text. If links aren't underlined, they need 3:1 contrast against the surrounding text color in addition to 4.5:1 against the background.
Solution
The simplest approach: underline your links. Then they only need to meet background contrast requirements. If you remove underlines for design reasons, ensure your link color is sufficiently different from body text.
Focus Indicators
When users navigate with a keyboard, focus indicators show which element is currently selected. These indicators must have 3:1 contrast against adjacent colors. Default browser focus styles usually meet this, but custom styles often don't.
Solution
If you customize focus styles, ensure the focus indicator (outline, ring, background change) has sufficient contrast. Test by tabbing through your site. Can you easily see where focus is?
How to Check Color Contrast
Using Contrast Checker Tools
Several free tools can calculate contrast ratios:
- WebAIM Contrast Checker - Enter two colors and see the ratio instantly
- Colour Contrast Analyser (CCA) - Desktop app that includes a color picker
- Browser DevTools - Chrome and Firefox show contrast ratios when inspecting text
- Our scanner - Automatically checks all text on your page
Using Browser Developer Tools
Modern browsers can show contrast ratios directly:
- Right-click on text and select "Inspect"
- In Chrome, click the color square next to the "color" property
- The contrast ratio appears with AA/AAA pass/fail indicators
- You can adjust the color and watch the ratio update in real-time
Automated Scanning
Running an automated accessibility scan (like ours) will identify all contrast failures on a page at once. This is more efficient than checking colors manually, though you should still spot-check text over images and other complex cases.
Fixing Contrast Issues
Adjusting Text Colors
The easiest fix is usually darkening light text or lightening dark text until it meets the required ratio. Use a contrast checker to find the exact threshold where your color passes.
Adjusting Background Colors
Sometimes it's better to change the background. A slightly darker background can make all text on a page more readable without changing your brand colors.
Using Overlays
For text over images, add a semi-transparent color overlay between the image and text. A black or dark overlay with 60-70% opacity usually provides enough contrast for white text.
Choosing Accessible Color Palettes
When designing new sites, choose colors with accessibility in mind from the start. Many design systems now include accessibility-checked color palettes. Look for color combinations pre-verified to meet WCAG requirements.
Color Contrast Checklist
- Body text meets 4.5:1 - All regular-sized text has sufficient contrast
- Headings meet 3:1 minimum - Large text (18pt+) meets at least 3:1
- Links are distinguishable - Either underlined or 3:1 contrast against surrounding text
- Form labels are readable - Input labels meet contrast requirements
- Placeholder text is visible - Placeholder text is dark enough to read
- Error messages are clear - Error text meets contrast requirements
- Focus indicators are visible - Keyboard focus has 3:1 contrast
- Icons and graphics have contrast - Meaningful icons meet 3:1
- Text over images is readable - Overlays or other techniques ensure readability
- Color isn't the only indicator - Important information isn't conveyed by color alone
Quick Test
If you're unsure about your contrast, try viewing your page in grayscale. On Mac, go to System Preferences > Accessibility > Display > Color Filters > Grayscale. On Windows, press Win+Ctrl+C. If you can't read your text comfortably in grayscale, the contrast may be too low.