Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Investigate colour contrast issues with the focus state #1137

Closed
36degrees opened this issue Jan 15, 2019 · 5 comments

Comments

@36degrees
Copy link
Contributor

commented Jan 15, 2019

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.

Example of a focussed link

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

Example of a focussed form input

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 )

Example of focussed link against grey in the footer component

#0b0c0c (11.93:1 ✔️)

Example of a focussed input against black in the header of the Design System

#005ea5 (4.07:1 ✔️)

Example of a focussed button against blue in the masthead of the Design System

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

This comment has been minimized.

Copy link
Contributor

commented Jan 16, 2019

@stevenaproctor

This comment has been minimized.

Copy link
Contributor

commented Jan 16, 2019

@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

This comment has been minimized.

Copy link
Member

commented Jan 16, 2019

@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

This comment has been minimized.

Copy link
Contributor

commented Jan 16, 2019

@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.

image

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

image

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

@36degrees 36degrees moved this from This sprint to In progress in Design System Sprint Board Jan 17, 2019

@nickcolley

This comment has been minimized.

Copy link
Contributor

commented Jan 21, 2019

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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
8 participants
You can’t perform that action at this time.