WCAG Palette Auditor
Audit an entire color palette for WCAG accessibility at once: full pairwise contrast matrix, AA/AAA pass-fail badges, accessible-fix suggestions, and colorblind simulation.
How to use this tool
- Paste your palette as hex codes (one per line or comma-separated), or upload an image to extract colors.
- Read the matrix: each cell shows the contrast ratio and AA/AAA pass-fail badges for normal and large text.
- For any failing pair, use the suggested adjusted hex that reaches the AA 4.5:1 threshold.
- Toggle the colorblind simulation to check the palette for color-vision deficiency.
- Copy the URL to share the audited palette with your team.
Standard contrast checkers test one foreground/background pair at a time. The WCAG Palette Auditor audits your entire palette in one pass: it builds the full pairwise contrast matrix, so you instantly see which color combinations are safe to use together and which ones fail.
Every cell shows the WCAG 2.x contrast ratio with PASS/FAIL badges for AA and AAA normal text and AA large text. For each failing pair it suggests the nearest accessible adjustment — darkening or lightening the foreground just enough to pass 4.5:1. A built-in colorblind simulation (protanopia, deuteranopia, tritanopia) re-renders the swatches so you can sanity-check the palette for the ~8% of users with color vision deficiency.
Paste hex codes to audit instantly (works offline, nothing is uploaded), or drop in an image to auto-extract its dominant palette. Your palette is saved in the URL for easy sharing with your team. Built for designers, front-end developers, and accessibility specialists.
How it works
The WCAG Palette Auditor checks every color pair in a design palette against the Web Content Accessibility Guidelines contrast requirements. Enter your palette colors as hex codes and the tool generates a full pairwise contrast matrix showing the ratio for every foreground-background combination.
Each cell is labeled with a pass/fail badge for both the AA level (4.5:1 for normal text, 3:1 for large text) and the stricter AAA level (7:1). Cells that fail include a suggested alternative color that passes while staying close to the original hue.
A colorblind simulation panel previews how the palette appears under deuteranopia, protanopia, and tritanopia, helping you identify problem pairs that may look fine to most users but be indistinguishable to others.
Worked example
Audit a brand palette of four colors
- Enter your four hex codes: #FFFFFF, #003366, #FF6600, #CCCCCC.
- The matrix generates 12 pairwise combinations.
- Identify failing cells — orange (#FF6600) on white (#FFFFFF) fails AA at 2.9:1.
- Apply the suggested fix: darken the orange to #CC5200 for a 4.6:1 ratio.
- Re-run to confirm the updated palette passes.
All critical text combinations pass AA; the one failing pair has a clear fix applied.
Common mistakes to avoid
- Testing only primary brand colors and forgetting hover states, disabled states, and placeholder text, which often fail contrast requirements.
- Assuming a color pair that passes for large text automatically passes for body text — the ratio requirements are stricter for smaller type.
- Making the suggested fix color slightly too dark, which may clash with other palette members; check the full matrix after each change.
Key terms
- Contrast ratio
- A number from 1:1 (no contrast) to 21:1 (black on white) measuring the luminance difference between two colors.
- WCAG AA
- The standard accessibility threshold: 4.5:1 for normal text and 3:1 for large text (18pt or 14pt bold).
- Deuteranopia
- The most common form of color blindness, affecting red-green distinction; approximately 6% of males are affected.
Frequently asked questions
- How is the contrast ratio calculated?
- Using the official WCAG 2.x formula: (L1 + 0.05) / (L2 + 0.05), where L is the relative luminance of each color computed from its linearized sRGB channels. AA requires 4.5:1 for normal text and 3:1 for large text; AAA requires 7:1.
- Are my colors or images uploaded anywhere?
- No. Everything runs in your browser. Image palette extraction uses an in-page canvas and never sends the file to a server.
- How accurate is the colorblind simulation?
- It uses standard linear approximations of how protanopia, deuteranopia, and tritanopia shift color perception. It is a useful design check, not a clinical diagnosis.