Which WCAG threshold should I aim for?

AA (4.5:1 for body text, 3:1 for large text) is the legal minimum in most jurisdictions. AAA (7:1 and 4.5:1) is the recommended aim for accessibility-led brands. The matrix lets you see at a glance how many AA pairs you have.

What's a 'safe' palette size?

Even 4–5 well-chosen colors give 16–25 combinations. A palette is healthy if 30–50% of pairs are AA-safe — that gives designers freedom without forcing them into accessibility violations.

What about non-text contrast (icons, borders)?

WCAG 2.1 specifies 3:1 for UI components and meaningful graphics. The matrix shows that threshold too — non-text cells are AA-safe at a lower ratio than body text.

wcag · matrix · n×n · palette tester · live

Test every pair in a palette for WCAG

Paste a palette and see which combinations pass AA Normal (4.5:1), AA Large (3:1), or fail. N × N matrix preview.

WCAG Color Pair Tester

Colors

palette

Pairs

n × (n−1)

AA Normal

≥ 4.5:1

Fail

< 3:1

input · color

Palette (one HEX per line)

Legend

AA Normal (≥4.5:1)

AA Large only (≥3:1)

Fail (<3:1)

output · preview

#3b82f6	#22c55e	#ef4444	#ffffff	#0f172a
1.0	1.6	1.0	3.7	4.9
1.6	1.0	1.7	2.3	7.8
1.0	1.7	1.0	3.8	4.7
3.7	2.3	3.8	1.0	17.9
4.9	7.8	4.7	17.9	1.0

Quick Start

How to test a palette for WCAG

Paste each HEX on its own line; we render an N × N contrast matrix showing every pair.

01
Paste your palette
One HEX per line, 2 to 12 colors recommended.
Colors round-trip through a normalised OKLCH representation, so manipulations (lighten, mix, contrast) preserve perceptual uniformity per CSS Color 4.
inputOKLCHCSS Color 4perceptuallive
colors · colorlist · sRGB
```
#3b82f6
#22c55e
…
```
loaded · normalisedOKLCH · ready
02
Read the matrix
Row = bg, col = fg. Cell shows the ratio; border color shows pass/fail.
Format conversion handles hex, rgb(), hsl(), oklch(), color(display-p3 …) with proper gamut mapping when crossing colour spaces.
matrixhex · rgb · hslP3gamut-mappedlive
n×n · optionsmatrix · live
```
4.5 / 7.0 / 3.0
```
options applied · livelive
03
Spot weak pairs
Red borders = avoid for body text. Yellow = large-only.
Contrast and accessibility checks evaluate against WCAG 2.2 AA (4.5:1) and AAA (7:1) thresholds; APCA is offered when contrast is the goal.
auditWCAG 2.2APCAAA · AAAcontrast
audit · convertedfix · ready
```
avoid red pairs
```
converted · liveWCAG-aware
04
Iterate
Adjust colors and re-test. Combine with the suggester to fix one pair.
Copy formats any swatch in the chosen syntax (#aabbcc, rgb(170 187 204), etc.); downloads emit CSS variable blocks or palette JSON.
iterclipboardCSS varspalette JSONblob
ok · copiedready · done
```
✓ palette passes
```
shipped · ready to shipsuccess

Pro tips

Colour work that survives accessibility audits

Use OKLCH for manipulation

OKLCH is perceptually uniform — lightness changes look uniform. hsl() isn’t, and produces muddy mid-tones.

Test against WCAG 2.2

4.5:1 for normal text (AA), 7:1 for AAA. Use Contrast Checker before shipping.

Mind gamut clipping

P3 colours that exceed sRGB get clipped on standard displays. Choose relative colorimetric in CSS Color 4.

Colour blindness affects 8%

Use the Color Blindness simulator to check critical UI before launch.

Don’t hardcode hex

Use CSS variables. Light/dark themes become trivial when colours are tokenised.

Dark mode isn’t inverted

Don’t simply invert lightness — desaturate slightly and re-pick accents. Pure-inverted UIs look harsh.

Use Cases

When to test a palette

Design system audits, brand reviews, theme matrices.

System audit

Spot all weak text/bg combinations across your palette. Conversions go through OKLCH so perceptual lightness stays uniform across hues — a 50% L blue looks as bright as a 50% L yellow. HSL fakes this and produces muddy mid-tones, OKLCH solves it per CSS Color 4.

WCAG 2.2 AA

Light + dark theme

Verify text remains legible across both surfaces. WCAG 2.2 contrast is sampled live for AA (4.5:1) and AAA (7:1) — flip foreground/background to test both directions. APCA is offered when contrast itself is the goal (e.g., dataviz).

P3-aware

Brand handoff

Show clients which combos are safe before shipping. Output covers hex, rgb(), hsl(), oklch(), and color(display-p3 …) for CSS Color 4. Drop straight into Tailwind config, CSS custom properties, or Figma without re-typing values.

perceptually-uniform

Design tokens

Decide which tokens are safe to combine. Pair with the Contrast Checker before shipping any new theme. Catches accessibility regressions before they become bugs filed against you by users with low vision.

gamut-safe

Code review

Quick reference during PR review for color tokens. Tokens drop straight into Figma variables, Tailwind config, or CSS custom properties. Theme switching becomes a single variable swap rather than a search-replace across stylesheets.

a11y-ready

Cross-tool

Document the matrix in your design system docs. Gamut-aware: tools warn before you ship a P3 colour that clips on sRGB displays. Choose the appropriate fallback strategy (relative colorimetric vs perceptual) per CSS Color 4 spec.

design-token

FAQ

Frequently asked questions

Why both 3:1 and 4.5:1?

4.5:1 is WCAG AA for body text; 3:1 is AA for large text (18pt+ or 14pt+ bold).

What about 7:1?

AAA for body text. Aim for it when serving users with low vision.

How does it handle alpha?

Currently it treats colors as opaque. For alpha-aware testing, composite first.

Is the diagonal meaningful?

No — same color on same color always has ratio 1. We hide those for clarity.

Is anything sent to a server?

No — all math runs entirely in your browser.

Suggest a tool

Something missing?

Tell us what you need. We ship the top requests every two weeks.

47 in queue·8 shipped this month

Request queued. Thanks!