Investigate colour contrast issues with the focus state

[36degrees]

What

Investigate colour contrast issues with the focus state according to criterion 1.4.11 Non-Text Contrast of WCAG 2.1.

The focus state for an inline control such as a link is to use black text colour against a yellow highlight.

The focus state for a form element comprises a yellow outline (#ffbf47) around a black border (#0b0c0c).

In most cases, these will be used against a white (#ffffff) background, but other colour backgrounds should be considered. For example (non-exhaustive):

#dee0e2 (1.24:1 ❌)

#0b0c0c (11.93:1 ✔️)

#005ea5 (4.07:1 ✔️)

When used against a white background, the colour contrast ratio between the yellow and the white is 1.64:1.

Why

WCAG 2.1 introduces a new success criteria "1.4.11 Non-Text Contrast" which intends that "any visual effects implemented which are necessary to indicate state, such as whether a component is selected or focused, must also ensure that the information used to identify the control in that state has a minimum 3:1 contrast ratio".

[NickColley]

@dashouse worth a read I think: https://www.w3.org/WAI/WCAG21/Understanding/non-text-contrast

[stevenaproctor]

@NickColley @dashouse This has came up in a DAC audit we had too.

I had a quick look through the colour palette. Those that do not meet the 3:1 for non-text contrast are:

• govuk-border-colour and grey-2
• govuk-focus-colour and yellow
• grey-3
• grey-4
• orange
• light-pink

The same 3:1 rule applies for text contrast too. A link (005ea5) should have a 3:1 colour contrast compared to normal text (0b0c0c). But the contrast is 2.93:1 for a link and 1.94:1 for a visited link. This is part of https://www.w3.org/WAI/WCAG21/Understanding/use-of-color

WCAG 1.4.3 is about foreground and background contrast, which should be 4.5:1. The govuk-link-hover-colour contrast is 3.72:1. See https://www.w3.org/WAI/WCAG21/Understanding/contrast-minimum

[joelanman]

@stevenaproctor I might be wrong but I think specifically on links and normal text, the colour only has to contrast if there is no other visual indicator. In the large majority of cases our links have underlines, therefore I don't think they need to also have colour contrast. The 'Use of color' you linked to above says "Color is not used as the only visual means of conveying information".

[stevenaproctor]

@joelanman That is exactly what it says and I totally agree. But I think it would be a good to make the contrast better in case the underline is not visible for some reason.

Something from another DAC audit said:

Another piece of feedback we got from a DAC report was:

There was an issue with the link highlighting mentioned by one of our low vision analysts where he felt that a clearer indication of when the mouse is placed over a link/button is required.

Solution = Consider improving the mouse hover indication on links and buttons to ensure that users with low vision can clearly detect when the mouse is placed on the elements. It is recommended that the same visual indicator is offered to mouse users as those that navigate using keyboards.

All the links on W3's site do something similar. The only difference between hover and keyboard focus is the focus outline.

I am not saying I agree this is the correct thing to do but we should consider it.

[NickColley]

We could also consider having inset focus styles which may help in certain circumstances. (from @selfthinker)