WCAG & APCA contrast checker with Fix
This page is the contrast tool: measure WCAG 2.1 and APCA, then Fix text lightness to AA without changing brand hue. If you need the OKLCH plane or photo extract, use those landings — the FAQ here stays on accessibility pairs.
Measure both models
WCAG 2.1 ratios for normal text (AA 4.5:1, AAA 7:1) and large text (AA 3:1), plus APCA Lc with rough UI/body pass marks. The matrix checks every palette pair for normal text.
Fix preserves hue
Fix keeps chroma and hue, then searches OKLCH lightness until normal text hits AA. See before/after specimens and Undo if you want the previous text color.
Share a failing pair
Copy link produces a deep URL with ?fg=&bg= so a teammate opens the same pair on this contrast page — useful in tickets and docs.
Audit Tailwind stops
Each Tailwind v4 default color page lists contrast on white and opens Fix with fg/bg prefilled — handy when blue-500 text fails on your surface.
When to use contrast Fix
Failing body text on brand colors, Tailwind palette audits, European Accessibility Act–driven UI reviews, or any case where “just darken it” would destroy the hue.
Frequent contrast mistakes
Checking only a button label and not body copy, mixing AA large-text thresholds with normal text, or changing hue to “fix” contrast instead of lightness.
Example pair after Fix
Deep-link and CSS for a fixed pair (replace with your values).
/* /en/contrast?fg=2a2a2a&bg=f6f5f3 */
.text { color: #2a2a2a; }
.surface { background: #f6f5f3; }