Open armstrongb opened 3 years ago
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.
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.
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.
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
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?
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?
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
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
$ocean-blue
$sky-blue
$night-blue
$spring-green
Alternate
$ocean-blue
$sky-blue
$spring-green
Highlight colour for each palette is
Note
SASS $vars used above drawn from https://github.com/ONSdigital/dp-design-system/blob/main/src/scss/abstracts/variables/_colors.scss