AdamBoon1 commented 4 years ago

Bug Report

What is the issue?

I work on the 'Respond to an NHS cyber alert' service. My team has recently been made aware that one of our users is experiencing an accessibility issue with checkboxes.

If Window's o/s 'High Contrast Black' mode is used the checks on checkboxes, or the dots on radio buttons, become invisible as they are the same colour as the background of the checkbox. i.e. they are both white.

There also appears to be a contrast ratio issue when using some of the other pre-defined contrast settings.

The user expected to be able to select a checkbox and see which selection they had made. This was not possible though due to the check being the same s the background of the checkbox.

What steps are required to reproduce the issue?

To reproduce the issue on WIndows 10

Go to high contrast settings and change to 'high contrast black'
Go to https://service-manual.nhs.uk/design-system/components/checkboxes
You'll see that the checks in checkboxes and the dots in radio buttons are not visible against the background of the box or radio.

What was the environment where this issue occurred?

Device: Windows Surface Pro 3
Operating System: Windows 10
Browser: Edge
Browser version: Version 86.0.622.51 (Official build) (64-bit)

chrimesdev commented 3 years ago

Thanks for raising this @AdamBoon1 - we're going to pick this up this sprint.

chrimesdev commented 3 years ago

Comment from Andrew Duckworth on the public Slack:

If I recall correctly, this can be caused by setting the background colour of elements. Which is why GDS used currentColor instead of a specific hex code for a colour. To expand on that more. We explicitly set the background colour to white for the frontend. Which some Windows set ups do not override. Meaning, the black dot gets reversed. But the background colour does not. Using currentColour I believe avoids the problem

Example of GDS implementation:

.govuk-radios__label:after {
  content: "";
  position: absolute;
  top: 10px;
  left: 10px;
  width: 0;
  height: 0;
  border: 10px solid currentColor;
  border-radius: 50%;
  opacity: 0;
  background: currentColor;
}

Further reading on currentColor: https://css-tricks.com/currentcolor/