Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Change bar chart numbers and colours to be accessible #1608

Merged
merged 3 commits into from
Jul 30, 2020

Conversation

injms
Copy link
Contributor

@injms injms commented Jul 16, 2020

What

  1. Add an array to set the colour of numbers on govspeak bar charts with multicoloured bars based on the colour of the bar itself eg: the yellow bar has black text, the red bar has white text etc.
  2. Add an example of a bar chart with multicoloured bars to the component guide for govspeak.

Why

When a number is positioned inside a bar of a barchart, the colour contrast between the background colour of the bar and the default colour of the text (white) isn't high enough in some cases. It should be at least 4.5:1 or above to meet the WCAG 2.1 AA standard and, where possible, 7:1 to meet WCAG 2.1 AAA.

Visual Changes

Before:

Screenshot 2020-07-24 at 16 11 15

After:

Screenshot 2020-07-24 at 16 11 47

@bevanloon bevanloon temporarily deployed to govuk-publis-make-chart-wgkrjc July 16, 2020 15:57 Inactive
@injms injms changed the title Add example of chart with multicoloured bars Change bar chart numbers and colours to be accessible Jul 16, 2020
@owenatgov owenatgov force-pushed the make-chart-colours-readable branch from d497ac1 to 598f04d Compare July 24, 2020 15:33
@owenatgov owenatgov marked this pull request as ready for review July 24, 2020 15:33
@owenatgov owenatgov force-pushed the make-chart-colours-readable branch from 598f04d to 2607a78 Compare July 24, 2020 15:51
Copy link
Contributor Author

@injms injms left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Because I opened this pull request, I can't approve this. But I do approve of this.

Copy link
Contributor

@danacotoran danacotoran left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

👏 does what it's supposed to!

@owenatgov owenatgov merged commit 2056569 into master Jul 30, 2020
@owenatgov owenatgov deleted the make-chart-colours-readable branch July 30, 2020 11:25
@owenatgov owenatgov mentioned this pull request Jul 31, 2020
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

4 participants