Join GitHub today
GitHub is home to over 40 million developers working together to host and review code, manage projects, and build software together.Sign up
Investigate colour contrast issues with the focus state #1137
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 (
In most cases, these will be used against a white (
When used against a white background, the colour contrast ratio between the yellow and the white is 1.64:1.
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".
@dashouse worth a read I think: https://www.w3.org/WAI/WCAG21/Understanding/non-text-contrast
I had a quick look through the colour palette. Those that do not meet the 3:1 for non-text contrast are:
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
@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".
@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:
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.