ONSvisual/income-scrolly

DAC 16 - Medium Priority WCAG Level AA - Colour Contrast [Non-Text] 03

Opened this issue · 0 comments

DAC_Colour_Contrast_Non_Text_03

Issue

The map that shows deprived areas has a lot of different colours. The majority of the colours used are not greater than a 3:1 contrast ratio against adjacent colours. This means that low vision users may have difficulty seeing the map information. A bar graph is also present, and the bar colours used are not greater than 3:1 compared to their adjacent colours.

Red on Red
Foreground: #D6604D Background: #B2182B
The contrast ratio is: 1.8:1 1.4.11 Non-text Contrast (AA)
Fail for UI components and graphical objects

Blue on Blue
Foreground: #D1E5F0 Background: #92C5DE
The contrast ratio is: 1.4:1 1.4.11 Non-text Contrast (AA)
Fail for UI components and graphical objects

Blue map colour
Foreground: #4393C3 Background: #EDEEEA
The contrast ratio is: 2.9:1 1.4.11 Non-text Contrast (AA)
Fail for UI components and graphical objects

Salmon map colour
Foreground: #FDDBC7 Background: #F2F3F0
The contrast ratio is: 1.2:1 1.4.11 Non-text Contrast (AA)
Fail for UI components and graphical objects

DAC 16 Current code ref

Suggested Solution

Non-text colours must have a colour contrast of 3:1 or greater against adjacent colours. Check that all of the colours used for the map have a minimum 3:1 colour contrast.