Accessible Text Colors: Contrast Ratios Explained
Normal text needs a contrast ratio of at least 4.5:1 against its background to meet WCAG level AA, and large text needs 3:1. The table below shows real color pairs that pass and fail, including some that look strong but don't qualify.
What contrast ratio measures
Contrast ratio compares the brightness of two colors, usually text and its background. It runs from 1:1 (identical colors, invisible text) to 21:1 (black on white). The Web Content Accessibility Guidelines (WCAG) use it to decide whether text is readable for people with low vision, color blindness, or simply a phone screen in sunlight.
The thresholds to remember
| What | Level AA (the usual target) | Level AAA (enhanced) |
|---|---|---|
| Normal text | 4.5:1 | 7:1 |
| Large text: 24 px regular, or about 18.7 px bold and up | 3:1 | 4.5:1 |
| Icons, input borders, focus rings and other interface parts | 3:1 | – |
AA is what most laws, policies and audits refer to. Logos and purely decorative text are exempt, and so is text in disabled controls.
Real color pairs, measured
We calculated these ratios with the WCAG formula. The first color is the text, the second the background.
| Text | Background | Ratio | Normal text (AA) | Large text (AA) |
|---|---|---|---|---|
| #000000 black | #FFFFFF white | 21.0:1 | Pass | Pass |
| #0F172A navy | #FFFFFF white | 17.85:1 | Pass | Pass |
| #000000 black | #F59E0B amber | 9.78:1 | Pass | Pass |
| #2563EB blue | #FFFFFF white | 5.17:1 | Pass | Pass |
| #FFFFFF white | #DC2626 red | 4.83:1 | Pass | Pass |
| #64748B slate | #FFFFFF white | 4.76:1 | Pass | Pass |
| #767676 gray | #FFFFFF white | 4.54:1 | Pass (just) | Pass |
| #777777 gray | #FFFFFF white | 4.48:1 | Fail | Pass |
| #FF0000 red | #FFFFFF white | 4.00:1 | Fail | Pass |
| #FFFFFF white | #EF4444 red | 3.76:1 | Fail | Pass |
| #FFFFFF white | #16A34A green | 3.30:1 | Fail | Pass |
| #94A3B8 light slate | #FFFFFF white | 2.56:1 | Fail | Fail |
| #FFFFFF white | #F59E0B amber | 2.15:1 | Fail | Fail |
Lessons from the table:
- #767676 is the lightest gray that passes on white. One step lighter, #777777, fails.
- Pure red on white fails for normal text, even though it looks strong.
- Bright yellows, oranges and greens need dark text, not white. Amber with black text scores 9.78:1; with white, 2.15:1.
- Ratio is symmetric. White on blue and blue on white give the same number.
How the ratio is calculated
- Convert each color's red, green and blue values from 0–255 to 0–1.
- Linearize each channel: if the value is 0.04045 or less, divide by 12.92; otherwise compute ((value + 0.055) ÷ 1.055)2.4.
- Relative luminance L = 0.2126 × R + 0.7152 × G + 0.0722 × B. Green counts most because the eye is most sensitive to it.
- Contrast ratio = (L of the lighter color + 0.05) ÷ (L of the darker color + 0.05).
The heavy weight on green explains some surprises: a green and a blue can look equally strong but have very different luminance, so white text passes on one and fails on the other.
How to check your own colors
- Get the exact HEX codes. The Color Picker converts between HEX, RGB and HSL and can sample a color from a screenshot. It doesn't measure contrast itself.
- Measure the pair. In Chrome or Edge, right-click the text, choose Inspect, and click the color swatch in the Styles panel: it shows the contrast ratio and whether it passes AA and AAA.
- Check every state: normal, hover, focus, disabled placeholders, and text over images.
Fixing a failing pair
- Darken the text or lighten the background. In HSL, lower the lightness of the text color a few points at a time until it passes. The hue stays the same, so the brand still looks right. See HEX, RGB and HSL explained.
- Switch text color. On mid-bright backgrounds, black often passes where white fails.
- Make the text large and bold only if the design allows; the 3:1 threshold for large text is not a loophole for body copy.
- Put text on a solid panel instead of directly over a photo, where contrast changes from pixel to pixel.
Don't rely on color alone
Contrast is only part of accessibility. Links should be distinguishable without color (for example, underlined), and error messages should say what's wrong in words, not just turn a field red.
Frequently asked questions
Is 4.5:1 required by law?
Many accessibility laws and public-sector rules reference WCAG level AA, which includes 4.5:1 for normal text. Requirements depend on your country and sector.
Does font weight change the ratio?
No. The ratio depends only on the two colors. Weight and size decide which threshold applies.
Why does light gray text look fine to me but fail?
Your screen, eyesight and lighting may be ideal. The thresholds are set so text stays readable for people with low vision and on poor screens.
What about dark mode?
The same thresholds apply. Very bright white on pure black can feel harsh, so many dark themes use off-white on dark gray while staying well above 4.5:1.