Contrast Check

“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 those who may have colour vision deficiencies (colour blind). 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. Living with Colour Vision Deficiency

colour vision deficiency

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.

Acceptable contrast levels are provided when you use the Webaim online checker.

WebAIM colour contrast checks

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.

References

This technique may be used to test the following sections of best practice.

Document Section Heading
WCAG 2.0 1.4 Make it easier for users to see and hear content… More Info
WCAG 2.0 1.4.1 Use of Color More Info
WCAG 2.0 1.4.3 Contrast (Minimum) More Info
WCAG 2.0 1.4.6 Contrast (Enhanced) More Info

See Also

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