Brand color & contrast checker: are your colors accessible?
Enter your brand colors to check WCAG contrast ratios, see color blindness simulations, and get specific fix suggestions.
Check your brand colors
Enter your brand colors to check WCAG contrast ratios, see color blindness simulations, and get specific fix suggestions.
We'll check all meaningful color combinations for WCAG AA and AAA compliance.
How the contrast check works
Contrast ratio is calculated using relative luminance values of two colors. The formula produces a ratio from 1:1 (identical colors) to 21:1 (black on white). WCAG AA requires at least 4.5:1 for normal text and 3:1 for large text (18px+ or 14px+ bold).
This tool checks all meaningful combinations of your brand colors - text on background, primary on background, white on primary, and more - giving you a complete picture of your palette's accessibility.
WCAG compliance levels
| Level | Normal text | Large text | When to use |
|---|---|---|---|
| AA | 4.5:1 | 3:1 | Minimum standard - required by most accessibility laws |
| AAA | 7:1 | 4.5:1 | Enhanced - recommended for body text and critical content |
Color blindness and your brand
About 8% of men and 0.5% of women have some form of color vision deficiency. The most common types are protanopia (red-blind) and deuteranopia (green-blind), which together affect roughly 1 in 12 men. This tool simulates how your brand colors appear to people with these conditions.
The key principle: never rely on color alone to convey information. Use shape, text, icons, or patterns alongside color to ensure everyone can understand your content.
Common brand color mistakes
Light gray text on white
The most common fail. Light gray (#999) on white (#FFF) has only a 2.85:1 ratio - well below the 4.5:1 minimum. Darken to at least #767676.
White text on bright colors
Bright yellows, oranges, and light greens often fail when paired with white text. Use dark text instead, or darken the background color.
Red and green together
Red-green is the most common color blindness. Using red for errors and green for success without additional indicators (icons, text) excludes 8% of male users.
Placeholder text too light
Form placeholder text is often extremely low contrast. While placeholders aren't required to meet 4.5:1, they should still be readable at 3:1 minimum.
Frequently asked questions
- What is WCAG color contrast?
- WCAG requires minimum contrast ratios between text and background colors. AA level requires 4.5:1 for normal text and 3:1 for large text (18px+ or 14px+ bold).
- What's the difference between AA and AAA?
- AA is the standard most accessibility laws reference, requiring 4.5:1 for normal text. AAA is stricter at 7:1 and is recommended for critical content like body text and navigation.
- Why does color accessibility matter?
- About 8% of men and 0.5% of women have some form of color vision deficiency. Low contrast also affects everyone in bright sunlight or on low-quality screens. Accessible colors improve usability for all users.
- How do I fix failing contrast?
- Usually darken the text color or lighten the background. Small adjustments of 10-20% darker or lighter often fix the issue without changing the brand feel. This tool shows exactly what adjustments to make.
- Can I have a beautiful brand AND pass accessibility?
- Absolutely. Most brand palettes need only minor tweaks to pass WCAG AA. The tool shows exactly what adjustments to make so your brand stays recognizable while being accessible to everyone.
Ready to ship your next product?
Tell us what you're building. Senior engineers will scope, plan, and start delivering your product with production-ready architecture - fast.