WCAG-AA Palette Filter
List every pair from your palette that meets a contrast threshold.
Overview
The WCAG-AA Palette Filter takes a list of hex colours and reports every pair that meets a chosen WCAG 2.1 contrast threshold — by default 4.5:1 for body text and 3:1 for large text. The output is a grid of viable foreground/background combinations along with the ratio for each, ready to bring straight into a styleguide.
It is essential when auditing a colour token system, picking accessible text-on-background pairs for a marketing site, or pruning a palette down to the combinations a brand can actually use without failing accessibility review. Engineers use it during palette refactors to spot the pairs that need a new neutral or accent.
How it works
Each colour in the palette is converted to relative luminance using the WCAG 2.1 formula: gamma-decode each channel and apply 0.2126R + 0.7152G + 0.0722B. Every ordered pair (A, B) where A is foreground and B is background is evaluated, computing the contrast ratio as (L_brighter + 0.05) / (L_darker + 0.05).
Pairs that meet the chosen threshold are shown. The tool also lets you toggle between the AA thresholds (4.5 and 3), the AAA thresholds (7 and 4.5), and the 3:1 UI-component minimum, so you can audit body text, large text and non-text elements (focus rings, icons, borders) separately.
Examples
palette: #1a1a1a #555555 #999999 #f5f5f5 #ffffff
AA body (≥4.5):
#1a1a1a / #ffffff → 19.3
#1a1a1a / #f5f5f5 → 17.3
#555555 / #ffffff → 7.5
#ffffff / #1a1a1a → 19.3
... 14 pairs total
FAQ
Why are some pairs listed twice (A on B and B on A)?
The contrast ratio is symmetric numerically, but the foreground/background roles matter for design — dark-on-light and light-on-dark are different aesthetic choices. The filter shows both orderings.
Should I use the AA or AAA threshold?
AA (4.5:1 body, 3:1 large) is the standard for most accessibility audits and legal compliance. AAA tightens to 7:1 and 4.5:1 and is recommended for long-form text or critical interfaces.
What about non-text elements?
Use the 3:1 threshold for UI components, focus indicators and icons. The filter has a dedicated mode for this so you can audit icons against their adjacent surface.
Can I exclude pairs with very high contrast?
Yes — pure black on white passes every threshold but is rarely the right design choice. Add a maximum ratio to the filter to surface usable mid-contrast combinations.
Does this replace per-component testing?
No. Real text sits on hover states, gradients, images and overlays. The filter is a fast first pass; specific surfaces still need testing in context.