10 · Contrast and Colour Check

Web 2.0 Services

It is important for everyone to have an enjoyable experience when reading web sites and content should have good levels of colour contrast and no distracting elements. Colour can be a useful way to highlight different types of information, such a necessary action or specific type of message. Interface controls can come in various shapes as buttons with a range of colours. They should have other obvious differences to help those with colour deficiencies (colour blindness).

Outcomes and Scores

This test has 4 possible outcomes.

Outcome Score
Site contrast is acceptable with good colour differentiation and symbols have different shapes. Highly visible focus indicator is available. Contrast ratio of 3:1 exists for UI controls Contrast ratio of at least 4:5:1 exists between text and background. 100%
Site colour contrast and colour differentiation adequate but some non-critical text in bizarre fonts or not comfortable to read. 67%
Generally adequate contrast, some non-critical text difficult to read and some symbols have poor colour differentiation. Contrast ratio of 3:1 does not exist for links or controls. Contrast ratio of 4.5:1 does not exist for text and its background. 33%
Poor contrast making critical text difficult to read OR colour used as the sole conveyance of information. Highly visible focus indicator is turned off and outline of elements is similar to the focus indicator (makes it invisible). 0%

Disabilities

The results of this test are taken into account when calculating accessibility scores for the following disabilities.

Techniques

The following technique may come in handy when running this test.

References

This test aims to cover 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.11 Non-text Contrast More Info