Accessible Palette Checker and Contrast Fixer
WCAG contrast grid for a whole palette, with a minimal-change lightness fixer.
| Text colour | #ffffff | #0f172a | #3b82f6 | #94a3b8 | #f59e0b |
|---|---|---|---|---|---|
| #ffffff | |||||
| #0f172a | |||||
| #3b82f6 | |||||
| #94a3b8 | |||||
| #f59e0b |
Fix contrast
0 pairs selected
Use via API
Adjust the lightness of palette colours as little as possible (in OKLCH, hue kept) until chosen foreground/background pairs meet a WCAG contrast target. Send JSON, get JSON back.
POST https://pithlab.com/api/v1/tools/palette-contrast-fixer
curl https://pithlab.com/api/v1/tools/palette-contrast-fixer \
-H "Authorization: Bearer $PITHLAB_KEY" \
-H "Content-Type: application/json" \
-d '{"colors":"#777777, #ffffff, #f1f5f9","pairs":"1-2, 1-3","adjustable":"1","target":"aa"}'About the Accessible Palette Checker
Check every text and background pair in your palette against WCAG AA and AAA, then fix failing pairs by nudging OKLCH lightness as little as possible.
How to use the Accessible Palette Checker
- Enter 2 to 10 colours, one per line or separated by spaces. Hex, rgb(), hsl(), oklch() and CSS names all work.
- Read the grid: each cell shows text in the row colour on the column colour, with its contrast ratio and AAA, AA, AA Large or Fail badge.
- Click the failing cells you need to pass, choose the target level and tick which colours may change. Lock brand colours you can't touch.
- Press Fix selected pairs to see the before and after, then copy the fixed palette or apply it to the grid.
Examples
Input
#777777, #ffffff; fix 1 on 2 for AA
Output
#777777 → #767676 (4.54:1)
Input
#3b82f6, #ffffff; fix 1 on 2 for AA
Output
#3b82f6 → #2b72e5 (4.52:1)
Input
#3b82f6, #ffffff; fix 1 on 2 for AAA
Output
#3b82f6 → #0352c2 (7.02:1)
Frequently asked questions
Why change OKLCH lightness rather than HSL?
Contrast depends almost entirely on luminance, and OKLCH lightness tracks perceived brightness while keeping the hue steady. Moving it along that axis fixes contrast with the smallest visible change; HSL lightness shifts perceived hue and saturation unevenly.
Why does a pair still fail after fixing?
Some targets are impossible. A colour cannot reach 7:1 against both white and black, because the best any colour can manage against both at once is about 4.58:1. Unlock the other colour in the pair, choose a lower target, or split the colour into a light and a dark variant.
Why are ratios rounded down?
WCAG thresholds are strict: 4.499:1 fails AA. The grid truncates ratios to two decimals so a failing pair can never be displayed as 4.50:1.
What do the badges mean?
AAA is 7:1 or more, AA is 4.5:1 or more, and AA Large is 3:1 to 4.5:1, which passes only for large text (24px, or 18.66px bold) and for UI components like icons and input borders. Fail is below 3:1.