From 61c50268c2867a1b110816489a8e37f58e5fb5d5 Mon Sep 17 00:00:00 2001
From: Ian James <ian.james@digital.cabinet-office.gov.uk>
Date: Thu, 16 Jul 2020 16:49:59 +0100
Subject: [PATCH 1/3] Add example of chart with multicoloured bars

---
 .../components/docs/govspeak.yml              | 45 +++++++++++++++++++
 1 file changed, 45 insertions(+)

diff --git a/app/views/govuk_publishing_components/components/docs/govspeak.yml b/app/views/govuk_publishing_components/components/docs/govspeak.yml
index 535be98125..59c9e66c04 100644
--- a/app/views/govuk_publishing_components/components/docs/govspeak.yml
+++ b/app/views/govuk_publishing_components/components/docs/govspeak.yml
@@ -190,6 +190,51 @@ examples:
             </tr>
           </tbody>
         </table>
+  chart_with_colours:
+    data:
+      block: |
+        <table class="js-barchart-table mc-auto-outdent">
+          <thead>
+            <tr>
+              <th scope="col">Number position</th>
+              <th scope="col">Apples</th>
+              <th scope="col">Oranges</th>
+              <th scope="col">Bananas</th>
+              <th scope="col">Pears</th>
+              <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>
+            <tr>
+              <td>Numbers inside bar</td>
+              <td>16</td>
+              <td>48</td>
+              <td>39</td>
+              <td>50</td>
+              <td>24</td>
+              <td>10</td>
+              <td>62</td>
+              <td>29</td>
+              <td>81</td>
+            </tr>
+            <tr>
+              <td>Numbers outside bar</td>
+              <td>2</td>
+              <td>1</td>
+              <td>2</td>
+              <td>1</td>
+              <td>1</td>
+              <td>3</td>
+              <td>3</td>
+              <td>1</td>
+              <td>2</td>
+            </tr>
+          </tbody>
+        </table>
   address:
     data:
       block: |

From c0980b055d047ba4f6ea5d09f4fd2567d944fc84 Mon Sep 17 00:00:00 2001
From: owenatgov <64783893+owenatgov@users.noreply.github.com>
Date: Fri, 24 Jul 2020 15:31:37 +0100
Subject: [PATCH 2/3] Amend colours to comply with contrast requirements

---
 .../components/govspeak/_charts.scss                        | 6 ++++--
 1 file changed, 4 insertions(+), 2 deletions(-)

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 5c152f75d5..7efdaca112 100644
--- a/app/assets/stylesheets/govuk_publishing_components/components/govspeak/_charts.scss
+++ b/app/assets/stylesheets/govuk_publishing_components/components/govspeak/_charts.scss
@@ -29,8 +29,9 @@
   $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-cell-colour: #ebebeb;
-  $bar-outdented-colour: #111111;
+  $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-cell-colour: govuk-colour("black");
+  $bar-outdented-colour: govuk-colour("black");
 
   // CHART STYLES
   .mc-chart {
@@ -140,6 +141,7 @@
         @for $i from 0 to length($bar-colours) {
           .mc-bar-#{$i + 1} {
             background-color: nth($bar-colours, $i + 1);
+            color: nth($bar-text-colours, $i + 1);
           }
         }
 

From 2607a783392e741dc1867e6a76c989009bc3bb91 Mon Sep 17 00:00:00 2001
From: owenatgov <64783893+owenatgov@users.noreply.github.com>
Date: Fri, 24 Jul 2020 16:25:23 +0100
Subject: [PATCH 3/3] Update changelog

---
 CHANGELOG.md | 4 ++++
 1 file changed, 4 insertions(+)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index e8634e6931..3b7318ec17 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -7,6 +7,10 @@
   useful summary for people upgrading their application, not a replication
   of the commit log.
 
+## Unreleased
+
+* Change bar chart numbers and colours to be accessible ([PR #1608](https://github.com/alphagov/govuk_publishing_components/pull/1608))
+
 ## 21.60.0
 
 * Make component auditing more resilient ([PR #1604](https://github.com/alphagov/govuk_publishing_components/pull/1604))