Future Media Standards & Guidelines

Use of Colour and Colour-Contrast Standards v1.6 (superseded)

1. Introduction

1.1. These standards ensure that the use of colour on BBC Online is suitable for people who have some form of colour-blindness, vision impairment or have difficulty in reading text.

Top of page

2. Make sure information being conveyed with colour is available in other ways

2.1. Information being conveyed with colour MUST be available without colour also, i.e. from context or mark-up.

2.2. Navigation controls MUST be identifiable and usable without colour cues or mouse-over, e.g. you MUST distinguish link text from non-link text by text style (underline, bold, italic) as well as colour (see Text Link Standards).

2.3. The information conveyed in diagrams and multimedia MUST be able to be perceived without using colour cues, e.g. lines/areas on graphs SHOULD NOT just be differentiated by colour, but also by style (dotted, dashed etc.) or labels.

2.4. Any information in images which relies on colour MUST be made clear in the alt-text for the image or in the surrounding body text. This does not apply to furniture images.

Top of page

3. Colour contrast

3.1. All colour combinations MUST pass the colour contrast check in accordance with the Snook colour contrast checker. This tool checks for WCAG 2.0 (level AA) compliance, i.e.

  • normal text smaller than 18pt MUST have ratio of 4.5:1; and
  • normal text that is 18pt or larger and bold text that is 14pt or larger MUST have ratio of 3:1.

NOTE This tool provides contrast suitable for most types of colour blindness, it does not pick up on certain combinations of red and black, which SHOULD be avoided as for some types of colour blindness red appears as black.

3.2. The graphic text/background colour combinations in banners, diagrams, and multimedia MUST be checked in the same way. These are even more important to get right because the colours cannot be customised by users by overriding with their own style sheets.

Top of page

4. Colour-blindness

4.1. You MUST NOT use any colour combinations which will be indistinguishable by people with a form of colour-blindness (see Vischeck/Colour Vision Simulator Examples for details).

4.2. You MAY use Vischeck's colour-blindness image checker on your Image Files.

4.3. You MAY also apply Vischeck's Daltonise tool to "fix" the image for colour-blind users.

4.4. You SHOULD do a final check that the editorial content of the page is visible, using Vischeck's colour-blindness tool: Vischeck/Try Vischeck on a Webpage.

Instructions:

Take a screen grab (PC) or use Paperazzi (Mac) to grab an image of your page.

On the Vischeck site select 'Run Images' from left hand menu.

Select type of colour blindness from menu, select image file to be analysed and 'Run Vischeck'.

For a more detailed look at any specific section of image, grab that specific section of screen and repeat.

Check that the colour blindness emulation complies with the Colour Contrast Standard.

Repeat the above for each type of colour blindness; Deuteranope, Protanope and Tritanope.

4.5. You SHOULD also check that your colour choices will not interact with each other when they are displayed on a CRT/TFT (gamma, moiré, bleeding etc.).

Top of page

5. Use CSS to control colour choices

5.1. You MUST define both the text and background colours of all textual areas on a page in a CSS style sheet, so users can override your colours with a style sheet of their own.

5.2. For further information, see the CSS standards and HTML Integrity Standards.

Top of page

6. Document history

DateVersionChangeAuthor
17/09/2009 v1.6 Significant change to clause 3.1. Brought in line with WCAG 2.0 guidelines and changed recommended colour contrast checker to the Snook WCAG 2.0-compliant analyser. Ed Lee
20/03/2009 v1.5 Minor change: URL to Juicy Studio Analyser in section 3.1 updated to link to WCAG 2.0-compliant test. Explanatory notes also added. Ed Lee
25/02/2009 v1.4 Minor change: updated URL to Juicy Studio Analyser in section 3.1. Ed Lee
17/11/2008 v1.3 Minor change: bbc.co.uk replaced with BBC Online. Victoria Jolliffe
23/10/2008 v1.2 Details added about using the Juicy Studio analyser in section 3.1. Victoria Jolliffe
24/9/2007 v1.1 No changes other than trying to make the standard clearer and simpler to be more usable. Gareth Ford-Williams
25/09/2006 v1.02 Added the instructions (section 3.2) for testing a page using the Vischeck colour blindness simulator, recommended by the Accessibility work group. Gareth Ford-Williams
28/06/2006 v1.02 HP standard adopted over W3C standard by Design Forum. Tred Magill
14/06/2006 v1.01 Adopted W3C standard, as recommended by Accessibility WG and approved by Technical Forum Tred Magill
19/01/2006 v1.00 Removed outdated reference to Sitemorse in Section 6. Tred Magill
15/12/2004 v1.00 Standard renumbered as 1.00 on approval by Standards Exec Jonathan Hassell
24/09/2004 v0.6b Updates to triggers for iTV application, ref to Durham Uni research Jonathan Hassell
18/06/2004 v0.6 More tidying (links) Jonathan Hassell
04/06/2004 v0.5 More tidying Jonathan Hassell
03/06/2004 v0.4 Tidying up & clarification before Colour-Contrast subgroup meeting and additions in Colour-Contrast subgroup meeting Jonathan Hassell
11/02/2004 v0.3 Added in comment regarding web-safe colours Jonathan Hassell
23/01/2004 v0.2 Updates after 1st meeting of Colour-Contrast subgroup Jonathan Hassell
21/01/2004 v0.1 First draft of document, based on G-KW/JH's Colour Contrast Research document and G-KW's Understanding Colour Blindness document. Jonathan Hassell

Document editor: Editor, Standards & Guidelines. If you have any comments, questions or requests relating to this document, please contact the Editor, Standards & Guidelines.

Like all other Future Media Standards & Guidelines, this page is updated on a regular basis, through the process described on About Standards & Guidelines.

Top of page

BBC navigation

BBC © 2014 The BBC is not responsible for the content of external sites. Read more.

This page is best viewed in an up-to-date web browser with style sheets (CSS) enabled. While you will be able to view the content of this page in your current browser, you will not be able to get the full visual experience. Please consider upgrading your browser software or enabling style sheets (CSS) if you are able to do so.