Chart UI accessibility

[shantsis]

Some accessibility-related things I noticed with the colors + text applied

• There are some instances where white text is used on green bars - for example fonts chapter has a graph where the % is shown as white on the green bar (failing text color contrast) vs accessibility where it's black

• Similar issues with white text on red bars - e.g. media chapter (failing text contrast)

• "heatmap" on the web font page is using a red-green scale, which isn't a color blind friendly option. Color brewer has a list of colour-blind friendly palettes we can pick for a diverging scale, including red-blue

• a lot of graphs have colors placed side by side which may not have sufficient contrast between them. If we add white dividers between the slices/bars/etc it should make it easier to see. E.g. e-commerce chart today. WCAG has some sample techniques on their site.

• generally wondering how the categorial colors are selected, and if we want to use one of color brewer's suggested ones

[tunetheweb]

I did raise this before in #1756 as spotted it while copy editing the Accessibility chapter. So for that chapter I specifically went with black on white (since we were talking about colour contrast, it seemed wrong not to!) but was a bit late to fix all the others. We also try to use the darker colour primarily and the lighter one is backup (though that's not always the case to be fair).

The red is interesting. We specifically flip to white there from black as thought that looked easier to read, but I see white fails colour contrast while black doesn't. So guess that was a bad choice!

There are also some mitigating factors:

• We have detailed descriptions of each chart
• Hovering on charts gives more detail.
• The surrounding text usually discussing the chart.
• When data gets too much we drop the lighter label any way on the charts (example) showing this is not essential text.
• The underlying data is linked from each figure from 2020 onwards.

So while it's not ideal, I don't think it's fair to say the data is inaccessible.

We did say in #1756 that we'd potentially look at changing the colour scheme this year. This sheet is the Data Viz template we give to authors. Could you clone it and make some suggested alterations for discussion @shantsis ?

[rviscomi]

Thanks for highlighting these issues @shantsis!

Updated the pie chart in the data viz template to use white borders between slices. Definitely open to using better colors throughout.

I'm so surprised about the white-on-red color contrast issue. I can tell from the contrast ratio that it definitely is quantitatively worse but to my eyes it just looks much clearer to read. Just me?

+1 to @tunetheweb 's suggestion to apply these suggestions in the data viz template so chapters can clone them correctly this year.

[shantsis]

@tunetheweb Thanks! Sorry for not checking the previous tickets before opening this one :)
I didn't mean to say the chart wasn't accessible, just that it can be improved.

@rviscomi it's not just you, I think it has to do with the saturation to make it appear more friendly.

I did a copy here with some proposed updates: https://docs.google.com/spreadsheets/d/1vaL8HhDBsO9ws0ZP3tEx4YrkiK1LXMicP1MGdTssFbo/edit?usp=sharing
Let me know what you think.

[rviscomi]

For the CrUX-based charts that show fast/average/slow distributions, is it possible to keep the existing color scheme to match how it appears in tools like CrUX Dashboard? I like copying the colors to match the CrUX "branding" and differentiate it from HTTP Archive-based data. Or did you find contrast issues with those?

[shantsis]

Oh I see I didn't notice that. Yeah I think if we add those white divider lines then we should be better off (and correct text colors).

[tunetheweb]

Just had another look at this. I'm not loving the label colour being a different shade of green to the chart itself:

To me either we should change the bar chart to be the same new green - though I think this makes it more difficult to read as can't easily differentiate between the two sets of data:

Or we should make it black (like we did for the accessibility chapter last year)

Or we should just accept that this text is unimportant to meet colour-contrast guidelines due to the mitigating factors given in #2217 (comment)

Either way if a single colour is used, we should aim for the darker one (example).

[shantsis]

I’m in favour of making the text black if anything. The other alternatives we have is great but this seems like an easy fix to do in addition to what we have.

[tunetheweb]

I’m happy with that to. Think it worked well for the Accessibility chapter. And I think most graphs like in my previous comment will drop the labels anyway - those graphs are borderline whether it can handle two labels.

@rviscomi any thoughts on this? Or should we update the template?

As to the red background, I’m not sure. I think I agree with Rick that white looks easier to read than black even if it’s technically a fail. Not sure if it’s just our eyes, or a shortcoming of the maths behind colour contrast? Interesting reading in myth 1 here: https://uxmovement.com/buttons/the-myths-of-color-contrast-accessibility/ Then again I don’t feel massively strongly about so could go with black too.

[shantsis]

It’s true and I’ve seen that article before, but I think it’s safer to lean on the contrast value.
We could also adjust the red Color if we want to make it work with the white but it would be a bit darker

[rviscomi]

I’m in favour of making the text black if anything. The other alternatives we have is great but this seems like an easy fix to do in addition to what we have.

+1

We could also adjust the red Color if we want to make it work with the white but it would be a bit darker

We're still constrained to using the same background red as other CrUX charts so let's darken the foreground color as needed.