Page Design: Visual Elements
WAI Definition (Checkpoint 2.2)
Ensure that foreground and background colour combinations provide sufficient contrast when viewed by someone having colour deficits or when viewed on a black and white screen.
In text and images, ensure that foreground and background colour combinations have sufficient contrast when viewed by someone having impaired colour vision or when viewed on a black and white screen.
Ensuring proper contrast between foreground and background colours is important for users, who are partially sighted or colour-blind, as well as for people who use a notebook screen or a projector on a sunny day. This particularly affects the elderly and those who have some form of colour-blindness.
Use the validation tools to ensure that colour combinations offer sufficient contrast.
A. For text and images with flat colours
Colour contrast requirements can be tested using Juicy Studio Color Analyzer.
There is also a Firefox extension that allows for the testing of all colours on a page (with the exception of colours in images).
All the colour combinations in the page pass level AAA or AA for regular text size.
B. For images without flat colours
Run the image through Vischeck to simulate how the page will look if viewed by a colour-blind person.
The information conveyed by the image is still understandable.