azokroma
Blog · Colours

Colour contrast and accessibility: what WCAG means for your brand

4.5:1 and 3:1 ratios, text and buttons: how to check that your brand colours stay legible for everyone, and what to do if they do not.

Published on By The azokroma team2 min read
Colour contrast and accessibility: what WCAG means for your brand

Create your company’s complete brand identity in 5 minutes.

Create my brand

Why contrast matters

A brand colour that looks great on your board can become unreadable for a visually impaired person, on a screen in bright sunlight or at a small size. Contrast is the difference in brightness between text and its background. It is also a legal matter for many public websites and a quality criterion for all the others.

The thresholds to remember

The web accessibility rules (WCAG 2.2) measure a contrast ratio from 1:1 (no contrast) to 21:1 (black on white).

ElementAA level (minimum)AAA level
Body text4.5:17:1
Large text (24 px and above, or 19 px bold)3:14.5:1
Icons, borders, interface components3:1—
Example on a white backgroundApproximate contrastVerdict
Black #00000021:1Excellent
Grey #7676764.5:1AA limit for text
Yellow #FFFF001.1:1Unreadable

Test and fix your palette

  1. List the real pairs: text on background, button and its label, link on background.
  2. Measure each pair with a contrast checker (browser developer tools include one).
  3. Darken or lighten the faulty colour: you can keep the hue and change only the lightness.
  4. Keep two versions of the brand colour: the original for large flat areas, a darker one for text.
  5. Do not rely on colour alone: add an icon or text for errors and statuses.

Frequently asked questions

What minimum contrast for text?

AA level asks for 4.5:1 for body text and 3:1 for large text. AAA level goes up to 7:1 and 4.5:1.

Does my logo have to meet these ratios?

No, WCAG exempts logos. But it must stay legible on your backgrounds: prepare light, dark and monochrome versions.

How do I measure a contrast?

With an online contrast checker or your browser’s inspector, which shows the ratio of a text and suggests a compliant colour.

Comments

No comments yet. Be the first to react.

Leave a comment

No e-mail asked. Your comment is published after review. Nickname and text are kept until you ask for removal (see the privacy policy).

Try it in azokroma

Pick a name, a symbol, colours and a font, then get an exclusive design removed from the catalogue the moment you buy it.

Create my brand

Sources

Keep reading

Colour psychology: how to choose the colour of your logo
Colours

Colour psychology: how to choose the colour of your logo

Blue, red, green, yellow… what each colour suggests, how to choose according to your industry, and the mistakes to avoid before locking in your palette.

Building your brand colour palette: the 60-30-10 method
Colours

Building your brand colour palette: the 60-30-10 method

Primary, secondary, neutral and accent colours: a simple method to compose a consistent palette and document it (HEX, RGB, CMYK).

SVG, PNG, PDF, EPS: which logo format for which use?
Logo

SVG, PNG, PDF, EPS: which logo format for which use?

Vector or bitmap, transparent or not: the guide to logo file formats, with favicon sizes and good export habits.

Vibe coding: why you should define your brand before asking AI for code
Brand

Vibe coding: why you should define your brand before asking AI for code

Vibe coding lets you build a site or an app in a few hours. Without a defined brand, the result looks like everyone else’s. Here is what to prepare before you launch the AI.

← All articles