Good contrasts – colors and accessibility on the web

Colors not only determine whether something looks nice – but also whether it is legible at all. This is particularly important on the web: texts, buttons and navigation elements must be easily recognizable for all users – regardless of age, screen or visual acuity.

In this article, we’ll show you why color contrasts are so important – especially for accessibility. You’ll find out which rules apply, what often goes wrong and how you can design better, more inclusive interfaces with simple means. And there’s even a quiz.

What is contrast anyway?

Color contrast means: How strongly do two colors differ – for example, text and background? The greater this difference, the better the readability.

It’s not just about “black on white”. Color combinations such as light grey on white or pastel pink on beige can also be problematic – even for people without visual impairments.

Why contrasts are important – for everyone

Clear contrasts not only help people with disabilities. They improve readability, comprehensibility and orientation for a broad user base, regardless of age, environment or technical devices. Anyone who communicates digitally reaches more people with good contrast, for example:

• People with visual impairments (e.g. cataracts, color blindness)
• Mobile users with reflections or poor lighting conditions
• Older people with failing eyesight
• All others who want to capture content quickly

Good contrasts not only ensure accessibility, but also better usability and professionalism.

WCAG guidelines: What is “enough” contrast?

The Web Content Accessibility Guidelines (WCAG) define clear minimum values:

• AA standard: at least 4.5:1 contrast ratio for normal text, 3:1 for large text (from 18px bold or 24px normal)
• AAA standard: at least 7:1 for normal text, 4.5:1 for large text

You can test these values automatically with contrast checkers (see below).

Typical sources of error

• Light gray text on a white background (“looks classy”, but is barely legible)
• Pastel shades with too little difference
• Colors that are indistinguishable with color blindness
• Important UI element (e.g. a button) with too little color difference to the background

Tip: Test your page with grayscale – then you can immediately see whether contrasts really work.

Don’t forget color blindness

Around 8 % of men and 0.5 % of women are affected by color blindness – a proportion that should not be underestimated in design. Red-green deficiency is the most common, followed by rarer blue-yellow disorders.

It is therefore important not to use colors as the only distinguishing feature. Always supplement them with other visual cues such as text, symbols or patterns. This will ensure that your content remains accessible to all users.