Light gray text on white can look "elegant" in a Figma mockup on a designer's monitor cranked to full brightness, and be unreadable for everyone else on a phone in direct sunlight. The WCAG (Web Content Accessibility Guidelines) exist precisely so this isn't left to individual taste.
What the contrast ratio actually is
It's a number between 1:1 (identical colors, no contrast) and 21:1 (pure black on pure white, the maximum possible). It's calculated from the relative luminance of each color — not just "subtracting brightness": the formula accounts for the fact that the human eye perceives green more intensely than blue, weighting each channel differently before comparing.
The minimums WCAG 2.1 requires
| Level | Normal text | Large text (≥18pt or ≥14pt bold) |
|---|---|---|
| AA (legal minimum in many countries) | 4.5:1 | 3:1 |
| AAA (optimal) | 7:1 | 4.5:1 |
"Normal text" is essentially all of your content: paragraphs, form labels, small button text. The lower threshold (3:1) only applies to large headings and generously sized bold text.
The most common mistakes
- Light gray placeholders in inputs — usually around 2.5:1, well below the minimum.
- Brand text on brand background — a corporate blue on another corporate blue almost never reaches 4.5:1.
- "Ghost" buttons with a border and text in the same pastel shade — pretty, unreadable.
- Trusting the contrast on a calibrated P3 designer monitor; the real user sees it on a cheap screen at low brightness.
How to fix it without redesigning the palette
You don't need to throw out the brand palette. Almost always it's enough to darken or lighten the lightness (the L channel in HSL) of the problem color while keeping the hue — our color mixer and color picker let you adjust HSL live while checking the resulting ratio.
Check any combination with the WCAG contrast checker: paste the text and background colors and you'll see the exact ratio and whether it passes AA or AAA, for both normal and large text. If you need variations of a base color that keep the brand identity intact, the palette generator builds analogous, complementary and monochromatic schemes already designed with a healthy lightness range in mind.