Colour Contrast Checker
Enter or pick a foreground and background colour to see the contrast ratio between them, calculated with the official WCAG formula. You get an immediate pass or fail against Level AA and Level AAA for normal text, large text, and interface components — plus a live preview of how the pair actually reads.
- Instant Results
- No Sign-up
- Runs In Your Browser
Choose your colours
Set both colours below. The ratio and WCAG results update automatically.
Large text at 24px bold
Normal body text at 16px. This is the size most of your content will be, and the size WCAG holds to the stricter 4.5:1 requirement at Level AA.
Small supporting text at 14px — captions, helper text, and labels.
WCAG compliance
- WCAG AAPass
Normal text
Requires at least 4.5:1 — this pair achieves 6.29:1.
1.4.3 Contrast (Minimum) · Body copy below 18.66px bold or 24px regular.
- WCAG AAAFail
Normal text
Requires at least 7:1 — this pair achieves 6.29:1.
1.4.6 Contrast (Enhanced) · Enhanced level for body copy. Not required by law.
- WCAG AAPass
Large text
Requires at least 3:1 — this pair achieves 6.29:1.
1.4.3 Contrast (Minimum) · Text at 18.66px bold or 24px regular and above.
- WCAG AAAPass
Large text
Requires at least 4.5:1 — this pair achieves 6.29:1.
1.4.6 Contrast (Enhanced) · Enhanced level for headings and large text.
- WCAG AAPass
UI components & graphics
Requires at least 3:1 — this pair achieves 6.29:1.
1.4.11 Non-text Contrast · Borders, icons, focus indicators, and chart elements.
Understanding colour contrast
What the ratio measures, what the guidelines ask for, and why it is worth getting right.
What colour contrast means
Contrast ratio is the difference in relative luminance between two colours, expressed from 1:1 (identical) to 21:1 (black on white). It is calculated from the sRGB values of each colour, not from how different the hues look — which is why two vivid colours can still fail.
Why it matters
Around one in twelve men and one in two hundred women have some form of colour vision deficiency, and most people over 40 experience reduced contrast sensitivity. Low contrast also makes text unreadable on phone screens in daylight, so fixing it helps everyone, not only users with disabilities.
What WCAG requires
Success criterion 1.4.3 (Level AA) is the one nearly every accessibility law references. It requires 4.5:1 for normal text and 3:1 for large text. 1.4.6 (Level AAA) raises those to 7:1 and 4.5:1, and 1.4.11 requires 3:1 for interface components and meaningful graphics.
Why it improves accessibility
Insufficient contrast is consistently among the most common failures found in automated audits and one of the most frequently cited issues in accessibility demand letters. It is also one of the cheapest to fix: a token change in your design system usually resolves it site-wide.
WCAG 2.2 contrast requirements at a glance
| Content type | Level AA | Level AAA |
|---|---|---|
| Normal text (under 24px, or under 18.66px bold) | 4.5:1 | 7:1 |
| Large text (24px+, or 18.66px+ bold) | 3:1 | 4.5:1 |
| UI components, icons and graphics | 3:1 | Not defined |
| Disabled controls and decorative text | Exempt | Exempt |
Level AA is the benchmark referenced by the ADA, Section 508, and the European Accessibility Act. For the full picture, read our WCAG compliance guide.
Want to find more accessibility issues? Run a full scan.
Contrast is one success criterion out of dozens. Zylyn checks your live page against WCAG 2.2 in about 90 seconds and returns every issue it finds — contrast, alt text, labels, headings, keyboard traps and more — grouped by severity.