Accessible visual identity: brand, colour and contrast without conflict

What does WCAG say about the brand?

Criterion 1.4.3, Contrast (Minimum), at Level AA, requires a contrast ratio of at least 4.5:1 for text and images of text, with an exception for large text (3:1) and another for logos: “text that is part of a logo or brand name has no contrast requirement”. The official explanation adds what matters most to a brand: text with insufficient contrast because of corporate identity or brand guidelines is not exempt. The exception is only for the logo.

Criterion 1.4.11, Non-text Contrast, also Level AA, extends the rule to elements that are not text. Logos are exempt, on the assumption that their colours may be set by corporate identity. There is a nuance: if a logo normally has sufficient contrast but the author chooses to present it with insufficient contrast, that presentation is not considered essential and is not exempt.

The thresholds, in short:

What counts as a user interface component?

Criterion 1.4.11 covers the visual information required to identify components and their states, except for inactive components. It includes the focus indicator, which must have sufficient contrast against the adjacent background, and any cue that indicates a state, such as whether an item is selected or focused. The border of a text field, the tick in a checkbox or the icon of an open menu fall under this assessment when they are what lets people identify the component. It also does not apply when the component’s appearance is determined by the user agent and not modified by the author.

The W3C also warns that computed values are not rounded: 2.999:1 does not meet 3:1, just as 4.499:1 does not meet 4.5:1. Thin lines and shapes can be rendered with a much fainter colour because of antialiasing, with a much lower contrast in practice, so measure the rendered result, not just the colour in the design file.

How do you audit a brand palette?

The sources consulted give the criteria, not a specific process for palettes. The practice that follows from them is this:

1. List the brand colours and their real uses: backgrounds, text, borders, icons, states.
2. Test each text and background pair against 4.5:1, or 3:1 if the text is large. Colour contrast math explains how the ratio is obtained.
3. Test components against 3:1 in each state, including focus.
4. Document which pairs are valid and which must not be used.
5. Decide what to do with the failing ones: darken or lighten the tone, move to large text, or reserve the colour for non-text elements.

This documentation becomes the basis of the design system and of colour palettes and tokens, where each pair should carry a usage note.

What about brand typography?

Criterion 1.4.12, Text Spacing (AA), does not ask you to use a specific spacing. It asks that no content or functionality is lost when people apply, at minimum, a line height of 1.5 times the font size, paragraph spacing of 2 times, letter spacing of 0.12 and word spacing of 0.16. Brand typography, then, must tolerate those changes without text being cut off or overlapping.

The criterion also does not apply to text rendered as an image to achieve a visual effect, so that text does not adapt. If the identity uses text inside images, use real text wherever possible so people can adjust it.

Example

Illustrative example: a drinks brand has an intense green, #00A651, as its main colour. Tested as a button background with white text, the pair gives 3.2:1: fine for large text, but it fails the 4.5:1 of normal text. The team darkens the button green to #157A3C, which gives 5.4:1 with white, and keeps the original colour in the logo, which is exempt, and in illustrations. For text links on a white background it also uses the dark green. The identity gains a variant for the interface, and the original colour still appears where it does not compete with small text.

For your next review: take the most-used brand colour, test its text on the most common backgrounds, and note which combinations work. That list is half the work.

When should you NOT force the brand palette?

• When the identity is used only in print and there is no digital interface. WCAG applies to web content.
• When colour is the only element that distinguishes the brand and there is no way to adapt it. Then review the brand strategy with whoever defines it.
• When the required contrast would make the brand unrecognizable. Then the accessible variant can be limited to the interface, and the original colour kept in the logo and decorative elements.

Common mistakes

• Assuming the whole brand is exempt because it is corporate. Only the logo or brand name is.
• Testing the logo and considering the whole identity compliant.
• Using the brand colour for small text without measuring contrast.
• Forgetting focus states on components that use the brand colour.
• Rounding the result: 4.49:1 does not meet 4.5:1.
• Deciding the palette without testing it and fixing it component by component afterwards.

Related in the wiki

For the general rules, read WCAG explained. To check that the identity works with assistive technologies, screen reader testing completes the audit.

Sources

• Understanding SC 1.4.3: Contrast (Minimum), W3C WAI (WCAG 2.2): 4.5:1, 3:1 for large text, logo exemption, rounding and corporate identity.
• Understanding SC 1.4.11: Non-text Contrast, W3C WAI (WCAG 2.2): 3:1 for components and graphics, states, focus, logos, rounding and antialiasing.
• Understanding SC 1.4.12: Text Spacing, W3C WAI (WCAG 2.2): spacing values and text in images.