Department colours are not always accessible

Several department colours do not have sufficient contrast, and are being used for text.

Example: Defra org page

Departments with issues:

• DEFRA
• HMRC
• Any child orgs that inherit Defra or HMRC colours.

Note I think there’s several issues:

• All departments should have a contrast-safe or text-contrast-safe colour.
• All departments should use these colours for text.
• We currently have web-safe colour variants to mean contrast safe, but this does not communicate the purpose of the variant, and has led to some being deleted - such as #249. Web-safe means something different.

Update: The issue with web-safe is that it has a specific meaning. It’s also been used to refer to a hex version of another named colour. Such as when an org has a Pantone colour as their brand colour, and a ‘web version’ for internet use.

For our use, all the hex colours can be used on the web, but only some will have suitable contrast for text.

We must meet WCAG 2.0 AA, which requires a contrast against the background of 4.5:1 or greater.

[voxpelli]

@fofr You need to add a new loadPathin the grunt-contrib-sass settings: https://github.com/alphagov/govuk_frontend_toolkit/blob/ef06147803755152f8796c57e4493cd5c1f933a6/Gruntfile.js#L49

Adding eg. ./node_modules should make the sass-color-helpers file load if you remove the node_modules prefix from their paths.

Also: I just released a new patch version that fixes https://github.com/voxpelli/sass-color-helpers/issues/5, so a good idea to upgrade to version 2.0.3.

[NickColley]

@accessiblewebuk definitely worth making a note in the implementation that we’re testing against the background colour due to how we’re currently using the department colours (which as far as I know is always against our background color)