Accessible Color Palette Checker
Check your entire color palette for WCAG accessibility. Add 2–8 colors and see contrast ratios for every text-on-background combination. All processing runs in your browser.
Palette Summary
6 combination(s) fail AA for normal text:
- #1A1A2E on #2563EB (3.30:1)
- #2563EB on #1A1A2E (3.30:1)
- #2563EB on #EAEAEA (4.30:1)
- #EAEAEA on #2563EB (4.30:1)
- #EAEAEA on #FFFFFF (1.20:1)
- #FFFFFF on #EAEAEA (1.20:1)
Your palette
Add or remove colors (2–8). Each color can be used as text or background; we check every pair.
Contrast matrix
Each cell is “text color on background color”: ratio and WCAG AA (normal) pass/fail.
| Text ↓ \ Back → | 1A1A2E | 2563EB | EAEAEA | FFFFFF |
|---|---|---|---|---|
1A1A2E | — | 3.30 Fail | 14.18 Pass | 17.06 Pass |
2563EB | 3.30 Fail | — | 4.30 Fail | 5.17 Pass |
EAEAEA | 14.18 Pass | 4.30 Fail | — | 1.20 Fail |
FFFFFF | 17.06 Pass | 5.17 Pass | 1.20 Fail | — |
Preset palettes
WCAG reference
Table of Contents
What is palette accessibility?
Palette accessibility means that every way you combine colors from your set — text on background, borders on surfaces, buttons on cards — meets contrast requirements so that content is readable and UI elements are distinguishable for all users, including people with low vision or color vision differences.
Checking a single pair (e.g. body text on page background) isn’t enough. Headings, captions, buttons, links, and borders create many possible pairs. An accessible palette is one where the combinations you actually use (or might use) pass WCAG contrast rules.
Why check the whole palette?
Design systems and brand palettes have multiple roles: backgrounds (page, cards, sections), text (headings, body, captions), and UI (buttons, borders, icons). Any of these can sit on top of another. If you only test “primary text on page background,” you can miss failing pairs like “caption on card background” or “button text on primary.”
A palette checker tests every text-on-background combination so you see the full picture: which pairs pass, which fail, and how many combinations meet AA or AAA. That makes it easier to fix problem pairs or document approved combinations for your team.
How the tool works
Add 2–8 colors using the color picker or hex input. The tool builds every ordered text-on-background pair (e.g. color A as text on color B, and B on A) and calculates the contrast ratio using the same WCAG formula as our Color Contrast Checker.
- Summary — Total combinations, how many pass AA (normal) and AAA (normal), and a list of failing pairs.
- Contrast matrix — A table with each cell showing the ratio and Pass/Fail for WCAG AA normal text (4.5:1).
- Copy report — One click copies your palette, summary, and every combination to paste into docs or tickets.
All calculations run in your browser; no color data is sent to a server.
When to use it
- Design systems — Before locking brand or UI colors, verify every intended text/background pair.
- Theme switching — For light/dark or multiple themes, ensure each theme’s palette passes as a set.
- Audits — Quickly see which combinations in an existing palette fail and need adjustment.
- Documentation — Export the report to document approved pairs for your team or clients.
WCAG contrast levels
The Web Content Accessibility Guidelines (WCAG) define minimum contrast ratios for text and UI:
- AA Normal — 4.5:1 minimum for regular text (under 18pt or 14pt bold). This is the usual target for body text.
- AAA Normal — 7:1 for enhanced contrast.
- AA Large — 3:1 for large text (18pt+ or 14pt+ bold).
- UI components and graphics — 3:1 minimum for icons, borders, form controls, and meaningful graphics.
The matrix on this tool shows pass/fail for AA normal. The summary and report include counts for AA and AAA so you can see how many pairs meet each level.
Frequently asked questions
The Color Contrast Checker tests one foreground and one background at a time — ideal for validating a single combination or trying alternatives. The Accessible Color Palette Checker tests every pair in a set of 2–8 colors at once, so you can see which combinations in your full palette pass or fail and copy a full report.
If a color isn’t a valid 3- or 6-digit hex (e.g. you’re still typing or left a value blank), the tool can’t compute contrast for pairs that use it. Fix or remove the invalid color and those cells will show the ratio and Pass/Fail instead.
You can add between 2 and 8 colors. With 2 colors you get 2 combinations (A on B, B on A). With 8 colors you get 56 combinations. Keeping the palette to the colors you actually use for text and backgrounds keeps the matrix manageable and the report focused.
No. All contrast calculations use the same WCAG formula and run entirely in your browser. Your colors never leave your device.
If many combinations fail, your palette may have too many similar shades (e.g. light grays on slightly different light grays). Add more contrast: include clearly lighter and darker colors so you have valid text/background options. Use the Color Contrast Checker to test single pairs and get improvement suggestions.
Yes. You can enter 6-digit hex (e.g. #1A1A2E) or 3-digit shorthand (e.g. #FFF). The tool expands 3-digit codes to 6-digit internally and uses them in the matrix and report.