Color and contrast
Most legibility wins come from a single number: the contrast ratio.
Color does double duty on the web — it's beautiful and it's information. The accessibility part is mostly about the second one. If a user can't tell the difference between two colors (because of low vision, color-blindness, screen glare, or just a dim laptop on a sunny day), the design has to keep working.
This lesson is about three small numbers and one big habit.
What contrast ratio means
Contrast ratio is a number from 1:1 (no contrast — the same color on the same color) up to 21:1 (pure black on pure white). It's calculated from the relative luminance of the two colors — basically, how bright each one looks to a typical eye.
The exact math is in the WCAG spec; you'll never compute it by hand. What matters is the rule of thumb: higher number, easier to read. Pure black on white is 21:1. Most readable body text on most sites lives between 4.5:1 and 12:1. Anything below 3:1 is borderline unreadable for many people.
The minimum ratios
WCAG 2.2 AA gives you three numbers to remember:
- 4.5:1 — normal body text against its background.
- 3:1 — large text. "Large" means 18pt and bigger, or 14pt bold and bigger. (Roughly 24px regular or 18.66px bold in CSS.)
- 3:1 — non-text contrast: UI components and meaningful graphics. The border of a text input. The icon on a checkbox. Lines and bars in a chart.
Memorize 4.5 / 3 / 3 and you've covered the contrast rules of AA.
There's also AAA, which raises body text to 7:1 and large to 4.5:1. Most product teams don't aim for AAA across the board — but if your product is for low-vision users specifically, it's worth chasing.
Body text below 4.5:1 is the single most common WCAG failure on the web. If you only check one thing in a design review, check that.
Tools that check it
You can check contrast in lots of places:
- The WebAIM Contrast Checker (free, browser-based).
- Chrome / Edge / Firefox DevTools — when you pick a text color in the styles panel, it shows the live contrast ratio against the computed background.
- Figma plugins like Stark or A11y - Color Contrast Checker.
- Browser extensions like axe DevTools flag failures across the whole page.
A trick: when DevTools shows the contrast number, you can drag the picker until it lands on a passing value. Designers love this.
Color is never the only signal
WCAG 1.4.1 — Use of Color — is one of those rules that catches teams off guard. It says: color cannot be the only way you convey information, indicate a state, or distinguish a control.
Think of these common mistakes:
- Required form fields shown only by red labels. (Fix: red label plus an asterisk plus "(required)" in the legend.)
- A "currently selected" tab shown only by a slightly different background. (Fix: an underline, an icon, or
aria-current.) - Pie chart slices distinguished only by color. (Fix: labels, patterns, or directly-labeled segments.)
- Errors flagged only with a red border. (Fix: a red border + an icon + an error message.)
The test: imagine the page printed in grayscale. Could a user still tell what's required, what's selected, what's wrong? If not, you're using color alone.
Underline your links
Inside paragraphs, don't rely on color alone to mark links. A link in blue inside black body text might be invisible to someone with red-green color-blindness, and definitely invisible in grayscale.
The simplest fix is the oldest one: underline links inside text. You can do whatever you like with navigation links and buttons — those have other shape cues. But a link buried in a sentence needs a non-color signal.
/* Inside body copy: keep underlines */
.prose a {
color: var(--accent);
text-decoration: underline;
text-underline-offset: 0.15em;
}
/* In nav, where each link is its own visual block, you can drop it */
nav a { text-decoration: none; }UI components count too
The 3:1 rule for non-text covers the visual borders of interactive things. The classic failure is a text input whose border is only 1.5:1 against the page background — pretty, totally invisible to many users. The fix is a darker border, or a clear background-color difference.
Same goes for icons inside buttons, focus rings (we'll come back to those next lesson), checkbox checks, slider thumbs, and chart strokes. If a sighted user needs to see it to use it, it needs at least 3:1.
Three numbers, one habit. You're now equipped to win 80% of the contrast battles you'll fight. Next: the focus ring you've probably been removing.