Addition of charting palettes

armstrongb commented 3 years ago

There are separate colour palettes used for charting provided by chart builder in florence, these are specific to charting although some colour re-use from the primary palettes is included.

These are split into two variants:

Primary & Alternate

Primary

Colour value	Name	sass $var	Order
#206095	Ocean blue	`$ocean-blue`	1
#27A0CC	Sky blue	`$sky-blue`	2
#003C57	Night blue	`$night-blue`	3
#118C7B	Emerald green	--	4
#A8BD3A	Spring green	`$spring-green`	5
#871A5B	Beetroot purple	--	6
#F66068	Coral pink	--	7
#746CB1	Lavender purple	--	8
#22D0B6	Mint green	--	9

Alternate

Colour value	Name	sass $var	Order
#206095	Ocean blue	`$ocean-blue`	1
#27A0CC	Sky blue	`$sky-blue`	2
#871A5B	Beetroot purple	--	3
#A8BD3A	Spring green	`$spring-green`	4
#F66068	Coral pink	--	5

Highlight colour for each palette is

Colour value	Name	sass $var	Order
#F39431	Highlight orange	--	--

Note

SASS $vars used above drawn from https://github.com/ONSdigital/dp-design-system/blob/main/src/scss/abstracts/variables/_colors.scss

armstrongb commented 3 years ago

Content from Notion

Introduction

These colours have been developed within the constraints of the ONS website chartbuilder and will be revised in future, when charting capabilities are improved.
Use the colours in the order shown, unless you have good reason to deviate.
Use the primary data vis palette in the first instance, as chart colours become difficult to differentiate if there are more than 5.

Extended

The extended palette is to be used as a backup in limited cases where more colours are needed. Consider changing your chart before you use the extended colours.

Highlight

The highlight colour is set in chartbuilder as a way to highlight a certain category. It does not meet 3:1 contrast ratio against white, so ideally use when overlaid on other colours, e.g. a line chart combined with bar chart.

dandwal commented 3 years ago

Off the back of this, can see we have names for some of the ones that were nameless at the time of implementing the colour vars. Thinking it might be worthwhile us adding some var with those names in the codebase rather than directly using the hex colour value.

Rachel-Price-ONS commented 3 years ago

It's probably worth adding about the colours that don't meet 3:1 contrast ratio. Information from the data vis repo and edited slightly:

Some of the colours do not meet 3:1 contrast ratio against white. If you use the colours for text, such as direct labelling, these need to be made darker. Text must be at least 14pt in bold or 18pt in regular text to use these colours.

Spring green #A8BD3A > #8A9B2E

Mint green #22D0B6 > #1AA590

Highlight orange #F39431 > #F56927

armstrongb commented 3 years ago

Off the back of this, can see we have names for some of the ones that were nameless at the time of implementing the colour vars. Thinking it might be worthwhile us adding some var with those names in the codebase rather than directly using the hex colour value.

Yep that was the intention - just documenting current state of knowledge when raising the issue. ^^

Possibly worth making those sass vars chart specific e.g. $dp-chart-emerald-green as they aren't intended for use in non-chart contexts?

armstrongb commented 3 years ago

It's probably worth adding about the colours that don't meet 3:1 contrast ratio. Information from the data vis repo and edited slightly:

Some of the colours do not meet 3:1 contrast ratio against white. If you use the colours for text, such as direct labelling, these need to be made darker. Text must be at least 14pt in bold or 18pt in regular text to use these colours.

Spring green #A8BD3A > #8A9B2E

Mint green #22D0B6 > #1AA590

Highlight orange #F39431 > #F56927

Are these darkened by a % amount or another way we can maintain these values from the original values?

Rachel-Price-ONS commented 3 years ago

It's probably worth adding about the colours that don't meet 3:1 contrast ratio. Information from the data vis repo and edited slightly:

Some of the colours do not meet 3:1 contrast ratio against white. If you use the colours for text, such as direct labelling, these need to be made darker. Text must be at least 14pt in bold or 18pt in regular text to use these colours.

Spring green #A8BD3A > #8A9B2E

Mint green #22D0B6 > #1AA590

Highlight orange #F39431 > #F56927

Are these darkened by a % amount or another way we can maintain these values from the original values?

I think I did these manually actually, as they are different values away from accessible and I wanted to stay as close as possible to the colour. Could try out a way of doing it more automatically though

ONSdigital / dp-design-system