Govuk-frontend: Investigate colour contrast issues with secondary text colour

[36degrees]

What

The hint and caption text uses grey (#6f777b) against white (#ffffff), which technically at 4.6:1 meets WCAG 2.1 AA standards for contrast but has been flagged as potentially problematic for users for with visual impairments and elderly user groups.

| | Text | Large Text |
|-----|------|------------|
| AA | ✔️ | ✔️ |
| AAA | ❌ | ✔️ |

Why

This was flagged in an audit of the design system (5th June 2018):

"The example text relating to data entry could not be easily read. The light contrast coupled with the problematic NTA font has a 4.5:1 light grey text is small and lightly rendered, providing little in terms of luminosity. Despite meeting with the AA minimum contrast, this text display will cause an issue with vision impaired and elderly user groups, who need greater contrast to successfully read content independently." (DAC-USER-LV-GT-T15-01)

[kellylee-gds]

Closed issue as its in the done column on the Kanban board

[timpaul]

Reopening this again, as it was mentioned by a designer in HMRC, in the context of heading captions.

[nickcolley]

@dashouse, @DebsDee and I had a conversation about this.

This secondary text colour is used in two places:

• Headings with captions
• Input hint text, this covers all inputs, not exclusive to text input.

The worry about increasing the contrast of this colour is that the distinction between the label and the hint text would be lost.

This means that to solve this problem it would require representing the hierarchy of the page without colour, for example investigating using bigger or bold text.

[DebsDee]

Using increased font size

Increasing font-size on hint text will also mean increasing size of checkbox and radio text, when paired with hints to maintain visual hierarchy.

Below, the first hint has been scaled up, but the second hasn't.

Hint text is used as captions, scaling it up would mean scaling header text to maintain the right ratio, but this doesn't solve the issue mentioned above on when hint text is used to checkboxes and radio buttons text.

Increasing font weight

This works better for hint captions:

But not so much for input hint text

Using tints

Darken hint text by 20% using a sass function as used on buttons, govuk-shade($govuk-hint-colour, 20%)

Differences are subtle but effective, the first hint text below has been darkened, the second remains unchanged (for comparison).

[nickcolley]

The secondary grey colour's primary purpose is to give it a lower hierarchy in the page compared to labels and legends (headings).

By making that colour darker it makes the text more readable which solves the issues around readability, I imagine it's controversial to add a new darker grey to the colour palette, it could also be argued that a darker grey is too close to the body colour and therefore means the visual hierarchy is lost.

I'd be interested what @dashouse 's thoughts are on adding a darker grey.

When it comes to using bold and increased font size, I think by applying them to the hint itself it could make the hint seem higher in the hierarchy than the labels.

If we we're to explore that maybe it could be done by moving the distinction to the label which would allow for the colour distinction to be removed from the hint text.

Using increased size for labels

Using bold for labels

Bold seems to be clearer to me personally, and also is a pattern we already use in more complicated forms:

Passport example

https://design-system.service.gov.uk/patterns/question-pages/#page-headings

How do you want to sign in example

https://design-system.service.gov.uk/components/radios/#radio-items-with-hints

I'm not sure how easy it is to broadly apply this logic, error messages and small inputs using bold could be a problem.

• Forms inputs without hints
• Forms inputs with errors
• Small inputs

[nickcolley]

Hiya,

My team has been using $govuk-secondary-text-colour #6f777b as the hint text colour in a service we are working on.

We did some accessibility testing using the GDS empathy lab persona Ron. When using the chrome extension recommended to simulate Ron's cataracts we were unable to read the text.

We're concerned that the text colour may not be accessible for users who are sight-impaired.

https://github.com/alphagov/govuk-design-system-backlog/issues/202

[DebsDee]

@nickcolley Looked into this with @36degrees and found readability is marginally improved (for the Ron persona) by removing anti-aliasing from the hint text. Whether this is something we'd want to do is another question.

With antialiasing

Without antialiasing

[DebsDee]

Some options discussed for improving the secondary text contrast issue include:

• updating labels in some fashion to allow the use of govuk-colour("black") on the secondary text, while maintaining hierarchical differences. This option would do away with the need for the darker grey entirely. Suggested changes to the labels could be using a heavier font weight, or increased font size.

• updating hint and caption text to increase their visibility, while trying to ensure that they read and look like secondary items after labels. Suggested changes to the secondary text items could be using a darker grey (something with a contrast value of above 4.8) or even one of the darker secondary palette colours.

We’re not completely sure how users with visual impairments are impacted by this issue, one recommendation would be to get more information on the range of issues faced by these users before deciding on which (if any) of the options above should be implemented. A suggestion has been to use the upcoming accessibility research on Pay to find out more on this issue.

[dashouse]

I think there's definitely something in all of these options, but my personal preference is to try and make things just a little bit better without having to change how people do anything for the moment. It might be a technical breaking change, but should be a "do nothing" breaking change.

I think darkening govuk-colour("dark-grey") by 5% globally is probably the easiest thing we can do. It still looks similar / grey but ups the contrast from 4.56:1 to 5.51:1.

I'd prefer to change the dark-grey colour at source than add another grey / use the shade function as this colour is only used for secondary text colour. Anything over 5% seems too close to the main text colour for my eyes.

So a PR for this would be on https://github.com/alphagov/govuk-frontend/blob/master/src/govuk/settings/_colours-palette.scss#L63

$_govuk-colour-palette-modern: (
  "red": #d4351c,
  "yellow": #ffdd00,
  "green": #00703c,
  "blue": #1d70b8,
  "dark-blue": #003078,
  "light-blue": #5694ca,
  "purple": #4c2c92,

  "black": #0b0c0c,
  "dark-grey": #626A6E,
  "mid-grey": #b1b4b6,
  "light-grey": #f3f2f1,
  "white": #ffffff,

  "light-purple": #6f72af,
  "bright-purple": #912b88,
  "pink": #d53880,
  "light-pink": #f499be,
  "orange": #f47738,
  "brown": #b58840,
  "light-green": #85994b,
  "turquoise": #28a197
);

Before:

After:

Example in use:

Not shutting down any of the other options, but I think this would be an easy ship with some immediate benefit.

[DebsDee]

@dashouse I agree, feels like the least invasive option with the biggest trade-off. As @nickcolley mentioned, there might be places where bolding labels could reduce content hierarchy in some contexts, thus creating some design debt.

Updating the grey, rather than adding a tint makes sense too.

[36degrees]

This was accidentally included in the changelog entry for Frontend 3.3.0, but we haven't shipped it yet. Have put it back on the board.