Accessibility
Color contrast ratio
Color contrast ratio measures how much lighter one color is than another, from 1:1 (identical) to 21:1 (black on white).
WCAG uses it to decide whether text is readable. At level AA, normal text needs at least 4.5:1 against its background, and large text needs 3:1.
At a glance
| Measures | How much lighter the lighter color is than the darker one |
| Range | 1:1 (the same color) to 21:1 (black on white) |
| Normal text, AA | At least 4.5:1 (WCAG 1.4.3) |
| Large text, AA | At least 3:1. Large means 18pt (24px), or 14pt bold (about 18.7px) |
| Controls and icons, AA | At least 3:1 against the colors next to them (WCAG 1.4.11) |
| Enhanced, AAA | 7:1 for normal text, 4.5:1 for large text (WCAG 1.4.6) |
| Detected by | OverlayQA Accessibility Audit |
Why it matters
Low contrast makes text hard to read for people with low vision or color deficiencies, and for anyone whose contrast sensitivity has dropped with age. The W3C set the AA bar at 4.5:1 to make up for the loss that comes with roughly 20/40 vision, and the AAA bar at 7:1 for roughly 20/80 (W3C, Understanding 1.4.3).
Brand colors get no pass. Only text that is part of a logo is exempt, so a light gray caption fails even when the brand guide picked it.
How the ratio is calculated
WCAG compares the relative luminance of the two colors: (L1 + 0.05) / (L2 + 0.05), where L1 is the lighter color and L2 the darker. Relative luminance turns each color into a single brightness value, weighting green most and blue least.
The thresholds are exact. WCAG says not to round, so #777777 on white, at 4.48:1, fails the 4.5:1 rule.
Examples
Each ratio below was computed with the WCAG formula, and Pass or Fail uses the AA thresholds. The sample shows the pair as text on its own background.
| Colors | Ratio | Normal text | Large text |
|---|---|---|---|
| #9CA3AF on #FFFFFF | 2.54:1 | Fail | Fail |
| #777777 on #FFFFFF | 4.48:1 | Fail | Pass |
| #767676 on #FFFFFF | 4.54:1 | Pass | Pass |
| #3468F8 on #FFFFFF | 4.69:1 | Pass | Pass |
| #FFFFFF on #22C55E | 2.28:1 | Fail | Fail |
| #FFFFFF on #15803D | 5.02:1 | Pass | Pass |
#777777 and #767676 look the same, yet one fails and one passes. That is why contrast gets measured, not eyeballed. OverlayQA's own brand blue, #3468F8, passes AA on white at 4.69:1.
Text contrast vs. non-text contrast
WCAG 1.4.3 covers text. WCAG 1.4.11 covers the parts of a control a person needs to see to use it, like an input's border, a checkbox, a focus indicator or a meaningful icon, and asks for 3:1 against the colors next to it. Disabled controls are exempt from both.
Common mistakes
- Light gray helper text.
#9CA3AFon white reads as quiet and subtle, and scores 2.54:1. - White text on bright brand buttons. White on
#22C55Escores 2.28:1. A darker shade of the same green,#15803D, passes at 5.02:1. - Rounding up. 4.48:1 is not 4.5:1. WCAG treats the threshold as exact.
- Checking one state. A button that passes at rest can fail on hover, when its colors change. Check every state a person sees.
- Text over images. The ratio depends on the pixels right behind the letters, so a photo or gradient can pass in one spot and fail in another.
Frequently asked questions
What contrast ratio does WCAG AA require?
4.5:1 for normal text and 3:1 for large text, which WCAG defines as 18pt, or 14pt bold. Buttons, form borders and meaningful icons need 3:1 under WCAG 1.4.11.
Is 4.48:1 close enough to pass?
No. WCAG treats the ratios as thresholds and says not to round them, so 4.48:1 fails the 4.5:1 rule.
Do logos have to meet contrast rules?
No. Text that is part of a logo or brand name is exempt. Other text set in brand colors is not.
What ratio does AAA need?
7:1 for normal text and 4.5:1 for large text, under WCAG 1.4.6.
Sources: W3C, Understanding WCAG 2.2: 1.4.3 Contrast (Minimum), 1.4.6 Contrast (Enhanced), 1.4.11 Non-text Contrast.
Last updated October 22, 2026