Review organisation colours #1919
Comments
kellylee-gds
added
🔍 investigation
🕔 days
and removed
awaiting triage
Advice sort from HM Government BrandI flagged this to the HM Government Brand Team, who referred me to Jo Benjafield and Zach Quirk on the accounts team at Design102. Brand colours do undergo change when departments merge or are newly created. Parent department colours usually derive from the former logo colour before departments were moved over to the new crown brand system. Any agencies that sit within a department often take the parent department's colour. The colour codes for each department I've been advised can be found in the online guidelines for each department. Chat with Design102When talking about this issue specifically it seemed that there was limited knowledge about the websafe versions of the logo colour and speculation around whether they needed to be high contrast. They wondered if the colours could be seen as decorative and therefore didn't require a websafe alternative? Design102 will inform us of any changes to department colours so we can update. |
The brand colours are used for text links on the organisation pages, like this: This means they need to meet colour contrast. As I understand it, that's where we use the websafe colour. Non-websafe for borders, or anything 'decorational', websafe for links or anything that otherwise needs to be perceivable. Just to illustrate the two issues with examples… Inconsistency between websafe and non-websafe coloursOn https://www.gov.uk/government/organisations/department-for-international-trade the borders are red ( Maybe this is intentional, but if that's the case should the blue be updated to the new blue Websafe colour sometimes has worse contrast than non-websafeOn https://www.gov.uk/government/organisations/home-office, the borders are the non-websafe |
|
I think the intention for organisations that have If that's the case, it may make sense to change all occurences of |
|
I proposed this some years ago, but thoughts on renaming it to |
|
Outside of the discussion of contrast-appropriate colours... The organisation colours we provide within Frontend, barring the occassional contribution, haven't been updated for some years and don't reflect any departmental rebrandings or machinery of government changes made in the interim. This means our colours are outdated, our class names are wrong, and the GOV.UK folks have had to resort to either mapping modern departments onto different or older class names (e.g. the page for Business and Trade uses the classes of the defunct DIT), writing their own code to add or overwrite Frontend's colours, or using the wrong colours entirely (e.g. DSIT's page uses the old BEIS brand colour, even though this is not the department colour for DSIT). This annoys me more than it probably should. As such, I've collated information from various sources—including Freedom of Information requests, past and present versions of HMG/departmental branding documents, and usage 'in the wild'—in a neat little spreadsheet (internal only). In it, I've also made some suggestions for colours to use should we update our Sass. It's mostly evolutionary, using the colours already present if they're 'close enough' in most cases, but there are some changes and new introductions (like DSIT cyan!) that we should probably make happen if we can!
(This list includes organisations that existed after GOV.UK was created, but which no longer exist, for backwards compatibility.) |
|
Does anyone have any recommendations on making this less toil in future? For example, revisiting class names and colours whenever there are machinery of government changes? What's handy is that we now have a methodology for determining contrast-safe colours (see linked pull request). |
The organisation colours do not currently seem to make much sense, and could do with being reviewed.
They were ported from Frontend Toolkit but have not really been looked at for a long time. (Before Frontend Toolkit, they were in Whitehall and were moved to frontend toolkit when they needed to be used in other GOV.UK apps.)
As I understand it, the 'websafe' colours are meant to be a 'darkened' version of the brand colour, provided where a brand colour would not otherwise meet the 4.5:1 contrast ratio required for text. However, in many cases the defined websafe colour has less contrast than the non-websafe colour.
In two cases, the websafe and non-websafe colours are completely different.
#a03a88(6.1)#9f1888(6.7)#347da4(4.5)#005abb(6.6)#af292e(6.5)#af292e(6.5)#347da4(4.5)#003479(11.9)#37836e(4.5)#009999(3.5)#a03155(6.8)#d40072(5.2)#347ca9(4.6)#003a69(11.6)#008938(4.5)#00a33b(3.3)#405e9a(6.4)#002878(13)#005ea5(6.7)#cf102d(5.2)#398373(4.5)#006c56(6.4)#37807b(4.6)#00beb7(2.3)#2b7cac(4.6)#009ddb(3.1)#39836e(4.5)#00ad93(2.8)#406e97(5.4)#003e74(10.8)#9325b2(6.5)#9325b2(6.5)#347da4(4.5)#0076c0(4.8)#008670(4.5)#009390(3.8)#832322(9)#af292e(6.5)#9440b2(5.8)#9325b2(6.5)#5a5c92(6.2)#4d2942(12)#5a5c92(6.2)#231f20(14.4)#3e598c(7)#002663(13.8)#005ea5(6.7)#002663(13.8)#005f8f(6.9)#317023(6)#c2395d(5.2)#9c132e(7.6)#405c8a(6.7)#002663(13.8)#005ea5(6.7)#005747(8.6)#005ea5(6.7)#c80651(5.8)#7a242a(9.6)#a33038(6.9)Tasks
The text was updated successfully, but these errors were encountered: