From 1c5557b42cd79745a78bfeaea26aa483cb46baa6 Mon Sep 17 00:00:00 2001
From: Jon Kirwan <87758239+jon-kirwan@users.noreply.github.com>
Date: Mon, 6 Jun 2022 15:29:51 +0100
Subject: [PATCH] Change colour palette in graphs to match GSS guidance

---
 CHANGELOG.md                                      |  1 +
 .../components/govspeak/_charts.scss              | 15 +++++++++++++--
 .../components/docs/govspeak.yml                  | 13 ++++++-------
 3 files changed, 20 insertions(+), 9 deletions(-)

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:
           </tbody>
         </table>
   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: |
         <table class='js-barchart-table mc-auto-outdent'>
@@ -214,8 +219,6 @@ examples:
               <th scope="col">Grapes</th>
               <th scope="col">Strawberries</th>
               <th scope="col">Plums</th>
-              <th scope="col">Apricots</th>
-              <th scope="col">Pineapples</th>
             </tr>
           </thead>
           <tbody>
@@ -228,8 +231,6 @@ examples:
               <td>24</td>
               <td>10</td>
               <td>62</td>
-              <td>29</td>
-              <td>81</td>
             </tr>
             <tr>
               <td>Numbers outside bar</td>
@@ -238,10 +239,8 @@ examples:
               <td>2</td>
               <td>1</td>
               <td>1</td>
-              <td>3</td>
-              <td>3</td>
-              <td>1</td>
               <td>2</td>
+              <td>1</td>
             </tr>
           </tbody>
         </table>