Contrast Check

This is a technique for testing:

WCAG 2.0: Guideline 1.4 Distinguishable: Make it easier for users to see and hear content including separating foreground from background.  Understanding Guideline 1.4

1.4.1 Use of Color: Color is not used as the only visual means of conveying information, indicating an action, prompting a response, or distinguishing a visual element. (Level A) How to Meet 1.4.1 | Understanding 1.4.1
1.4.3 Contrast (Minimum): The visual presentation of text and images of text has a contrast ratio of at least 4.5:1, except for the following: (Level AA) How to Meet 1.4.3 | Understanding 1.4.3
1.4.6 Contrast (Enhanced): The visual presentation of text and images of text has a contrast ratio of at least 7:1, except for the following: (Level AAA)  How to Meet 1.4.6 | Understanding 1.4.6

Overview

“Colour is often used on computers to present information such as the London Underground map available on the internet, which relies on colour to distinguish between different lines.  With colour being an important component, significant visual information often disappears when colour images and documents are viewed by colour blind computer users.... Although no specialist hardware or software is required for users with Colour Vision Deficiency or colour blindness, such as adapted input devices or screen readers, consideration needs to be made for colours of font, background themes, and buttons as examples. This is especially true for buttons which when hovered over change colour, or text when it is highlighted. Bright colours are less confusing then similar shades of a colour, with black and white being clearly different. “ Jim LexDis participant

Contrast differences between text sizes and shapes are also important for readability and bizarre ‘word art’ type fonts may be distracting. This is discussed further under Text size and style, blinking elements

Method

One way of checking that the colours used throughout a website offer sufficient contrast is to use the Juicy Studio: Luminosity Colour Contrast Ratio Analyser. The website also offers advice related to the WCAG 2.0 guidelines.

Webaim offer some good examples of the issues that arise for those with colour blindness and the most important thing to check for is that colours are not the only method of conveying important information especially controls.  Manually check there are alternatives such as readable text or shapes and print a sample black and white copy of the page (not greyscale) to check for contrast levels.

colour differences   

Advice