Update organisation colours

[querkmachine]

A long-overdue update to our somewhat fairly outdated _colours-organisations.scss file. In addition to adding missing organisations and updating the colours, I've tried to tackle the comments in #1919.

The main colours for all existing organisations haven't changed: reds are still red, blues are still blues (with the exception of UK Export Finance, which has rebranded in the intervening years). The specific shades are different though, as are many of the contrast-safe equivalent colours and shades.

Changes

Changes to code

• Adds a $govuk-new-organisation-colours feature flag to enable the new colour palette.
• Adds a map of 'aliases' from old organisation keys to their new equivalents.
  • This is only intended for internal renames (e.g. if we typo'd a name in a release). Changes due to rebrands or machinery of government changes should be added as a new entry in the colour map, with any defunct predecessor organisations marked as deprecated.
• Updates the govuk-organisation-colour function to produce a warning when a defunct organisation is referenced.
• Updates all contrast-safe colours based on a fixed methodology (more about that below).
• Adds contrast-safe key to colour map and $contrast-safe parameter to the govuk-organisation-colour mixin, to clearly indicate the intent behind them.
  • These replace the now deprecated colour-websafe key and $websafe function parameter, respectively.

Changes to organisations listed

• Adds current government departments that were missing from the colour map, with brand colours from Design102 and contrast-safe variants as determined by the process below:
  • department-for-energy-security-net-zero
  • department-for-science-innovation-technology
  • department-of-health-social-care
  • foreign-commonwealth-development-office
  • office-of-the-secretary-of-state-for-scotland
  • office-of-the-secretary-of-state-for-wales
  • prime-ministers-office-10-downing-street
• Adds government departments that have come and gone since the last significant update to the colour map for historical completeness.
  • department-for-business-energy-industrial-strategy
  • department-for-digital-culture-media-sport
  • ministry-of-housing-communities-local-government
• Adds deprecation messages to defunct organisations, with information on their replacements and current equivalents. See this comment for a list of defunct organisations and their replacements.
• Additionally deprecates the still-existant government-equalities-office. See this comment for why I've opted to deprecate GEO.
• Changes the key names for entries that included 'and', making them consistent with other department key names. The old key names are aliased and will continue to work.
  • department-for-business-and-trade → department-for-business-trade
  • department-for-communities-and-local-government → department-for-communities-local-government
  • department-for-levelling-up-housing-and-communities → department-for-levelling-up-housing-communities
• Significantly changes the colour for two organisations.
  • government-equalities-office changes from purple to blue. At the time the file was last updated GEO was part of the Home Office. It is now part of the Cabinet Office.
  • uk-export-finance changes from dark green to red, to match their present branding.

Determining contrast-safe colours

Previously, there didn't appear to be much consistency in how contrast-safe colours were determined.

As noted in #1919, many of the colours intended to have higher contrast were actually lower contrast than the organisation's brand colour. Some organisations used completely different contrast-safe colours, like having a red brand colour but a blue contrast-safe colour. The selections made for contrast-safe colours appeared to be largely arbitrary.

Rather than try and work around that, I wrote a simple program:

1. Check if the main colour meets 4.5:1 contrast ratio, if it does, don't calculate a contrast-safe colour.
2. Otherwise, reduce the colour's lightness (in HSL colour space) by 5%.
3. Check again. If it does, use it; otherwise, return to 2.

The resulting colours and contrast ratios are on this webpage that I put together.

This does mean that many colours that used to have 'contrast-safe' variants no longer do, as the brand colour already met the contrast requirement. This may be undesirable, as these (usually more muted) variant colours are currently used to style links on GOV.UK differently, and these will now appear identical to the brand colour.

I would argue that we call a duck a duck, and if there is a need for use case-specific variants of the brand colour, we define a process for what they are and explicitly name them as variants or according to their use case.

Possible changes

• I've kept defunct organisations in the file for backwards compatibility and potential historical need (i.e. it being gone doesn't mean it doesn't still have a page on GOV.UK), however we could remove some or all of these. We don't really have a process for deprecating keys within a map to my knowledge, however.

[querkmachine]

If we choose to deprecate organisations that no longer exist, here's a table of how each organisation has been split, merged or renamed.

Deprecated key	New key(s)
department-for-business-energy-industrial-strategy	2023: split to form department-for-business-trade, department-for-energy-security-net-zero & department-science-innovation-technology
department-for-business-innovation-skills	2016: renamed department-for-business-energy-industrial-strategy
department-for-communities-local-government	2018: renamed ministry-of-housing-communities-local-government
department-for-digital-culture-media-sport	2023: renamed department-for-culture-media-sport
department-for-international-development	2020: merged into foreign-commonwealth-development-office
department-for-international-trade	2023: merged into department-for-business-trade
department-of-energy-climate-change	2016: merged into department-for-business-energy-industrial-strategy
department-of-health	2018: renamed department-of-health-social-care
foreign-commonwealth-office	2020: renamed foreign-commonwealth-development-office
ministry-of-housing-communities-local-government	2021: renamed department-for-levelling-up-housing-communities
scotland-office	2018: renamed office-of-the-secretary-of-state-for-scotland
uk-trade-investment	2016: merged into department-for-international-trade
wales-office	2018: renamed office-of-the-secretary-of-state-for-wales

[querkmachine]

I've opted to deprecate the Government Equalities Office from the list of organisations. The GEO is one of the few organisations in the list that is not a ministerial department, and it's the only one that is an agency, being an agency of the Cabinet Office.

Agencies typically use the brand colours of their parent departments, so listing the GEO separately is redundant, as it shares the CO's colours. (It was previously part of the Home Office, which is why the colour currently shipped with Frontend is HO purple.)

[36degrees]

I haven't reviewed the colour changes, only the code changes.

[querkmachine]

I've received some documentation on what the colours are for the current ministerial departments. Will update this PR once I've ironed out some possible wrinkles.

[querkmachine]

I've been in contact with Design102, the design agency unit of the Government Communication Service—who are, as far as I can tell, the most definitive authority we have on the specific brand colours of all government departments.

We have most of the colours now, but there's seemingly some contention over the specific colours used by the new departments (DESNZ and DSIT, specifically). We're still trying to iron those out.

In the meantime, I've plugged what colours we do have into the code I used to generate the contrast-safe colours and push them to a personal repo: https://github.com/querkmachine/hmg-department-colours/ (The DESNZ and DSIT colours are still those from my prior investigation).

You can see the output it produces here: https://querkmachine.github.io/hmg-department-colours/

[tomyems]

I've got some documentation from design102 dated January 2021 published on our intranet that the Home Office purple is now #732282 - would it be possible to include this in the changes? (and will close #3597)

(which should also already be AAA compliant with white text on top)

[stevenjmesser]

We've shared this with @maxgds for review and advice on who might need to see it.

[stevenjmesser]

We're going to raise this with stakeholders on GOV.‌UK, so I'm moving this to blocked until we hear back.

[querkmachine]

We've gone around in little circles on this trying to find someone who considers this to be in their remit—seemingly no one 'owns' these colours or knows who does.

It's been suggested that we should publish comms about the change so that people are aware of it happening and to just release it. We can always update the colours afterwards if someone does spring from the woodwork.

[maxgds]

We've gone around in little circles on this trying to find someone who considers this to be in their remit—seemingly no one 'owns' these colours or knows who does.

It's been suggested that we should publish comms about the change so that people are aware of it happening and to just release it. We can always update the colours afterwards if someone does spring from the woodwork.

It feels like maybe you're the owners... seems like a sensible approach, and the change doesn't feel that controversial to me.

[stevenjmesser]

As well as the usual internal and external DS comms channels, it’ll be worth updating the content community via Basecamp. They’re the people most likely to interact with the organisation pages (when updating new items and new publications).

[colinrotherham]

Hey @querkmachine 👋

I've done some digging and your suggested contrast-safe colour is almost spot on, but mind if I provide a tiny tweak from the Defra brand team?

Please use #008531. It achieves the required WCAG AA standard (and AAA for everything except normal text) and is noticeably closer to actual Defra green (#00A33B) than the proposed darker green.

Although their suggestion shows we're still using #00a33b "Defra green" which is now in the legacy colours in this PR

Are you able to share your Design102 guidance showing where the newly suggested #00af43 came from? Would be good to join the dots

Thanks 🙌

Suggested change

	"department-for-environment-food-rural-affairs": (
	colour: #00af43,
	contrast-safe: #008733
	),
	"department-for-environment-food-rural-affairs": (
	colour: #00af43,
	contrast-safe: #008531
	),

[querkmachine]

#00af43 came from a draft update to the HMG Identity Guidelines that was shared with me last year. As far as I can tell, that update still hasn't been released, so I don't have anything I can forward on that front.

Curiously, the most recent release version of the HMG Identity Guidelines (from 2022) uses #01ab54 as Defra's departmental colour, which is different again.

In the past, individuals from departments have suggested lots of colours for the department brand or contrast-safe variants, some of them wildly deviating from the brand colour or the HMG Identity Guidelines colour.

We don't want to act as the arbiters of what is a correct or incorrect colour. Part of the intent of this PR is to source department colours from the best-source-of-truth (the HMG Identity Guidelines) and use a consistent, programmatic methodology to create the contrast-safe variant (and any other variants that may exist in future).

That's not to say that the methodology used cannot be altered, but if we were to change the methodology for Defra, we'd also want to change it for every other department.

Accepting a one-off change would be anthithetical to our goals here, and keep us stuck in the mire of piecemeal and haphazardly updated organisation colours that we've had for the last several years.

[colinrotherham]

Are you able to share your Design102 guidance showing where the newly suggested #00af43 came from? Would be good to join the dots

Thanks @querkmachine, can you help me join the dots?

I'd like to share the Design102 HMG Identity Guidelines (2022) with the Defra brand team. At the moment they've pointed out the colours in this PR are incorrect, but I'm just the messenger

I'll message on Slack