Guide
Color Contrast and Accessibility
Color contrast is how different two colors look in brightness, and it decides whether text can be read. WCAG measures it as a ratio from 1:1 (no difference) to 21:1 (black on white). For normal text the usual target is at least 4.5:1.
The WCAG thresholds
The Web Content Accessibility Guidelines (WCAG) set minimum contrast ratios at two conformance levels, AA and AAA. Most sites aim for AA. The minimums depend on what you are showing:
| What | AA (minimum) | AAA (enhanced) |
|---|---|---|
| Normal text | 4.5:1 | 7:1 |
| Large text | 3:1 | 4.5:1 |
| Interface parts and graphics, such as input borders, icons and chart lines | 3:1 | No AAA level |
Pure decoration, logos and disabled controls are exempt. If you are unsure whether something counts, treat it as meaningful and meet the ratio.
How the ratio is calculated
The ratio compares the relative luminance of the lighter color (L1) with that of the darker color (L2):
contrast = (L1 + 0.05) ÷ (L2 + 0.05)
Relative luminance is computed from the sRGB channel values in three steps:
- Divide each channel by 255 to get a number from 0 to 1.
- Linearize it: if the value is very small, divide it by 12.92. Otherwise compute ((value + 0.055) ÷ 1.055) raised to the power 2.4.
- Combine: L = 0.2126 × R + 0.7152 × G + 0.0722 × B.
The weights reflect how sensitive our eyes are to each color: green counts the most and blue the least. White has a luminance of 1 and black has 0, which gives the maximum ratio of (1 + 0.05) ÷ (0 + 0.05) = 21.
This site truncates a ratio instead of rounding it up, so a result of 4.499 is shown as 4.49 and is never presented as passing 4.5.
Worked examples
Take the gray #767676 on white. Its channels are all 118, so each channel becomes 118 ÷ 255 = 0.463, which linearizes to 0.181. That is also its luminance, because the weights add up to 1. The ratio is (1 + 0.05) ÷ (0.181 + 0.05) = 4.54:1, which passes AA for normal text. The next lighter gray, #777777, gives 4.47:1 and fails. One step in the hex code changes the result.
| Text on background | Ratio | Normal text AA | Large text AA |
|---|---|---|---|
#000000 on #FFFFFF | 21:1 | Pass | Pass |
#595959 on #FFFFFF | 7.00:1 | Pass (also AAA) | Pass |
#767676 on #FFFFFF | 4.54:1 | Pass | Pass |
#777777 on #FFFFFF | 4.47:1 | Fail | Pass |
#FFFFFF on #4169E1 | 4.84:1 | Pass | Pass |
#000000 on #4169E1 | 4.33:1 | Fail | Pass |
#FFFFFF on #E5484D | 3.91:1 | Fail | Pass |
#FFFF00 on #FFFFFF | 1.07:1 | Fail | Fail |
Notice that royal blue passes with white text but not with black, and that yellow on white is nearly invisible. Which text color works depends on the background, so check both. Every color page on this site lists its ratio with white and with black, and you can test any pair in the contrast checker.
What counts as large text
WCAG defines large text as at least 18 point (24 CSS pixels) regular weight, or at least 14 point (about 18.66 CSS pixels) bold. Large letters are easier to read at lower contrast, which is why the minimum drops to 3:1. Body copy is almost never large text, so use 4.5:1 for it.
Beyond the ratio
A passing ratio is the minimum, not a guarantee of comfortable reading. A few things the number cannot tell you:
- Font weight and size. Thin, light fonts at small sizes are harder to read than their ratio suggests.
- Backgrounds with images or gradients. The ratio changes across the area, so test the worst spot or place text on a solid panel.
- States. Hover, focus, selected and disabled states need checking too. A visible focus outline helps keyboard users and should reach 3:1 against what surrounds it.
- Dark mode. A pair that works on a light page does not automatically work on a dark one. Test both.
- Other methods. Newer approaches to measuring contrast are being developed for future guidelines, but WCAG 2 ratios are still what current guidelines and most audit tools use.
Do not rely on color alone
Commonly cited estimates are that roughly one in twelve men and one in two hundred women have some form of color vision deficiency, most often a difficulty telling red from green. WCAG also asks that color is never the only way to show information. Back up color with text, icons, patterns or position: an error field should carry an error message, not just a red border, and a chart should label its lines, not rely on a legend of similar hues. The color blindness simulator shows how your colors may look to people with different types of color vision.
Fixing low contrast
- Darken the text color or lighten the background until the ratio reaches the target. Changing lightness while keeping the hue keeps the color recognizable.
- Switch between white and black text, whichever has the higher ratio on that background.
- For a brand color that is too light for text, use it for large shapes and accents, and use a darker shade of it for small text and links.
- Make text larger or bolder if it then counts as large text.
- Check again after every change.
The contrast checker suggests the nearest passing colors for you. For ready-made scales, see the tints and shades generator.