diff --git a/CHANGELOG.md b/CHANGELOG.md index 2d4b674bbc..b3532969cf 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -10,6 +10,7 @@ ## Unreleased * GA4 analytics schema rework ([PR #2864](https://github.com/alphagov/govuk_publishing_components/pull/2864)) +* Change colour palette in graphs to match GSS guidance ([PR #2782](https://github.com/alphagov/govuk_publishing_components/pull/2782)) ## 29.15.1 diff --git a/app/assets/stylesheets/govuk_publishing_components/components/govspeak/_charts.scss b/app/assets/stylesheets/govuk_publishing_components/components/govspeak/_charts.scss index b4ab1416b0..b073e4ee05 100644 --- a/app/assets/stylesheets/govuk_publishing_components/components/govspeak/_charts.scss +++ b/app/assets/stylesheets/govuk_publishing_components/components/govspeak/_charts.scss @@ -25,12 +25,23 @@ $caption-side: top; // Caption alignment. Top or bottom. $key-width: 160px; // Only used by IE. Other browsers get smallest width that fits content + // The following accessible colour palette has been developed to meet the colour contrast requirements for adjacent colours (as set out in WCAG 2.1) + // For charts, the palette should be used instead of the GOV.UK colour palette - https://design-system.service.gov.uk/styles/colour/ + // https://gss.civilservice.gov.uk/policy-store/data-visualisation-colours-in-charts/#section-5 + + $gss-colour-dark-blue: #12436d; + $gss-colour-turquoise: #28a197; + $gss-colour-dark-pink: #801650; + $gss-colour-orange: #f46a25; + $gss-colour-dark-grey: #3d3d3d; + $gss-colour-plum: #a285d1; + // CHART COLOUR SCHEME $chart-border: govuk-colour("white"); // Chart border colour $key-border: govuk-colour("white"); // Key border colour - $bar-colours: govuk-colour("blue"), govuk-colour("turquoise"), govuk-colour("green"), govuk-colour("light-green"), govuk-colour("yellow"), govuk-colour("orange"), govuk-colour("red"), govuk-colour("bright-purple", $legacy: "bright-red"); - $bar-text-colours: govuk-colour("white"), govuk-colour("black"), govuk-colour("white"), govuk-colour("black"), govuk-colour("black"), govuk-colour("black"), govuk-colour("white"), govuk-colour("white"); + $bar-colours: $gss-colour-dark-blue, $gss-colour-turquoise, $gss-colour-dark-pink, $gss-colour-orange, $gss-colour-dark-grey, $gss-colour-plum; + $bar-text-colours: govuk-colour("white"), govuk-colour("white"), govuk-colour("white"), govuk-colour("black"), govuk-colour("white"), govuk-colour("black"); $bar-cell-colour: govuk-colour("black"); $bar-outdented-colour: govuk-colour("black"); diff --git a/app/views/govuk_publishing_components/components/docs/govspeak.yml b/app/views/govuk_publishing_components/components/docs/govspeak.yml index 2ce3616737..a1f9dc76a1 100644 --- a/app/views/govuk_publishing_components/components/docs/govspeak.yml +++ b/app/views/govuk_publishing_components/components/docs/govspeak.yml @@ -181,6 +181,11 @@ examples: charts: + description: | + The Government Statistical Service (GSS) guidance recommends [a limit of four categories as best practice for basic data visualisations](https://gss.civilservice.gov.uk/policy-store/data-visualisation-colours-in-charts/#section-5). + + Note that charts which have up to 7 categories, [chart with colours](http://govuk-publishing-components.dev.gov.uk/component-guide/govspeak/chart_with_colours/preview), for example, will display subsequent bars in `#3d3d3d`, `#a285d1` and the 7th bar in the default colour of `#0b0c0c` and will still meet the colour contrast requirements for adjacent colours. + Charts that have 8 or more categories will display additional bars in the default colour and will not meet colour contrast requirements for adjacent colours. data: block: | @@ -214,8 +219,6 @@ examples: - - @@ -228,8 +231,6 @@ examples: - - @@ -238,10 +239,8 @@ examples: - - - +
Grapes Strawberries PlumsApricotsPineapples
24 10 622981
Numbers outside bar2 1 1331 21