Department colours are not always accessible

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

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.

Hey @edwardhorsford

Thanks for raising I've just added a bug card to the Core Format team's planning board over at https://trello.com/c/4QPPRvuy/680-make-sure-all-organisation-colours-are-accessible

Thanks for raising 👍

Hi @NickColley has there been any progress on this?

Doesn’t look like it:

Shilpa Acharya moved this card from Proposed stories from the Core team to Support icebox – Aug 24 at 2:44 PM

@NickColley @robinwhittleton can you suggest who I can talk to to try to get this prioritised? Is it Shilpa Acharya?

It's been 3 months since I raised this issue - I'd like to get this accessibility issue addressed.

@tvararu @fofr any idea who could prioritise this?

My guess is that it was marked as low priority. Shilpa is the person to talk to.

What should the DEFRA and HMRC text colours be?

Regarding #249, from the ticket it looks like the colour was approved for text but wasn't re-tested:

Mark H also looked at this later, and proposed the colour for text to ensure accessibility. This has been confirmed by David Pearson of DEFRA that we are ok to proceed on the revised colour.

I vaguely recall it was judged against the large text 3:1 ratio. Large text being 18px or over. Though clearly there's text on the page that's in that colour and at 14px.

Point taken about large text. I'll @aduggin weigh in for that, but in practice we have been aiming for 4.5:1 or greater for all text.

It's hard to control how these colours are used, so IMHO it's easier to aim for the higher contrast and then know it's 'safe' for all type sizes.

Since the colour is used below 18px (and moreso on mobile), this is somewhat a moot point - this still needs to be addressed.

@edwardhorsford I agree. It's good to know how we got it wrong so we don't make the same mistakes again.

Talking with @accessiblewebuk, large text is actually 18.66px (14pt) for bold and 24px (18pt) for non bold.

We've prioritised this now, but aren't sure what the new colours should be.

I've had a go darkening the colours so they meet our 4.5:1 minimum contrast requirement. HMRC is a very minor change, whilst DEFRA is more significant.

Guessing these should go as 'websafe' versions whilst leaving the real deparment colour alone.

HMRC: #008670 (contrast 4.52:1 from 4.47:1)
DEFRA: #008938 (contrast 4.53:1 from 3.37:1)

Examples:

HMRC before:

HMRC after:

Defra before:

Defra after:

NB: I've not audited every department colour. There may be additional departments with issues that haven't been spotted.

Just going to reopen this since there's potentially more departments that Ed didn't notice, so we should close this once we're confident they're all accessible.

I'd like to include some automated tests to check each text colour value in this Sass list: https://github.com/alphagov/govuk_frontend_toolkit/blob/master/stylesheets/colours/_organisation.scss#L75

Here's a pure Sass way of calculating colour contrast:
https://gist.github.com/voxpelli/6304812

It has a method of warning if contrast is below a certain ratio:
https://gist.github.com/voxpelli/6304812#file-_contrast-scss-L48

That Sass method is supported by @voxpelli at https://github.com/voxpelli/sass-color-helpers

@fofr that works if you are sure they are only being used against white (or you have a list of colours they will be used against. Then it need to be made clear in any statement what combinations have been tested.

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

Since we support $panel-colour there's an argument to checking all our colours against that - in effect requiring a slightly higher contrast than 4.5:1 - roughly 6:1 from a quick test.

This is where I got to with a proof of concept on raising Sass warnings. It doesn't currently work because it's not loading in the Sass files from the colour helpers correctly, but it should do what we want:

https://github.com/alphagov/govuk_frontend_toolkit/compare/sass-warn

@fofr You need to add a new loadPathin the grunt-contrib-sass settings:

govuk_frontend_toolkit/Gruntfile.js

Line 49 in ef06147

'./stylesheets'

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 voxpelli/sass-color-helpers#5, so a good idea to upgrade to version 2.0.3.

PR to protect against poor contrast in the future:
#374