Color Palette Contrast Checker

Compare every pair in a color palette against WCAG text contrast thresholds.

Preparing tool…

Try a worked example

Compare every pair in a color palette against WCAG text contrast thresholds.

Check the units and options, then use the tool’s calculation button. The example is fictitious; replace its values for your own calculation.

Example input

Palette colors (one HEX color per line): #000000 #ffffff #2563eb

Expected output

| Color 1 · #000000 | Color 2 · #ffffff | Color 3 · #2563eb
Color 1 · #000000 | — | 21.00:1 · AA normal ✓ · AAA normal ✓ · AA large ✓ · AAA large ✓ | 4.06:1 · AA normal × · AAA normal × · AA large ✓ · AAA large ×
Color 2 · #ffffff | 21.00:1 · AA normal ✓ · AAA normal ✓ · AA large ✓ · AAA large ✓ | — | 5.17:1 · AA normal ✓ · AAA normal × · AA large ✓ · AAA large ✓
Color 3 · #2563eb | 4.06:1 · AA normal × · AAA normal × · AA large ✓ · AAA large × | 5.17:1 · AA normal ✓ · AAA normal × · AA large ✓ · AAA large ✓ | —

Compare every pair in a palette of opaque HEX colors and show its WCAG AA and AAA contrast results for normal and large text.

Waiting for the tool. The explanation remains available without JavaScript.

Method and limits

Enter one opaque HEX color per line. The matrix compares every color pair. Each cell reports the ratio and whether it reaches WCAG AA (4.5:1) or AAA (7:1) for normal text; large-text thresholds are 3:1 and 4.5:1 respectively. Diagonal cells compare a color with itself.

Enter 2–20 opaque 3- or 6-digit HEX colors. This is a text-contrast calculation only; it does not assess font size, UI components, images, or overall accessibility.

✓ Local processing✓ No account✓ Inputs processed here✓ Free

Quick answer

Compare every pair in a palette of opaque HEX colors and show its WCAG AA and AAA contrast results for normal and large text.

The page and its assets load from the site; this operation uses your entered values only in this browser and does not send them to a calculation endpoint.

How to use it

Limits

Enter 2–20 opaque 3- or 6-digit HEX colors. This is a text-contrast calculation only; it does not assess font size, UI components, images, or overall accessibility.

Frequently asked questions

What does a contrast ratio mean?

It compares the relative luminance of two colors. A higher ratio improves text contrast but does not by itself establish that a page is accessible.

Does the tool detect large text?

No. It reports AA and AAA thresholds for both normal and large text. Use the large-text results only when your font size and weight meet the WCAG definition of large text.

Sources and references

These references document the cited standard or browser API; they do not validate the tool’s output.