Contrast checker for whole palettes
Hueproof tests each text and background in your palette against WCAG AA and AAA, finds the nearest shade that passes, and hands you the CSS.
Free, Runs in your browser, No account, Nothing leaves your device
| Text colour, down; background, across | Paper#fafaf7 | Ink#1b1f3b | Brand#4f46e5 | Accent#f59e0b | Muted#6b7280 |
|---|---|---|---|---|---|
| Paper#fafaf7 | Paper on Paper, same colour |
Paper on Ink, 15.37 to 1, AAA |
Paper on Brand, 6.01 to 1, AA |
Paper on Accent, 2.05 to 1, Fail |
Paper on Muted, 4.62 to 1, AA |
| Ink#1b1f3b | Ink on Paper, 15.37 to 1, AAA |
Ink on Ink, same colour |
Ink on Brand, 2.55 to 1, Fail |
Ink on Accent, 7.48 to 1, AAA |
Ink on Muted, 3.32 to 1, AA Large |
| Brand#4f46e5 | Brand on Paper, 6.01 to 1, AA |
Brand on Ink, 2.55 to 1, Fail |
Brand on Brand, same colour |
Brand on Accent, 2.92 to 1, Fail |
Brand on Muted, 1.30 to 1, Fail |
| Accent#f59e0b |
Accent on Paper, 2.05 to 1, Fail
|
Accent on Ink, 7.48 to 1, AAA |
Accent on Brand, 2.92 to 1, Fail |
Accent on Accent, same colour |
Accent on Muted, 2.25 to 1, Fail |
| Muted#6b7280 | Muted on Paper, 4.62 to 1, AA |
Muted on Ink, 3.32 to 1, AA Large |
Muted on Brand, 1.30 to 1, Fail |
Muted on Accent, 2.25 to 1, Fail |
Muted on Muted, same colour |
Fix: #f59e0b → #a16707, 4.50:1, AA
How it works
Build the palette, read the matrix, take the CSS. Your work is saved in this browser, so it is still there tomorrow.
Add up to twelve colours by hex or with the colour picker. Type fff, #FFF or #ffffff; they all mean the same. Name each one and mark it for text, background or both.
Example palette: Ink #1b1f3b, marked text and background; Brand #4f46e5; Accent #f59e0b.
The matrix puts every text colour on every background, with the ratio and its grade in words: AAA, AA, AA Large or Fail. A shown 4.50 always passes, because ratios are cut, not rounded.
Ink on Paper, 15.37 to 1, AAA. Ink on Ink, same colour. Muted on Paper, 4.62 to 1, AA. Muted on Ink, 3.32 to 1, AA Large.
Copy or download one :root block of custom properties, named after your colours. Duplicate names still get unique variables.
:root {
--color-ink: #1b1f3b;
--color-paper: #fafaf7;
…What it does
Pick a failing pair and Hueproof searches the colour's lightness in 0.1-point steps, darker and lighter, until it finds the closest shade that meets your target: AA, AAA or AA Large. Hue and saturation stay put, so the fix still looks like your brand. Choose which colour to adjust, then apply it to the whole palette in one click.
Accent's lightness from 0 to 100. Lightness 0 to 32.9 passes 4.5 to 1 on Paper; above that it fails. The original #f59e0b sits at lightness 50.2 with 2.05 to 1, Fail. The fix #a16707 sits at lightness 32.9 with 4.50 to 1, AA.
Every cell says AAA, AA, AA Large or Fail. The four checks for a pair are spelled out: AA normal 4.5:1, AA large 3:1, AAA normal 7:1, AAA large 4.5:1.
Select a pair to see a sentence at 16 px and at 24 px. Large text means 24 px regular or 18.66 px bold, and Hueproof says so.
Sample text in Muted #6b7280 on Paper #fafaf7 at 16 and 24 pixels.
The matrix is one tab stop. Arrow keys move the way they point; Home, End and Ctrl+Home jump. Focus never gets lost after an edit or a delete.
←↑↓→HomeEnd
No account and no server. The palette lives in your browser's storage and follows your light or dark setting. Works on a phone at 360 px.
Try it here
It starts with a five-colour palette so there is something to check. Select a failing pair to see the fix.
Changes you make here are saved in this browser, the same as in the full app. Open it full screen →
Free, in your browser, and finished in the time it takes to paste your hex values.
Open Hueproof