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
  • ministry-of-housing-communities-local-government
  • 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
  • department-for-levelling-up-housing-communities
• 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.

[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-innovation-skills	2016: renamed department-for-business-energy-industrial-strategy
department-of-energy-climate-change	2016: merged into department-for-business-energy-industrial-strategy
uk-trade-investment	2016: merged into department-for-international-trade
department-for-communities-local-government	2018: renamed ministry-of-housing-communities-local-government
department-of-health	2018: renamed department-of-health-social-care
scotland-office	2018: renamed office-of-the-secretary-of-state-for-scotland
wales-office	2018: renamed office-of-the-secretary-of-state-for-wales
foreign-commonwealth-office	2020: renamed foreign-commonwealth-development-office
department-for-international-development	2020: merged into foreign-commonwealth-development-office
ministry-of-housing-communities-local-government	2021: renamed department-for-levelling-up-housing-communities
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-international-trade	2023: merged into department-for-business-trade
department-for-digital-culture-media-sport	2023: renamed department-for-culture-media-sport
department-for-levelling-up-housing-communities	2024: renamed back to ministry-of-housing-communities-local-government

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

[romaricpascal]

Thanks for your patience with merging this one @querkmachine, and all the colour hunting that happened before. Looks good to go, only one little nitpick about test name wording, but that won't block approval 🙌🏻

[maxgds]

Having previously said this didn't look controversial, it now seems to have gained a level of controversy. It seems that some - or at least one - department(s) were previously using the standard blue for their links, and are now finding this to be an undesirable update. JP has gathered responses from Trade Remedies Authority, Companies House, Insolvency Service, and Office of the Immigration Services Commissioner. They have said things like users are "finding the red font harder to read" and "it is causing issues for some users" - these Departments all inherit from their parent DBT. Looking at their pages I can see their point, particularly when viewing links that haven't been bolded. I don't want to get into a situation where we do one thing for one set of departments and another for others, so I see a couple of options:

1. Make links default to the standard govuk link colour and use department colours for accents only
2. Make a separate and more suitable colour for links for each department - probably heading towards black but with a hint of the brand colour to it
   I suspect that option 1 would potentially upset departments who are happy with their current branded link colour.
   Is this a decision that should live in with the Design System team, or do we need to take it into the web space only?

I was previously questioning whether the colours were considered fit for linking purposes but I guess we sort of made that decision previously when Beeps presented the screenshots. In light of seeing the red though, I'm less convinced than I was.

[maxgds]

For reference
DBT now:

https://www.gov.uk/government/organisations/department-for-business-and-trade

DBT before:

https://webarchive.nationalarchives.gov.uk/ukgwa/20240402151448/https://www.gov.uk/government/organisations/department-for-business-and-trade