Colour - Optimal Content Examples

Introduction

Colour is a presentation element on a web page used either for decorative purposes or to convey information.

Coding Requirements

The following summarizes selected techniques from the Web Content Accessibility Guidelines (WCAG) 2.0 for satisfying the most common applicable success criteria related to this topic. Additional WCAG 2.0 success criteria, techniques, and failures not listed here may also be applicable depending on the content.

1. Contrast

Foreground text must have sufficient colour contrast from the background. The amount of contrast required is based on the size and weight of the text. Text size is measured in points (instead of pixels).

• Large Size Text requires 4.5:1 colour contrast ratio and is defined as:

  • Regular Text which is 18 points or greater.

  • Bold Text which is 14 points or greater.

• Small Size Text requires 3:1 colour contrast ratio and is defined as:

  • Regular Text which is less than 18 points.

  • Bold Text which is less than 14 points.

Colour contrast can be measured by using free software tools listed in the related links.

Source: WCAG 2.0, Technique G18 and WCAG 2.0, Technique G145

2. Use Of Colour

When colour is used to convey information, an alternate visual cue or text description is required.

The following are common situations where colour conveys information:

Element	Potential Issue	Correction
Charts and Graphs	Multiple series or values identified by colour.	Provide a supplementary data table OR Use pattern shading or text labels on the chart or graph with a text description.
Forms and User Controls	Required fields identified by colour.	Provide a supplementary indicator, such as an asterisk (*) on required fields. Explain the meaning of the indicator prior to its usage on the page.
Links	Links identified from regular text by colour.	Underline (preferred), italicize, or bold the link.

Web Accessibility Considerations

Visual Impairments

• Ensure there is sufficient contrast between textual elements, and background colours or images.

• Ensure users can see the page even if they have colour deficits, or view it on a black and white screen. If the colour contrast for any colour combination is not significant enough, users with colour deficiencies will have problems seeing the content. It is helpful to determine compliance by using the Vischeck color vision simulator tool (external link) to simulate what the page looks like for users with certain colour deficiencies.

  • Individuals classified as totally (uncommon) or partially colour deficit (more common) can have colour vision deficiencies that are either acquired or inherited.

  • The difficulty in distinguishing colours is usually between red and green, or between blue and yellow.

Related Links

• Web Content Accessibility Guidelines (WCAG) 2.0 Success Criteria

  • 1.4.1 Use of Colour
  • 1.4.3 Contrast (Minimum)

• Web Content Accessibility Guidelines (WCAG) 2.0 Sufficient Techniques

  • G18: Ensuring that a contrast ratio of at least 4.5:1 exists between text (and images of text) and background behind the text.
  • G145: Ensuring that a contrast ratio of at least 3:1 exists between text (and images of text) and background behind the text.

• Tools and Utilities

  • Contrast Analyser for Windows and Mac
  • Juicy Studios Luminosity Analyzer
  • Vischeck Color Vision Simulator Tool