Investigate colour contrast issues with secondary text colour

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)

[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]

@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