Change colour palette in graphs to match GSS guidance

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
 

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");
 

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>