Color and contrast tools

Color contrast is the single accessibility metric that automated tools nail. They can read pixel values, run the formula, and tell you "this fails." The remaining work is human — picking palettes, negotiating with brand, and figuring out which compromises are honest.

This lesson is the short one in the course. The skill is more about workflow and judgment than depth.

The ratios that matter

WCAG 2 expresses contrast as a ratio. White on white is 1:1; black on white is 21:1. The thresholds:

| What | AA (the usual target) | AAA (stricter) | |---|---|---| | Body text under 18pt regular / 14pt bold | 4.5:1 | 7:1 | | Large text (18pt+ regular / 14pt+ bold) | 3:1 | 4.5:1 | | UI components and graphical objects (icons, form borders, focus rings) | 3:1 | n/a |

Most teams target AA. AAA is reserved for content where it makes sense — long-form reading, government work, anything where the audience tilts older.

WCAG 3, when it lands, will replace ratios with APCA — a perceptual contrast model that handles things like dark mode and very thin text more honestly. You don't have to migrate yet, but if a designer brings up APCA in a review, they're not making it up.

DevTools contrast picker

Both Chrome and Firefox have a contrast picker built in. Inspect any element with text, find its color rule in the Styles pane, and click the color swatch. The picker shows the contrast ratio against the computed background, plus a line that says whether you pass AA, AA-large, AAA, and AAA-large.

.cta {
color: #FFFFFF;       /* swatch click → contrast picker */
background: #C96442;  /* ratio shown against this */
font-size: 1rem;
font-weight: 600;
}

What the picker is good at: showing you whether the current combination passes, and offering AA / AAA suggestion lines on the gradient that you can drag the cursor onto to land in a passing color.

What it can't see: gradients behind text, semi-transparent overlays, video backgrounds, or any case where the "background" isn't a solid CSS color it can read. For those, you have to eyeball the worst-case region and check that.

Browser extensions

For broad, page-wide checking instead of one-element-at-a-time:

• axe DevTools flags every contrast failure on the page, with the exact pair and ratio. Best for a fast sweep.
• Stark (browser + Figma) has a pleasant overlay and supports color-blindness simulators. Gentle to share with designers.
• WAVE as we saw in lesson 1 — its overlay puts a marker next to each failing pair.
• Polypane is a paid browser that shows your design at multiple breakpoints and includes built-in contrast / vision simulators across the whole viewport.

For picking palettes from scratch, two web tools earn their place: Leonardo.io generates entire ramps that hit a target ratio at every step, and Who Can Use by Corey Ginnivan tells you who can read a given pair under various vision conditions, in plain language.

Brand-color compromises

This is where the real conversations happen. Your brand color is a beautiful coral that fails 4.5:1 against white. What now?

A few honest moves:

1. Change the role of the color. If the coral fails as text, use it for backgrounds, large display text, or decorative accents — not for body. White text on the coral may be fine; coral text on white may not.
2. Add a darker variant. Most brand systems have an "on-light" version of the primary that's two or three steps darker. It's the same family, it still feels on-brand, and it passes.
3. Pair it with another shape signal. Use the brand color plus an icon, an underline, or a border, so contrast isn't the only thing carrying meaning.
4. Document the exception. If business says the marketing hero must be the brand pink and damn the contrast, write the exception down: which page, which text, what the alternative for assistive tech is. That makes the cost visible.

Check yourself