Brand Color Accessibility Checker
Check contrast across your brand palette and pick combinations that pass WCAG in real product UI.
Free Tool Design System
Tools OverviewBrand Color Accessibility Checker
Check WCAG contrast across your palette and find safe UI color pairs fast.
Catalog Context Part of Design System
See how this tool connects to category hubs, workflow paths, starter kits, and adjacent next steps.
Starter Kits Including This Tool
Next Move - Solid resultPositioning
Recommended: Value Prop Clarity Scorecard
Visual contrast is solid. Improve message clarity to match visual quality.
Single Pair Checker
Test one foreground/background pairing for text readability.
Contrast Preview
Use this as a quick sanity check for headings, labels, and body copy.
Contrast Ratio
17.74:1
WCAG Grade
AAAAA Small Text
PassExcellent contrast. Safe for body text and UI labels.
Palette Sweep
Add up to 8 colors. The checker ranks the strongest text/background pairs.
5 colors · paste comma-separated hex to add multiple
Palette Summary
20 checked pairs
40% AA pass rate| Rank | Pair | Ratio | Grade | AA Small Text | Preview | Action |
|---|---|---|---|---|---|---|
| Best | #111827 on #FFFFFF | 17.74:1 | AAA | Pass | Aa Preview | |
| Strong | #FFFFFF on #111827 | 17.74:1 | AAA | Pass | Aa Preview | |
| Good | #111827 on #F59E0B | 8.26:1 | AAA | Pass | Aa Preview | |
| Valid | #F59E0B on #111827 | 8.26:1 | AAA | Pass | Aa Preview | |
| Valid | #111827 on #14B8A6 | 7.13:1 | AAA | Pass | Aa Preview | |
| Valid | #14B8A6 on #111827 | 7.13:1 | AAA | Pass | Aa Preview | |
| Valid | #111827 on #3B82F6 | 4.82:1 | AA | Pass | Aa Preview | |
| Valid | #3B82F6 on #111827 | 4.82:1 | AA | Pass | Aa Preview |