Color Accessibility

A palette that fails contrast ships a product that a measurable slice of users cannot read: low-vision users lose the text, and roughly 8% of men (and about 0.5% of women) with red-green color blindness lose any meaning carried by hue alone. The costly mistake this skill prevents is approving colors that look fine on a designer's bright monitor and fail on real screens, in sunlight, and in audits - forcing a token-system rework after components already reference the broken values.

Operating procedure

Work the steps in order: pairings must be enumerated before ratios are computed, and ratios must pass before color-blindness simulation, because a palette that fails contrast is not worth simulating.

Step 1: Gather inputs

Collect before starting. Label any assumed value as a guess.

1. Brand and functional colors as hex values (primary, semantic red/green/yellow, neutrals).
2. Every background surface they sit on - including dark mode surfaces if one exists.
3. Target conformance: default to WCAG AA. Use AAA (7:1 body, 4.5:1 large) for reading-heavy products, older audiences, or contractual/regulated requirements.
4. Whether text ever sits over images or gradients.
5. Existing token names, so fixes land as token updates, not one-off overrides.

Step 2: Enumerate every real pairing