Palette Accessibility Checker
Check every color pair in your palette against WCAG contrast guidelines.
Palette
Add up to 10 colors.
Contrast Matrix
AA/AAA results for normal text.
| FG \ BG | 1 | 2 | 3 |
|---|---|---|---|
1 | — | 4.76 AA AAA | 17.4 AA AAA |
2 | 4.76 AA AAA | — | 3.66 AA AAA |
3 | 17.4 AA AAA | 3.66 AA AAA | — |
Failing Pairs
Combinations that do not meet WCAG AA for normal text.
- 3.66Color 2 on 3
- 3.66Color 3 on 2
Examples
Black on white passes AAA
Foreground: #1a1a1a
Background: #ffffffContrast ratio: 16.10
AA: ✓ AAA: ✓Pure black text on pure white exceeds the AAA threshold of 7:1 with significant headroom — the safest possible choice for body text.
Light gray on white fails AA
Foreground: #cccccc
Background: #ffffffContrast ratio: 1.61
AA: ✗ AAA: ✗Light gray on white sits at 1.61:1 — well below the 4.5:1 required for normal text. Use this color only for non-text elements like dividers or disabled icons.
About this tool
The Palette Accessibility Checker evaluates every color pair in your palette against the WCAG 2.x relative-luminance contrast formula and reports AA and AAA results in a matrix. It is the fastest way to find which combinations are safe for body text and which are restricted to large headings, icons, or purely decorative use.
Contrast is computed by converting each hex to linear sRGB (the WCAG-defined relative luminance) and then taking the standard ratio `(L1 + 0.05) / (L2 + 0.05)`. WCAG defines 'normal text' as anything below 24px regular or 18.66px bold; the thresholds are 4.5 for AA on normal text and 7.0 for AAA. This tool evaluates each pair as normal text by default (so the AA/AAA badges match the strictest WCAG criterion). Add at least two colors to see pairwise results.
How to use
Build a palette of 2–10 colors
Start with the default dark / brand / white trio, or click Add Color to add up to 10 swatches. Remove swatches with the trash icon (minimum 2 colors).
Pick each color
Click any swatch to open the Color picker and change its value. The Contrast Matrix updates as you tweak.
Read the matrix
Rows are foregrounds, columns are backgrounds. Each cell shows the contrast ratio plus AA and AAA badges. AA/AAA here apply to normal text — under 24px regular or 18.66px bold.
Identify and fix failing pairs
Any cell whose AA badge is red fails the WCAG 2.x AA threshold for normal text. The 'Failing Pairs' card lists up to 10 of these. Darken the foreground, lighten the background, or pick a different pair until AA passes.
Use cases
Pre-flight check for a design system
Before signing off on a brand palette, plug every text/background combination into this tool to confirm none of the everyday pairs fall below AA for normal text.
Picking accessible button colors
Test your button's foreground, background, hover background, and disabled background to find safe combinations that still feel on-brand.
Auditing a chart's color encoding
For data viz where color is the only differentiator, the matrix tells you which pairs are safe for legend text and label callouts.
Common mistakes
Mistake:Assuming one badge covers every accessibility requirement.
Fix:The matrix evaluates WCAG text contrast for normal text. It does not test color-only meaning, focus indicators, component states, or non-text contrast.
Mistake:Treating AA/AAA badges as applying to all text.
Fix:WCAG 'normal text' means under 24px regular or 18.66px bold. Larger text passes AA at 3.0:1 and AAA at 4.5:1 — so a pair that fails for body text may be fine for 24px headings.
Mistake:Picking a passing pair but losing the brand color.
Fix:AA compliance does not require sticking to a single hex — use a darker brand variant for text and a lighter brand variant for backgrounds, so contrast passes without abandoning the palette.
Frequently asked questions
References & standards
Related tools
Box Shadow Generator
Visual CSS box-shadow generator. Create beautiful shadows with live preview and copy the CSS code.
Color Blindness Simulator
Simulate color blindness on palettes and images. Compare protanopia, deuteranopia, tritanopia, and more side-by-side.
Color Contrast Checker
Advanced WCAG accessibility compliance checker with color blindness simulation, multiple text sizes, and comprehensive analysis features.
Color Converter
Convert colors between multiple formats (HEX, RGB, HSL, HSV, CMYK, LAB) with color blindness simulation, named colors, and batch processing
Color Extractor
Extract colors from uploaded images by hovering over pixels to get precise color values.
Color Generator
Generate color palettes, analyze colors, and create gradients with this comprehensive color tool.