ARCHIVED - Common Look and Feel Guidelines for the Internet, Part 3: Guideline on the Use of Colour on Web sites
This information has been archived and replaced by the Guidance on Implementing the Standard on Web Accessibility.
Archived Content
Information identified as archived on the Web is for reference, research or recordkeeping purposes. It has not been altered or updated after the date of archiving. Web pages that are archived on the Web are not subject to the Government of Canada Web Standards. As per the Communications Policy of the Government of Canada, you can request alternate formats by contacting us.
Table of Contents
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:
- Address:
- Common Look and Feel Office
Information Technology Division
Chief Information Officer Branch
Treasury Board of Canada Secretariat
2745 Iris Street
Ottawa, Ontario K1A 0R5 - Email:
- clf-nsi@tbs-sct.gc.ca
- Telephone:
- 613-952-6987
- Toll free:
- 877-636-0656
- Facsimile:
- 613-960-0050
- Teletypewriter:
- 613-957-9090 (TBS)
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
The institution respects the universal accessibility guidelines developed by the World Wide Web Consortium’s Web Accessibility Initiative by ensuring compliance of its Web sites with the Priority 1 and Priority 2 checkpoints of the Web Content Accessibility Guidelines 1.0 (WCAG), with the following exception:
- WCAG Checkpoint 3.4 is superseded by requirement 2 of the Common Look and Feel Standards for the Internet, Part 3: Standard on Common Web Page Formats.
Each of the WCAG's fourteen guidelines is accompanied by one or more actions that a page author must perform to meet the requirements of the guidelines. These actions are called "checkpoints".
Institutions must consult the Directive on the Use of Official Languages on Web sites for direction regarding the application of official languages requirements to text equivalents and other non-textual elements.
- 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
The institution must ensure that there is sufficient contrast between textual elements and background colours or images when the page is viewed by someone having color deficits or when viewed on a black and white screen.
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