WCAG Brand Color Contrast Checker
Add your brand colors and check every combination for WCAG AA and AAA contrast in a single view. Toggle dark mode to test against dark surfaces, or generate neutral tones to supplement a palette that only has accent colors.
Your Colors
None of your color combinations pass AA. Consider adding neutral tones or dark backgrounds.
None of your color combinations pass AAA. Consider adjusting colors for higher contrast.
Add at least two colors to see contrast combinations.
Frequently Asked Questions
What is a WCAG contrast ratio?
WCAG (Web Content Accessibility Guidelines) specifies a formula for contrast ratio between two colors based on their relative luminance. The ratio ranges from 1:1 (same color) to 21:1 (black on white). Higher ratios mean higher contrast and better readability. The formula is defined in WCAG 2.1 Success Criterion 1.4.3.
What is the difference between AA and AAA?
AA is the minimum conformance level for text contrast that most accessibility laws and procurement requirements reference. AAA is the enhanced level and is significantly stricter. For normal-sized text (below 18pt), AA requires 4.5:1 and AAA requires 7:1. For large text (18pt or larger, or 14pt bold), AA requires 3:1 and AAA requires 4.5:1. Most projects target AA; AAA for all text is often impractical with branded colors.
What counts as large text for WCAG purposes?
Large text is defined as 18pt (24px) or larger for regular weight, or 14pt (approximately 18.67px) or larger for bold weight. The WCAG thresholds for large text are lower because larger text is inherently more readable at lower contrast.
Why should I test my brand colors against dark backgrounds?
Many products offer a dark mode, and brand colors that work on light surfaces may fail on dark ones. Bright accent colors (yellows, greens) that easily pass 4.5:1 on white may still pass on dark backgrounds, but mid-range values often fail in both directions. Testing early prevents redesign work later.
Does WCAG specify how many colors a brand can have?
No. WCAG has no success criterion about palette size. The guidance about limiting colors comes from UX research and brand guidelines, not accessibility compliance. A 12-color palette that all pass 4.5:1 against each other is technically conformant. The practical concern is cognitive load: readers must be able to infer meaning from color reliably, and more colors make consistent use harder to maintain.