Colour

Overview – Colour

Colour enhances the design of Web content by increasing its aesthetic appeal, its usability, and its accessibility. As useful as it is, colour must not be the only way information is conveyed. Colour conveys information when it emphasizes text, distinguishes between visual elements, and distinguishes interactive elements from static elements. People who are colourblind, have low vision or are blind must be provided a text alternative of the information conveyed by colour. The same is true for those using text-only, limited colour, or monochrome displays.

To accommodate the needs of all, ensure colour is not the only way information is conveyed. Also, ensure your CSS colour design is customizable, so users can compensate for painfully bright and low contrast colours via the operating system or browser by applying a custom style sheet.

Information conveyed by colour

Information conveyed by colour must have an accurate text alternative.

  Good example: Highlighted form field error with explanatory text

In this example, validation highlights an error with both a colourful background and explanatory text “Error 1: This field is required.”

Example begins

Example ends

Example begins

Title (required) Dr. Esq. Mr. Ms.

First name (required)

Last name (required)

Email address (yourname@domain.com)

Example ends

---

This example is from WET guide: Form validation

  Bad example: Colour alone communicates information

In the bad example below, the chart legend uses colour alone to identify the different bar columns.

Example begins

Example ends

  Good example: Information communicated through colour and pattern

In the good example below, the chart legend uses colour and patterns to identify the different bar columns. The alternative text adequately describes the data conveyed in the bar chart.

Example begins

Alt text: Bar chart depicting game console sales in first 3 months of 2021: in January 84 Nintendo, 66 PlayStation; in February 48 Nintendo, 22 PlayStation; in March 25 Nintendo, 57 PlayStation.

Example ends

  Bad example: Colour-coded information not communicated through alternative text

In the bad example below, the chart legend uses colour and patterns to identify the different bar columns. However, there is no alternative text for screen reader users.

Example begins

Example ends

HTML

Code begins

<img src="images/sales-to-march-2021.png" alt="">

Code ends

Distinguishing links and controls from text

Users with low vision and colour blindness need to distinguish links and controls from neighbouring text. The easiest way to do this is with an underline on the link and a border on a control.

When colour is used as the only way to identify a link (meaning the underline has been removed) or a control, two conditions must be met:

• 3:1 contrast between the body text and the link text or control.
• A "visual cue" (not just a colour change) that appears on mouse hover and keyboard focus. The most common way to meet this is to underline the link on hover and focus, but you could also provide a background colour or border or outline.

Note that this is only an issue when the link or control and the body text appear together. It doesn’t apply to links or controls in the header or stacked in a menu, where they’re understood to be links or controls by their position on the page.

These requirements are in addition to the minimum contrast requirement of 4.5:1 between foreground text and background. It can be difficult to find a link or control colour that has both a 3:1 contrast with black body text and a 4.5:1 contrast with a white background. WCAG Technique G183 lists colour values that do, in Example 1.

  Good example: High contrast with a visual effect on hover and focus

This example avoids a static underline by:

• Using blue (#3333FF) as the link colour, which has
  • a 3.1:1 contrast with neighbouring black text (just exceeds the minimum 3:1)
  • a 6.9:1 contrast with the background white (well exceeds the minimum 4.5:1)
• As an additional visual cue on hover or focus, the link text is set in a very high contrast (21:1) of white against black background.

Example begins

The IT Accessibility Office (ITAO) remains to be a provider of adaptive technology and an advocate for inclusiveness of people with disabilities in the workplace.

Example ends

Results from the Colour Contrast Analyser

After receiving keyboard focus or mouse hover

Customization of interface colour and contrast

Some users with sensitivity to brightness or with low vision will expect to be able to modify colours. Whenever possible, use native controls and features of HTML. That allows users to customize interface colour and contrast for the visible UI components.

.button-ex {
   background-color: #0065CB;
   border: none;
   color: white;
   padding: 10px 25px;
   text-align: center;
   text-decoration: none;
   display: inline-block;
   font-size: 36px;
   margin: 4px 2px;
   cursor: pointer;
}

  Bad example: Button using an image of text

When buttons use an image of text, user style sheets are not able to customize the text properties, including foreground and background colours. Screen magnification pixelates and blurs images of text, diminishing readability.

Example begins

Example ends

HTML

Code begins

<button style="border: none; background: none;">
   <img src="images/image17.jpg" alt="Next" class="img-responsive"/>
</button>

Code ends

Related WCAG resources