WCAG Color Contrast Fixer — 4 Hue-Preserving Fixes per Pair, APCA + Colorblind Re-check

Real-world use cases

• Audit a brand palette pass before the design review

  Designer ships the v2 token file the night before review. You paste each foreground/background pair from `tokens.json` into the batch box (12 pairs, comma per line), wait for the table, and instantly see which three pairs miss AA. For each miss, you click "Darken background" on the fix card — the suggestion stays in the same hue family as the original tint, so when the designer pushes back ("you killed my warm cream"), you paste a screenshot showing the original cream is still cream, just 6% darker. Review goes from "we need another two days" to "approved, ship Monday."

• Convince a stakeholder a dark-mode pair "feels off" with numbers

  The brand wants a #38bdf8 cyan on #0f172a slate hero. WCAG 2.1 says 7.4:1 — sailing AAA. The PM still says it looks "shimmery and hard to read at small sizes." Drop the pair in, point at APCA Lc: about -68, in the "good" band but only marginally for body text. Run the colorblind grid — the deuteranopia row stays green, so the issue isn't colorblindness. Pull "Darken cyan" to lift APCA into the |Lc| ≥ 75 "excellent" band; the new color is still recognizably brand. Stakeholder sees the math, not the vibes, and approves.

• Fix a failing call-to-action button without touching the brand red

  The primary CTA is #ef4444 red on white — checker says 4.0:1, fails AA normal (passes AA large only). Sales says "do not touch the red." Open the fixer, target AA. "Darken text" gives you a deeper red (#dc2626-ish) that clears 4.5:1 while the hue gauge in the suggestion card shows it's still firmly in the red 5-15° hue band — no purple drift, no pink drift. Apply, screenshot, ship the patch. The brand red moves one shade deeper and the support inbox stops getting "I can't read the button text" tickets.

• Pair-test a custom dark theme against red-green colorblindness

  You're shipping a dark theme variant and want to be sure the status colors (success green / error red) aren't going to collapse for the ~8% of male users with deuteranopia. Drop the green-on-bg pair in, scan the deuteranopia row of the colorblind grid: ratio drops from 5.2:1 to 2.9:1, way below AA. The WCAG 2 number alone would have shipped this. Switch the success color to "Lighten background" on the fix card — the new pair clears 4.5:1 on BOTH normal vision and the deuteranopia simulation. The error red was fine; the green needed a real-world re-check.

Common pitfalls

• Assuming WCAG 2 ratio ≥ 4.5 means the pair is colorblind-safe — for ~8% of male users with deuteranopia it can collapse to under 3:1. Always glance at the colorblind row before shipping.

• Picking the first lever the tool gives you. Lightening text often pushes a fix into a colorblind-unsafe direction; darkening the background usually preserves both WCAG and colorblind safety on the same hue.

• Trusting APCA Lc instead of WCAG 2 for compliance work. APCA is excellent for design judgment but lawsuits, contracts, and audits still cite WCAG 2.x ratios — hit WCAG 2 first, then use APCA as the second-opinion.

Privacy