You've probably landed on a site where the text looked washed out against the background — technically readable, but tiring after a few seconds. That's a color contrast problem. It's a usability issue for everyone, and a serious barrier for people with low vision or color blindness.
This guide explains what color contrast is, what the WCAG numbers actually mean, and how to check whether your color choices pass.
What is Color Contrast?
Color contrast is the difference in perceived brightness between two colors — usually a background and the text placed on top of it. The higher the contrast ratio, the easier text is to read.
The WCAG (Web Content Accessibility Guidelines) defines contrast ratios using a mathematical formula based on relative luminance. The ratio ranges from 1:1 (no difference, like white text on white) to 21:1 (maximum contrast, like black text on white).
WCAG Contrast Requirements
WCAG defines two conformance levels:
| Level | Normal text (under 18pt) | Large text (18pt / 14pt bold+) |
|---|---|---|
| AA (minimum) | 4.5:1 or higher | 3:1 or higher |
| AAA (enhanced) | 7:1 or higher | 4.5:1 or higher |
For most public websites, targeting AA is the standard. AAA is recommended for critical reading contexts like legal documents or health information.
Real contrast ratios to calibrate your eye
- White (#FFF) on black (#000): 21:1 — maximum possible
- White (#FFF) on dark gray (#595959): 7:1 — AAA pass
- White (#FFF) on medium gray (#767676): 4.54:1 — AA pass, barely
- White (#FFF) on light gray (#999999): 2.85:1 — AA fail
- White (#FFF) on light blue (#93C5FD): 2.04:1 — fail
Common failures and how to fix them
- Light gray placeholder text on white — fix: darken to at least
#6B7280 - White text on yellow or light orange — fix: switch to black or very dark text
- Blue text on light blue background — fix: increase the value difference, not just the hue
- Brand color used directly as body text — fix: darken it by 20–30% for text use
White text or black text — how to decide
A quick rule of thumb: use white text on dark backgrounds and black text on light backgrounds. For mid-range colors (certain greens, purples, oranges), it's genuinely hard to tell visually. Run the colors through a contrast checker rather than guessing.
Frequently Asked Questions
- Does contrast ratio apply to icons and borders too?
- WCAG's contrast requirements (1.4.3) primarily target text and images of text. A separate criterion (1.4.11 — Non-text Contrast) requires a 3:1 ratio for meaningful UI components like button borders, form inputs, and data visualizations. Purely decorative elements are exempt.
- What if my brand color doesn't meet the contrast requirement?
- The most practical fix is to create a darker variant of your brand color for text use while keeping the original for logos, highlights, and decorative elements. Even a 10–15% drop in lightness often pushes a color past the 4.5:1 threshold. A contrast checker will tell you exactly how far you need to go.
- How do I check contrast for text on a gradient background?
- Check the contrast at both the lightest and darkest points of the gradient. If either end fails, the text isn't reliably readable across the full gradient. Common fixes include adding a semi-transparent overlay under the text or applying a
text-shadowwith a contrasting color.
Summary
- Color contrast is the brightness difference between text and its background, expressed as a ratio
- WCAG AA requires at least 4.5:1 for normal text and 3:1 for large text
- Light grays, pastels, and same-hue combinations are common failure points
- Visual judgment isn't reliable — use a tool to verify before you ship
Check your color choices before publishing:
- Color Contrast Checker — paste two colors and get an instant AA/AAA result
- Color Code Converter — find a darker shade by converting between HEX and HSL
- Color Palette Generator — build accessible color sets for your project