Common Look and Feel Guidelines for the Internet, Part 3: Guideline on the Use of Colour on Web sites

Table of Contents

• Effective date
• Application
• Context
• Definitions
• Guideline
  • Colours for areas where information is conveyed using text
  • Colours for areas where information is not conveyed using text
  • Colours for purely decorative areas
  • Colours for photographs and other complex images
• Related policies
• Enquiries
• Appendix A
  • Part 2, Requirement 1 – Compliance with World Wide Web Consortium Priority 1 and Priority 2 checkpoints
  • Part 2, Requirement 5 – Contrast
• Appendix B
  • Example scenarios where Web-safe colours should be used
  • Example scenarios where Web-smart colours may be used

Effective date

This guideline comes into effect on December 1, 2007.

Application

This guideline applies to institutions listed in Schedules I, I.1 and II of the Financial Administration Act.

Context

Canadians have the right to obtain information and services from Government of Canada Web sites regardless of the technologies they use. It is important to use colour combinations that support a wide range of configurations and do not introduce barriers to accessing information with adaptive technologies and older configurations.

Definitions

Definitions to be used in the interpretation of this guideline are located on the CLF 2.0 Web site.

Guideline

Colours for areas where information is conveyed using text

An institution should use the 216 Web-safe colour palette for areas where information is conveyed using text. The institution should use only the 216 Web-safe colour palette for foreground and background colours where the textual information is presented as simple text, in a diagram, or as part of an image.

The institution may use the 4096 Web-smart colour palette instead of the 216 Web-safe colour palette for decorative elements such as borders and edges where the colour of those elements has no impact on the foreground and background colour of the textual information.

Colours for areas where information is not conveyed using text

An institution may use the 4096 Web-smart colour palette instead of the 216 Web-safe colour palette for areas where information is not conveyed using text.

Colours for purely decorative areas

An institution may use the 4096 Web-smart colour palette instead of the 216 Web-safe colour palette for purely decorative areas where meaningful information is not being conveyed.

Colours for photographs and other complex images

An institution is not limited to the 216 Web-safe colour palette or the 4096 Web-smart colour palette for photographs and other complex images where it is not possible to restrict the colours to the 4096 Web-smart colour palette without significant degradation in the image clarity.

A full citing of each relevant requirement or directive appears in Appendix A.

Related policies

The institutions in question must also apply the following policy instruments:

• Common Look and Feel Standards for the Internet, Part 1: Standard on Web Addresses;
• Common Look and Feel Standards for the Internet, Part 2: Standard on the Accessibility, Interoperability and Usability of Web sites;
• Common Look and Feel Standards for the Internet, Part 3: Standard on Common Web Page Formats; and
• Common Look and Feel Standards for the Internet, Part 4: Standard on Email

Institutions must also respect the obligations set out in the Directive on the Use of Official Languages on Web Sites.

Enquiries

For more information, please contact:

Appendix A

Common Look and Feel Standards Pertaining to Colours

Part 2, Requirement 1 – Compliance with World Wide Web Consortium Priority 1 and Priority 2 checkpoints

• Checkpoint 2.1 - Ensure that all information conveyed with color is also available without color, for example from context or markup.
  
  
• Checkpoint 2.2 - Ensure that foreground and background color combinations provide sufficient contrast when viewed by someone having color deficits or when viewed on a black and white screen.

Part 2, Requirement 5 – Contrast

Appendix B

Example scenarios where Web-safe colours should be used

• Elements that convey information such as blocks of text, diagrams, graphs, pie charts, maps, banners, and tables
• Elements used for navigation such as buttons and links (including all hover, focus, and active effects)
• Visual enhancements that can impact legibility such as shading and decorative backgrounds

Example scenarios where Web-smart colours may be used

• Elements that do not convey information such as colour splashes and decorative images
• Visual enhancements that will not impact legibility such as borders and edges
• Photographs that do not contain text