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.
Related tools
Related free tools
Keep going with these tools
CSS Gradient Generator
Linear, radial & conic gradients
Color Palette Generator
Build a palette from any image
Favicon & App Icon Generator
ICO, PNG, Apple touch & PWA icons
QR Code Generator
Free static QR codes, no expiry
Email Signature Generator
Professional HTML signatures, free
Dental Website Grader
Score your practice website in 2 minutes
Want a team to handle it for you? We design and build fast, SEO-ready websites that convert. Explore AI web development.
Related guides
Go deeper with our guides
Practical, up-to-date guides on the strategy, costs, and execution behind this tool.
UX Design Principles for Small Business Websites
UX principles that drive revenue: navigation, forms, mobile patterns, accessibility, and a full audit checklist.
Responsive Web Design for Small Businesses: Mobile-First in 2026
Why mobile-first responsive design is critical in 2026, how to test your site, and the principles that drive conversions.
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.