Contrast Checker
Check WCAG 2.1 ratio and modern APCA Lc (WCAG 3 draft) for a foreground/background pair, or switch to Palette mode to get a full contrast matrix between every color in your palette. Simulate four types of color blindness, apply auto-suggested fixes, and export the palette as CSS variables or JSON.
Pick a weight (300/400/500/600/700) and set the body to at least the size shown. Italics need +1 weight step.
Colors are processed entirely in your browser. Nothing is sent to a server.
How to use this contrast checker
- Pair check: pick a foreground (text) and background and read the WCAG ratio + APCA Lc with pass/fail badges.
- Palette mode: add colors (or load a preset) to get a full contrast matrix between every pair.
- Toggle vision simulation (protanopia, deuteranopia, tritanopia, achromatopsia) to test for color blindness.
- If a check fails, click an auto-suggested fix to apply the nearest passing color.
- Export the palette as CSS variables or JSON, or send the current pair into the matrix.
Frequently asked questions
What is APCA and how is it different from WCAG 2.1?
APCA (Advanced Perceptual Contrast Algorithm) is a perceptually-uniform contrast model proposed for WCAG 3. It models text legibility better than the older 4.5:1 ratio — Lc 75 is the body-text minimum, Lc 90+ is best.
What WCAG 2.1 levels does the AA/AAA grade test?
AA requires 4.5:1 for normal text, 3:1 for large text (≥18 pt or 14 pt bold) and UI components. AAA raises normal text to 7:1 and large text to 4.5:1.
How does the palette matrix work?
Every color is checked against every other as both text and background. The number is the WCAG ratio; the badge shows AA/AAA/large/fail. Hover for the APCA Lc value.
How does the auto-fix work?
It walks the lightness of your color up and down in HSL, keeping hue and saturation, and stops at the first lightness that meets the ratio target. The closer one wins.
Are the color blindness simulations exact?
They are common matrix-based approximations. Useful as a sanity check, but real users see colors differently — when in doubt, prefer high contrast.
Is anything uploaded?
No. All checks run in your browser.