Colour in interfaces: contrast, meaning and consistency

Colour does three jobs in an interface. It makes text and controls visible against their background. It carries meaning, such as red for an error or green for success. And it ties a product together, so the same action looks the same everywhere. When colour goes wrong, it is usually because one of these jobs was forgotten while choosing colours for the brand.

This guide covers each job in turn, with the contrast ratios set by the Web Content Accessibility Guidelines (WCAG), what colour blindness means for design, and how to keep colour consistent as a site grows.

Job one: contrast you can measure

Contrast is the difference in brightness between foreground and background, expressed as a ratio from 1:1 (no difference) to 21:1 (black on white). WCAG gives clear minimums.

Some things are exempt from 1.4.3, including logos, purely decorative text and controls that are inactive. The W3C notes that 1.4.11 values are not rounded, so 2.999:1 fails.

Two practical points catch people out. First, brand colours are often mid-tones that fail as text colours on white, so a brand green may work for a large banner but not for a link in a paragraph. Second, contrast must be checked in every state and theme: hover, disabled, dark mode, and text placed over photographs. Apple’s design guidelines make the same point about checking both light and dark appearances.

Job two: meaning that doesn’t depend on colour alone

WCAG 1.4.1 Use of color (level A) says colour must not be the only visual means of conveying information, prompting a response or distinguishing an element. The W3C gives two common failures: links that can only be told apart from surrounding text by colour, and form fields marked as required or in error by colour alone. The passing approach adds a second cue, such as an icon, a text label, an underline or a pattern.

The reason is colour vision deficiency. The Wikipedia article on colour blindness reports that red-green colour blindness affects up to 1 in 12 males (8%) and 1 in 200 females (0.5%), with deutan types the most common. People with these conditions confuse reds, browns, greens and yellows. Apple’s accessibility guidelines also flag blue-orange pairings as hard for some people, and recommend shapes or icons alongside colour to show changes in state.

Meaning also depends on convention. Red for errors and danger, green for success, amber for warnings and blue for links are expectations users bring with them. Breaking them costs attention. If your brand colour is red, avoid using it for primary buttons where it could read as “delete”.

Job three: consistency through a small palette

Consistent colour lets people learn an interface once. The same blue should always mean “this is clickable”, and a success message should look the same on the checkout page as in account settings.

The GOV.UK Design System’s colour guidance shows how a mature system does this. It gives each colour a role and tells teams to use it only for that role: one red for error messages, one yellow only for showing which element has keyboard focus, one green for success messages. Teams reference colours through named functions rather than copying hex codes, so the whole service updates when the palette changes.

A small business can copy the idea without the tooling:

1. Name colours by role, not appearance. “Text”, “link”, “primary action”, “error”, “success”, “border”, “background”. A role name survives a rebrand; “dark teal” does not.
2. Limit the palette. A brand colour, a neutral range of greys, and the status colours cover most interfaces.
3. Test every pairing you will use. Write down which text colours may sit on which backgrounds, with the measured ratio.
4. Store colours as variables. CSS custom properties, such as --colour-error, keep one source of truth.
5. Reserve status colours. Don’t use the error red for decoration or a sale banner.

A worked example

An example (illustration only). A yoga studio’s booking site uses a pale sage green as its brand colour. Buttons have white text on sage, links are sage with no underline, and full classes are shown with a red dot while available ones get a green dot.

A contrast checker shows white on sage is well below 4.5:1, so button labels fail. Links in paragraphs are indistinguishable from body text for some users because only colour marks them. The red and green dots are the exact pairing that people with red-green colour blindness confuse.

The fixes keep the brand intact. Sage stays as a background and accent colour, and a much darker green becomes the “primary action” colour, with white text passing 4.5:1. Links get underlines. Class availability shows the words “Full” or “3 spaces left” next to the dot. The team writes a one-page palette with role names, approved pairings and their ratios, and stores the colours as CSS variables.

Common mistakes

• Choosing colours from a brand guide written for print, without checking them on screen.
• Pale grey placeholder or hint text that fails contrast.
• Error states shown only as a red border.
• Charts where the only difference between lines is hue.
• Removing the default focus outline and replacing it with nothing, or with a colour that fails 3:1.
• Adding a new shade every time someone designs a page, until the site has dozens of near-identical blues.
• Checking contrast in light mode and forgetting dark mode.

How to check, and when to go further

Free contrast checkers and browser developer tools will give you ratios in seconds. Colour blindness simulators, available in most browsers’ developer tools, show how your pages look with different deficiencies. Run both on your key pages: home, product or service, checkout or booking, and any page with charts.

The AA ratios are the level most organisations aim for and the level commonly referenced in accessibility requirements. Aim for AAA’s 7:1 on long-form reading pages if your audience includes many older readers or people with low vision. And if colour is doing heavy lifting in data visualisation, such as heat maps or dashboards, involve someone with data visualisation experience, because hue, lightness and pattern all need planning together.