How to choose accessible brand colors (WCAG contrast ratios explained)
Pick a brand palette that passes WCAG contrast checks so your site is readable, accessible and ranks better in Google's Core Web Vitals signals.
Accessibility isn't just compliance — it's a ranking factor. Google's page-experience signals include contrast and readability, and AI engines deprioritise sites with poor accessibility scores.
- A draft brand palette (or willingness to revise one)
Step by step
- 01
Know the targets
WCAG AA requires 4.5:1 for body text and 3:1 for large text. AAA (preferred) is 7:1 and 4.5:1.
- 02
Test every text/background pair
Open webaim.org/resources/contrastchecker. Test primary text on background, link on background, button text on button background.
- 03
Adjust lightness, not hue
If a color fails, darken or lighten it in HSL while keeping hue and saturation. Your brand stays recognisable, contrast passes.
- 04
Define a semantic palette
Don't just name colors 'blue-500'. Name them by role: 'text-primary', 'surface-elevated', 'border-subtle'. This is how design tokens work in 2026.
- 05
Avoid pure black on pure white
Use #111 on #FAFAFA or similar. It's softer on the eyes and still passes AAA easily.
- 06
Test in dark mode
Repeat the contrast check with your dark-mode palette. Most brand kits fail here because dark mode is an afterthought.
Frequently asked questions
+Does color contrast really affect SEO?
Indirectly but measurably. Google's Core Web Vitals and page-experience signals reward accessible sites; AI engines deprioritise pages with poor Lighthouse scores.
We design logos, brand kits, type systems and color palettes end-to-end.
Book a branding call