How to Check WCAG Contrast on a Color Palette

WCAG 2.1 contrast is non-negotiable for accessible design. The trap is checking only the brand color against white - you need the full matrix. Here is how to do it without tooling drift.

Time: 2 minutes
You need: A palette in HEX, RGB, OKLCH, or named-color form

Open the Contrast Checker matrix view
The matrix view grades every foreground color against every background color in a single grid. This is the only sane way to audit a palette holistically - single-pair checks miss combinations a designer will reach for later.
Open /contrast →
Paste the full palette
Paste your palette as comma-separated HEX or one-per-line. The matrix re-renders in under 150ms. Body text needs 4.5:1, large text and graphics need 3:1, AAA needs 7:1.
Read the APCA Lc as a sanity check
WCAG 2.1 treats white-on-black and black-on-white identically; APCA does not. Use the Lc reading to spot pairs that "pass" WCAG but read poorly in practice (typically thin weights at the threshold).
Fix failing pairs automatically
If any pair fails, send it to Fix A11y. The tool returns the nearest passing color in OKLCH - same hue, just enough lightness change to clear the threshold.
Open /fix-a11y →

More how-to guides

How to Extract a Color Palette From an Image

Pull a usable, accessible color palette from any photo in under a minute. K-means clustering in OKLCH, mood presets, and a contrast sanity check.

How to Build a Design Token Palette From One Brand Color

Turn a single HEX into a 12-step OKLCH ramp, semantic tokens, dark-mode mirror, and W3C DTCG export - in under ten minutes, free.

How to Simulate Color Blindness on a Design

Run any palette or screenshot through deuteranopia, protanopia, and tritanopia simulations to catch CVD-unsafe color choices before users do.

How to Check WCAG Contrast on a Color Palette

WCAG 2.1 contrast is non-negotiable for accessible design. The trap is checking only the brand color against white - you need the full matrix. Here is how to do it without tooling drift.

Time: 2 minutes
You need: A palette in HEX, RGB, OKLCH, or named-color form

Open the Contrast Checker matrix view
The matrix view grades every foreground color against every background color in a single grid. This is the only sane way to audit a palette holistically - single-pair checks miss combinations a designer will reach for later.
Open /contrast →
Paste the full palette
Paste your palette as comma-separated HEX or one-per-line. The matrix re-renders in under 150ms. Body text needs 4.5:1, large text and graphics need 3:1, AAA needs 7:1.
Read the APCA Lc as a sanity check
WCAG 2.1 treats white-on-black and black-on-white identically; APCA does not. Use the Lc reading to spot pairs that "pass" WCAG but read poorly in practice (typically thin weights at the threshold).
Fix failing pairs automatically
If any pair fails, send it to Fix A11y. The tool returns the nearest passing color in OKLCH - same hue, just enough lightness change to clear the threshold.
Open /fix-a11y →