Future Media Standards & Guidelines

Use of Colour and Colour-Contrast Standards v1.2.1 (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 have brightness contrast >=125 and colour contrast >=400 (Hewlett Packard colour contrast standard). You can check the colour contrast between two colours using Hewlett Packard's Colour Contrast tool or Juicy Studio's Colour Contrast Analyser.

  • Note that Juicy Studio's tool bases its results on the W3C colour contrast standard of >=500. Therefore, ensure you check the actual figure returned back as even if the tool tells you your colours have failed they may in fact exceed the >=400 threshold.

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/11/2008 v1.2.1 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.