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
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 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.
Advice
- Juicy Studio: Luminosity Colour Contrast Ratio Analyser
- Viget; Color Contrast for Better Readability
- Colorblind Web Page Filter
- The Paciello Group Contrast Analyser, Version 2.2 provides a contrast checker for both Windows and Mac.
References
This technique may be used to test the following sections of best practice.
Document | Section | Heading | |
---|---|---|---|
WCAG 2.1 | 1.4.1 | Use of Color | More Info |
WCAG 2.1 | 1.4.3 | Contrast (Minimum) | More Info |
WCAG 2.1 | 1.4.6 | Contrast (Enhanced) | More Info |
WCAG 2.1 | 1.4.11 | Non-text Contrast | More Info |