Use of Colour and Colour-Contrast Standards v1.7

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 for text and images of text

3.1. All colour combinations MUST pass the WCAG 2.0 AA-compliant colour contrast check in accordance with the Snook colour contrast checker. This means you need a 'YES' result against:

• 'WCAG 2 AA Compliant' for normal text smaller than 18 pt; and/or
• 'WCAG 2 AA Compliant (18pt+)' for normal text larger than 18 pt or bold text that is 14 pt or larger.

N.B. The 'YES' result overrides any other issues that may be indicated such as Brightness or Colour Difference.

3.1.1 This requirement applies to text and images of text (not including incidental text, e.g. text on a street sign that happens to appear within a photograph). Stylised text used in logos and branding is exempt from this requirement.

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

Top of page