Accessible Color Palette Checker: Test Your Whole Palette for WCAG Compliance

Checking one foreground and one background is a start — but real interfaces use many colors. Headings, body text, buttons, cards, and borders create dozens of possible text-on-background pairs. An accessible color palette checker tests every combination in your palette so you know which pairs pass WCAG and which fail before you ship.

The Tooladex Accessible Color Palette Checker lets you add 2–8 colors, then shows a contrast matrix and summary for all text-on-background pairs. No uploads, no account — everything runs in your browser.

---

Why Check the Whole Palette?

Single pair checkers (like our Color Contrast Checker) are perfect for validating one combination. But design systems and brand palettes have multiple roles:

• Backgrounds — page, cards, sections, inputs
• Text — headings, body, captions, links
• UI — buttons, borders, icons, focus rings

Any of these can sit on top of another. If you only test “primary text on page background,” you might miss that “caption on card background” or “button text on primary” fails. A palette checker tests all pairs so you see the full picture.

---

What the Tool Does

1. Add your colors — Enter 2–8 hex colors (with pickers or typed hex). Add or remove swatches as needed.
2. See the summary — Total combinations, how many pass WCAG AA (normal text), and a list of failing pairs.
3. Use the contrast matrix — A table of every “text color on background color” with ratio and Pass/Fail for AA normal.
4. Copy the report — One click copies colors, summary, and every combination to paste into docs or tickets.
5. Try presets — Quick-load example palettes to see how the matrix and summary work.

All calculations use the same WCAG relative luminance and contrast formula as the single-pair checker. No data is sent to a server.

---

WCAG Levels (Quick Reference)

• AA Normal — 4.5:1 minimum for regular text (under 18pt / 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 / Graphics — 3:1 for components and meaningful graphics.

The palette checker highlights pass/fail for AA normal in the matrix; the full report and summary help you see how many pairs meet each level.

---

When to Use a Palette Checker

• Design systems — Before locking brand or UI colors, verify every intended text/background pair.
• Theme switching — Light/dark or multiple themes: ensure every theme’s palette passes as a set.
• Audits — Quickly list which combinations in an existing palette fail and need adjustment.
• Documentation — Export the report to document approved pairs for your team or clients.

---

Tips for Accessible Palettes

• Include enough spread — Very similar grays or pastels will fail when used as text on each other. Aim for a mix of light and dark so you have valid text/background options.
• Name roles — In docs, label colors by role (e.g. “Page background”, “Primary text”) and use the matrix to confirm each role pair passes.
• Test early — Run the palette checker when choosing or refining colors so you fix contrast before implementation.

---

Try the Accessible Color Palette Checker

The Tooladex Accessible Color Palette Checker gives you:

• Palette summary (total pairs, pass/fail counts)
• Contrast matrix for every text-on-background combination
• Add/remove colors (2–8), with presets to start quickly
• Copy full report for documentation or tickets
• 100% client-side — your colors never leave your device

Use it next to the Color Contrast Checker when you need to validate a single pair, or on its own when you need to validate a full palette.