Brand colour accessibility and contrast basics

The short answer

Brand colours should be tested for contrast between text and background, using the contrast ratio in the Web Content Accessibility Guidelines. Do not use colour alone to carry meaning, check combinations for common types of colour blindness, and record approved text and background pairings in your brand guidelines.

Why contrast matters

Contrast is the difference in brightness between text and the colour behind it. Low contrast makes words harder to read for everyone, and especially for people with low vision, people in bright light and anyone on a low-quality screen. It is also one of the most common accessibility issues on websites.

Brand palettes often fail because they were chosen for mood. A soft pastel on white looks calm and is hard to read. Testing early avoids having to change a logo or colour system later.

The contrast ratio

The Web Content Accessibility Guidelines (WCAG) measure contrast as a ratio between two colours. For the AA level, normal text should reach 4.5 to 1, and large text and key interface parts should reach 3 to 1. The AAA level asks for more. These figures come from WCAG 2, so check the current W3C guidance for the version you are working to.

Free contrast checkers let you enter two colour codes and show the ratio. Use them on every text and background pair in the palette, not just the main one.

Build a pairing chart

Instead of leaving people to guess, publish a small chart of approved combinations.

• Each brand colour on white, on black and on the main background.
• Which pairings pass for body text and which only for large text.
• Which pairings are for decoration only and must never carry words.
• The accessible alternatives, such as a darker shade of a light brand colour for text.

Do not rely on colour alone

If colour is the only way to tell two things apart, some people will miss it. Colour vision differences are common enough that every palette should be designed with them in mind. Add a second cue: a label, an icon, a pattern or a line style.

• Mark errors with text and an icon, not only red.
• Show chart series with labels or patterns as well as colours.
• Make links distinguishable from body text by more than colour, such as an underline.

Logos, buttons and charts

Logos are exempt from some contrast rules, but they still need to read clearly on every background you use, which is why a brand needs logo variations. Buttons and form fields need enough contrast against their surroundings so people can see where to click. Charts need colours that remain distinct when printed in greyscale.

Our guide to colour psychology in branding explains why mood should never override readability.

Testing in practice

1. Check every text and background pair with a contrast tool.
2. View your pages and materials in greyscale to see if the hierarchy still works.
3. Use a colour vision simulator to preview common types of colour blindness.
4. Test on a phone outdoors in bright light.
5. Record the results in the brand guidelines and update them with any palette change.

Common colour problems

• Light grey text on white, which looks refined and is hard to read.
• White text on a bright mid-tone colour such as yellow or light green.
• Placeholder text in form fields that is too faint.
• Disabled-looking links in a footer.
• Buttons whose text colour matches the background on hover.
• Charts that use several similar shades of the same colour.

Fixing a palette that fails

1. Test each text and background pair and record the results.
2. Keep the brand colour for large shapes, icons and accents where contrast rules are lighter.
3. Create a darker shade of the brand colour for text and link use.
4. Add a rule that body text must use an approved dark colour on a light background, or the reverse.
5. Update the guidelines and the design files so everyone uses the same values.

When you choose a palette from scratch

Check contrast while you are still choosing. Pick a colour to represent the brand, then immediately test a darker and a lighter shade against white and black. Choose supporting colours that keep a clear difference in brightness, not only in colour. A palette that works in greyscale will usually work for far more people than one that depends on hue. Our guide to colour psychology in branding covers the mood side of the decision.

Related guides

• Branding and logo design
• Brand Guidelines: What to Include
• Website Accessibility Basics: WCAG for Business Owners
• How to choose brand colours
• How to choose fonts for your brand
• Brand audit how to review your brand

Questions and answers

What contrast ratio should I aim for?

For WCAG AA, normal text should reach 4.5 to 1 and large text 3 to 1. Check the current W3C guidance because requirements can differ by version and by what the law requires where you operate.

Do logos have to meet contrast rules?

Logos are generally treated differently from body text, but they still need to be legible on each background. Prepare light and dark versions of the logo.

Is accessibility a legal requirement?

In some countries and sectors it is, and rules differ widely. Ask a qualified professional about the rules that apply to your business.

Can I keep a light brand colour that fails the test?

Yes, for decoration. For text, use a darker shade from the same family and document it as the approved text colour.