Foundations / Color Picker
Pick a token. Read whether text can legibly sit on it.
Every ratio here is the exact WCAG 2.x math, so the number on screen is the number an auditor measures. Contrast is the most common accessibility failure on the web, and it is a numeric floor to clear, not a look to eyeball.
Complete Palette
Click any color to copy its CSS variable
How to use it
- Click a swatch. It becomes the tested surface, measured against white text and black text.
- Read the badge. Each candidate shows its ratio (e.g.
6.29:1) and a level. Pick the text color whose badge covers the text size you will actually render. - Copy the token. One click copies the
var(--color-token)reference, so product code consumes the semantic role, never a raw hex.
| Badge | Ratio | Clears |
|---|---|---|
| AAA | 7:1+ | Normal text at AAA and everything under it |
| AA | 4.5 to 6.99 | Normal text at AA; large text at AAA |
| AA Large | 3 to 4.49 | Large text (1.4.3) and non-text / UI (1.4.11) only, never body text |
| Fail | below 3 | Nothing a user must read |
Text size decides which badge you may accept: AA Large passes a 24px heading, a button edge, or a meaningful icon, and fails a 16px paragraph.
WCAG floors
WCAG 2.2 is the W3C Recommendation this system certifies against:
- Normal text: 4.5:1 (AA), 7:1 (AAA). Target 7.
- Large text (24px, or 18.66px bold): 3:1 (AA), 4.5:1 (AAA).
- UI boundaries, focus rings, meaningful icons and chart marks: 3:1 (1.4.11).
- Disabled controls and pure decoration: exempt, so never carrying information a user must read.
"Large" is a spatial exemption, not a license: anything under 24px (or 18.66px bold) is normal text and owes the full 4.5:1. The tool runs the WCAG formula verbatim: ratio (L1 + 0.05) / (L2 + 0.05) over relative luminance L = 0.2126 R + 0.7152 G + 0.0722 B on linearized sRGB. Green dominates the weight because the eye is most sensitive to it.
On the horizon (draft, not normative): the 2.x ratio is a plain luminance division that misjudges the extremes and ignores font weight. APCA models perceived lightness, weight, size, and polarity instead, on a signed Lc scale. It is associated with WCAG 3.0, but that is an early Working Draft still specifying ratio-based contrast. WCAG 2.2 stays the floor we ship; track APCA, do not certify against it.
Deriving pairs from the mono-indigo ramp
One accent hue means accessible pairings come from walking the indigo ramp, not reaching for a second color:
- Indigo 600 (
--color-primary, #4f46e5) on white is 6.29:1: AA for text, AAA for large. Safe for links, accent labels, and as a fill under white text. - Hover and active step to indigo 700 (
--color-primary-dark, #4338ca), where white text rises to 7.90:1 (AAA). Contrast climbs as a control engages, never weakens. - For tinted zones pair indigo 50 (
--color-primary-surface, #eef2ff) with deep indigo text (700+), and confirm the ratio rather than assume it. - Indigo 300 and 400 fail as text on white; the tool badges them Fail, and that verdict is the point.
Sources: 1.4.3 Contrast (Minimum) · 1.4.11 Non-text Contrast · 1.4.6 Contrast (Enhanced) · relative luminance · APCA · WCAG 3.0 Working Draft · 1.4.1 Use of Color