ResourcesHow people use the web
Color contrast, explained
Quick answer
Contrast is the difference in brightness between two colors, like text and its background. WCAG 2.2 Level AA asks for at least 4.5:1 for body text, and 3:1 for large text and for the parts of buttons, icons and focus rings people need to see. You can test your own colors in the checker below.
Facts last checked
What a contrast ratio is
A contrast ratio compares how bright two colors are. It runs from 1:1, where the two colors are the same, to 21:1, which is black on white.
- Lighter color
- 4.5
- compared to
- :
- Darker color
- 1
- Large text, and the parts of controls and icons people need to see (AA): 3:1
- Body text (AA): 4.5:1
- Body text (AAA): 7:1
- Black on white: 21:1
Source: W3C, Understanding WCAG 2.2
83.9%
of the top one million home pages had low-contrast text that an automated scan could detect.
WebAIM Million, 2026
34
instances of low-contrast text on the average home page.
WebAIM Million, 2026
What WCAG 2.2 asks for
The main success criteria for color and contrast. We test against Level AA.
| Success criterion | Level | What it asks for |
|---|---|---|
| 1.4.1 Use of Color | A | Information can't be shown by color alone. |
| 1.4.3 Contrast (Minimum) | AA | 4.5:1 for text. 3:1 for large text. |
| 1.4.6 Contrast (Enhanced) | AAA | 7:1 for text. 4.5:1 for large text. |
| 1.4.11 Non-text Contrast | AA | 3:1 for the parts of controls and graphics people need to see. Added in WCAG 2.1. |
Source: W3C, Understanding WCAG 2.2
- Large text
- At least 18 point, or 14 point bold. That's about 24px, or about 18.5px bold.
- Non-text contrast
- The parts of a control or graphic you need to see to understand it, like a button's border, an icon or a focus ring.
What's exemptLogos, inactive controls and pure decoration don't have to meet 1.4.3.
Check your own colors
Type two hex colors, or use the color pickers.
Contrast checker
Contrast ratio10.47:1
- Body text needs 4.5:1Meets
- Large text needs 3:1Meets
- Buttons, icons and focus rings need 3:1Meets
Who it helps
People with low vision
Faint text fades into the page. Strong contrast keeps it readable.
People with color vision deficiency
Some colors look alike. A clear difference in brightness still shows.
Anyone on a phone in sunlight
Glare washes out a screen. Strong contrast holds up outdoors.
Common mistakes and fixes
Four habits to look for, and what to do instead.
Common mistakes
- Pale gray placeholder text in form fields
- Text placed straight over a photo
- Light gray text on a white page
- Links that differ from the text around them only by hue
Fixes
- Darken placeholder text until it reaches 4.5:1
- Put a solid panel behind text that sits on a photo
- Pick a gray that reaches 4.5:1 on white
- Underline links, so they don't rely on color alone
Removed: .hint { color: #aaaaaa; }
Added: .hint { color: #595959; }
On white, #aaaaaa is 2.32:1. #595959 is 7:1.
Sources
- W3C, Understanding Success Criterion 1.4.3: Contrast (Minimum) (accessed 2026)
- W3C, Understanding Success Criterion 1.4.6: Contrast (Enhanced) (accessed 2026)
- W3C, Understanding Success Criterion 1.4.11: Non-text Contrast (accessed 2026)
- W3C, Understanding Success Criterion 1.4.1: Use of Color (accessed 2026)
- WebAIM, The WebAIM Million: the 2026 report on the accessibility of the top 1,000,000 home pages (2026)
We provide technical accessibility services, not legal advice.
More guides
Who web accessibility is for
Who benefits from an accessible website: the numbers, the types of disability, the tools people use and what each group needs from a site.
How screen readers work
How a screen reader turns a web page into speech, how people move around with one, which ones people use, and what breaks them.
Keyboard access and focus
How people use a website with only a keyboard, what WCAG 2.2 asks for, and a quick check you can run on your own site.
Start with a free snapshot.
Tell us your website. We'll run an automated check of up to 10 key pages and walk you through what we found. It's an automated check that finds only some issues, not an audit.
Get a free snapshot