Check colour contrast for accessibility
Text that doesn’t stand out from its background is hard to read — especially for people with low vision and anyone reading on a phone in sunlight. This color contrast checker calculates the WCAG contrast ratio of any two colours, tells you whether they pass AA and AAA, and suggests the closest colour that passes with one click.
WCAG contrast requirements
| Content | AA (minimum) | AAA (enhanced) |
|---|---|---|
| Normal text | 4.5 : 1 | 7 : 1 |
| Large text (≥ 24 px, or ≥ 18.66 px bold) | 3 : 1 | 4.5 : 1 |
| Icons, buttons, input borders | 3 : 1 | — |
How to use it
- Type or pick the text and background colours (HEX, RGB, HSL — or use the eyedropper).
- See the ratio, pass/fail badges and a live preview.
- Click “Fix” to get the nearest passing colour that keeps your brand look.
- Check a full palette at once in the matrix.
What is APCA?
APCA (Advanced Perceptual Contrast Algorithm) is a newer method being developed for future WCAG versions. It measures contrast more like human eyes do, especially for dark mode. The checker shows APCA values as extra guidance; WCAG 2.2 AA is still the legal standard in most places.
Why it matters
- Accessibility laws such as the European Accessibility Act and the ADA refer to WCAG.
- Readable text improves conversions and lowers bounce rates.
- Google’s Lighthouse audit flags low-contrast text.
Building a full colour scheme? Start with the color palette generator.
The numbers that matter
| Level | Normal text | Large text (about 24 px, or 19 px bold) |
|---|---|---|
| AA (the usual standard) | 4.5 : 1 | 3 : 1 |
| AAA (stricter) | 7 : 1 | 4.5 : 1 |
Buttons, icons and form borders need at least 3 : 1 against their background.
Examples
- Dark grey text on white: about 17 : 1 — easy to read.
- Light grey placeholder text on white: often around 2.3 : 1 — fails, which is why placeholders are hard to read.
- White text on a bright orange button: about 2.1 : 1 — fails; use dark text or a darker orange.
Fix a failing pair in one click
When a pair fails, the checker suggests the nearest colours that pass — a darker text, a darker background, or white text — so you keep your brand look. Preview the result on an article, buttons and forms, a card and a website layout.
Why it matters
Good contrast helps people with low vision, older readers and anyone using a phone in sunlight. Accessibility rules in many countries refer to WCAG, and readable pages keep visitors longer.
Copy the CSS, copy a report for your team, or share a link to the exact colour pair.