Color contrast & readability
Why color contrast matters for readability and accessibility, how to check yours, and what the WCAG 2.1 AA standard requires.
Color contrast is the difference in brightness and color between text and the background behind it. Low contrast makes text hard to read — for everyone, but especially for people with low vision or color blindness.
Getting contrast right is one of the foundational requirements of accessible web design.
Quick summary
WCAG 2.1 AA requires a contrast ratio of at least 4.5:1 for normal text and 3:1 for large text. You can check your contrast ratio for free at webaim.org/resources/contrastchecker. If you fail, increase the contrast by darkening the text or lightening the background.
What is a contrast ratio?
A contrast ratio compares the brightness of text to the brightness of its background. The scale runs from 1:1 (no difference — same color on same color) to 21:1 (maximum difference — black on white).
The higher the number, the more contrast there is, and the easier the text is to read.
| Contrast ratio | Readability |
|---|---|
| 1:1 | Invisible — same color as background |
| 2:1 | Very hard to read |
| 3:1 | Minimum for large text (WCAG AA) |
| 4.5:1 | Minimum for normal text (WCAG AA) |
| 7:1 | WCAG AAA — enhanced (very high contrast) |
| 21:1 | Maximum (black text on white background) |
WCAG 2.1 AA requirements
Under the international WCAG 2.1 AA standard:
- Normal text (below 18pt / 24px, or below 14pt bold / ~19px bold): minimum contrast ratio of 4.5:1
- Large text (18pt / 24px or larger, or 14pt bold / ~19px bold or larger): minimum contrast ratio of 3:1
- UI components and graphical objects (icons, charts, form borders): minimum contrast ratio of 3:1
These apply to text against its direct background color. If text is on a photo or gradient, the contrast must be checked against the lightest part of the background the text could appear on.
How to check your contrast ratio
The easiest free tool is the WebAIM Contrast Checker at webaim.org/resources/contrastchecker.
Find your text color and background color. These are usually defined in your brand style guide or can be identified by your web team. They're expressed as hex codes (like #1A1A1A or #FFFFFF) or RGB values.
Go to webaim.org/resources/contrastchecker. Enter your foreground (text) color and background color.
Read the result. The tool shows your contrast ratio and tells you whether you pass WCAG AA and AAA for both normal and large text.
Adjust if needed. If you fail, try a darker text color or a lighter background. The tool updates in real time as you adjust.
Common contrast mistakes
Gray text on white backgrounds
Light gray text on white is very popular in design but frequently fails contrast requirements. #999999 on white is only 2.85:1 — well below the 4.5:1 minimum.
White text on light colors
White text on a light blue, yellow, or green background often fails. Test it.
Text on photos
Text placed directly on a photo needs to be checked against all areas of the photo the text might overlap. A dark overlay behind the text is often the easiest fix.
Colored text on colored backgrounds
Both colors affect the contrast. Blue text on a green background, for example, may look visible but still fail the mathematical contrast test.
Color blindness
About 8% of men and 0.5% of women have some form of color blindness. The most common type is red-green color blindness — these people cannot reliably distinguish red from green.
This means:
- Don't use red/green alone to signal "error" vs "success" — add an icon or label
- Don't use color alone to label or categorize anything important
This is the WCAG requirement not to rely on color alone to convey meaning.
Common questions
Related guides
Need a hand?