WCAG Color Contrast: Understanding 4.5:1 Ratio

Why is contrast important?

According to the WebAIM Million 2024 report, low contrast is the primary error on 81% of websites – and the easiest one to fix.

Contrast doesn't only affect people with visual impairments. It helps: - Older users (40+ years, tired eyes) - Mobile users in direct sunlight - Color blind users (8% of men, Colour Blind Awareness)

WCAG Requirements

How is contrast measured?

The ratio ranges from 21:1 (black on white) to 1:1 (same color). The formula is documented by W3C:

(L1 + 0.05) / (L2 + 0.05)

where L1 and L2 are the relative luminance of the colors.

Tools

• WebAIM Contrast Checker – the most popular
• Coolors Contrast
• Chrome DevTools – Inspect element → Styles → click on color
• Stark – Figma plugin for designers

Typical Mistakes

Grey text on white `#999` on white is **2.85:1** – failed. Use **#767676** (4.54:1).

Blue link on white `#0066CC` is 5.74:1 – ok. But pure blue `#0000FF` is 8.59:1 – even better.

Disclaimers and "fine print" Small grey text in the footer is a classic mistake. Make it at least **#595959** (7:1) on white.

Buttons with gradients If text is placed on a gradient, measure the contrast against **both ends** of the gradient.

What if brand colors don't comply?

A frequent concern: "our brown/orange brand color doesn't work with white."

Solutions: 1. Darken the color for text only – the brand remains, but the text uses a darker variation 2. Use color as a background – keep text on a white background and use the color as an accent 3. Add shadows or outlines – for buttons and headers 4. Create a tonal palette – our article on B2B website strategy explains more

Practical Action Plan

1. Audit your current site with WAVE
2. Create an Excel table of all color pairings
3. Fix critical errors (below 3:1)
4. Add CSS variables for accessible variations
5. Document these as rules in your design system

Read also WCAG 2.2 guide and web design trends 2026.

Need a color palette audit? Check out our web design service.