How to do it?
- 1.
Enter the text colour
Type a HEX (#777777), rgb() or hsl() value or use the colour picker.
- 2.
Enter the background colour
Set the background the same way; the arrow button swaps the colours.
- 3.
Read the result
The ratio and the table show whether the pair passes AA and AAA for normal and large text and 3:1 for UI components.
- 4.
Fix the colour
If the contrast is too low, pick a target and click “Use” next to the suggested text or background colour.
WCAG 2.2 contrast thresholds
| Element | AA | AAA |
|---|---|---|
| Normal text | 4.5:1 (1.4.3) | 7:1 (1.4.6) |
| Large text (24 px+ or 18.66 px+ bold) | 3:1 | 4.5:1 |
| Icons, input borders, charts, focus indicators | 3:1 (1.4.11) | - |
Thresholds are not rounded: 4.48:1 fails AA. Logos, disabled controls and purely decorative elements are exempt.
How contrast is calculated
Contrast = (L1 + 0.05) / (L2 + 0.05), where L1 and L2 are the relative luminances of the lighter and darker colour (L = 0.2126·R + 0.7152·G + 0.0722·B on linearised sRGB channels). Example: #777777 has L = 0.184, white has L = 1, so the ratio is 1.05 / 0.234 = 4.48:1. The lightest grey that passes 4.5:1 on white is #767676 (4.54:1).
APCA
APCA (Accessible Perceptual Contrast Algorithm), the candidate method for WCAG 3, models how people perceive light text on dark backgrounds and thin fonts better than the WCAG 2 formula. It reports lightness contrast as Lc, from about −108 to 106; a negative value means light text on a dark background. Roughly Lc 75 suits body text, 60 content text and 45 large headings. APCA is still a draft and is shown for information only - conformance is judged against WCAG 2.x.
Common contrast mistakes
- Light grey text on white - the popular #999 and #aaa give only 2.85:1 and 2.32:1.
- Placeholder text used as a label - default placeholder greys usually fall below 4.5:1.
- White text on a mid-tone button - white on #4A90E2 is about 3.3:1, enough only for large text.
- Faint input borders - a #ddd border on white (1.36:1) fails the 3:1 rule of 1.4.11.
- Text over photos - measure against the lightest part of the image behind the text, or add a semi-transparent overlay.
The suggestion feature changes only OKLCH lightness, so a blue button stays blue, just darker or lighter. To convert the result to RGB, HSL or other formats, use the colour converter.
Many accessibility laws point to WCAG level AA: the European Accessibility Act (applied from June 2025) via EN 301 549, Section 508 in the US federal sector, and public-sector rules in many countries. WCAG 2.2 did not change the contrast thresholds, so a pair that passes 2.2 also passes 2.1 and 2.0.
Frequently asked questions
What contrast ratio does WCAG require?
+
Does #777 on white pass WCAG?
+
Did WCAG 2.2 change contrast requirements?
+
How is transparency handled?
+
Can I round 4.48:1 up to 4.5:1?
+
What counts as large text in WCAG?
+
Do logos and disabled buttons need to meet contrast?
+
Updated: