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.

[tunetheweb]

OK I've updated the master template with he changes as people are going to start needing this soon.

I'm still not 100% convinced on the black labels, but I guess we'll discourage its use to show the primary data (grey) as much as possible. It's a pity Google Sheets doesn't allow you to use an outline colour of black and leave the actualy font colour as the light green.

Rick I've left the old CrUX distribution charts (but labelled them as non-CruX) and created new CrUX ones with the CrUX colours. But they do look a big garish compared to the more pastel-ly tones of the rest of the Web Almanac colour-scheme. Are you sure you want to use the CrUX colours here?

(btw on a mission to write "colour" as much as possible in this issue to try to educate you Americans! 😉 )

[tunetheweb]

Another option is to use the grey colour, which maybe is better as not quite as stark as pure black:

Always risk of getting the numbers confused, but if there is not enough space, such that that becomes a risk, then the secondary numbers should be removed (and, as I say, we probably want to encourage that as much as possible anyway):

Thoughts?

[tunetheweb]

Though using the grey doesn't work if the label flips to the inside :-(

[shantsis]

(btw on a mission to write "colour" as much as possible in this issue to try to educate you Americans! 😉 )

Who said we're all Americans eh? 🇨🇦

Always risk of getting the numbers confused, but if there is not enough space, such that that becomes a risk, then the secondary numbers should be removed (and, as I say, we probably want to encourage that as much as possible anyway):

Having the secondary numbers removed looks odd. Maybe the numbers decrease in size, or we remove both and rely on clicking/focusing on the bars? Or we can pick a different color for inside the bars - such as white text for the gray

[tunetheweb]

Should have said "North Americans" 😁

Those are bad examples of removing numbers as there's clearly enough space for both in those examples.

However, when there's not enough space it can be helpful to remove one set of number labels:

And when there's really not enough space, yes we remove both rather than have tiny numbers that are impossible to read:

[shantsis]

Should have said "North Americans" 😁

Canadians actually spell it as "colour" 😉

However, when there's not enough space it can be helpful to remove one set of number labels

this technically makes sense but at a glance (or if I was tired) I still think I'd misinterpret it. looks good for the last case though

[tunetheweb]

this technically makes sense but at a glance (or if I was tired) I still think I'd misinterpret it. looks good for the last case though

Personally I like it. I think it's clearer to read that chart with one set of labels, rather than the one without, to get a sense of the value of those bars without continually having to scan the eyes but to the axis. So if we can use one set of labels I'd prefer it over none. But sometimes even one set of labels is too much (like the last chart).

But others may differ - and maybe I'm weird and others might be confused like you are? Saying that we didn't get any complaints about this for 2019 or 2020.

[shantsis]

I suppose, but do we get much feedback in general? It’s not something I’d complain about even if I was confused 😅

[tunetheweb]

I suppose, but do we get much feedback in general? It’s not something I’d complain about even if I was confused 😅

Not as much as I'd like! But we do get lots of feedback from various sources (on GitHub, on Twitter, on the chapter comments, with various surveys we send out to contributors...etc).

A big one is authors and reviewers when they are seeing their chapter ready for publication so are very involved in ensuring they are happy with what is being published with their name on it so most go over it with a fine tooth comb. We've had some fun feedback in the past when authors disagree with Almanac conventions regarding spelling, capitalisation and smart quotes!

[shantsis]

Okay, we can leave it be then until we hear otherwise

[rviscomi]

Thanks for your help on this @shantsis. Is there any remaining work for this issue or can we close it?

[shantsis]

We can close it

[tunetheweb]

I'm really not loving the pure black label for the green colors. Think we should move to the same label color for primary and secondary access as suggested in: #2217 (comment)

Any concerns? If not will update the template before any more people create graphs.

[rviscomi]

Reopening to raise an a11y issue with the pie chart colors:

(tritanopia)

(protanopia)

[shantsis]

Is this the pie chart colors I suggested because I got different results in chrome renderer

[mgifford]

Just adding in this color contrast grid of at least some of the colors we use:
https://contrast-grid.eightshapes.com/?version=1.1.0&background-colors=&foreground-colors=%23FFFFFF%2C%20White%0D%0A%23F8F8F8%2C%20Light%20Grey%0D%0A%23A8CABA%2C%20Light%20Green%0D%0A%235C687D%2C%20Dark%20Blue%0D%0A%23FBBC04%2C%20Yellow%0D%0A%2334A853%2C%20Frog%20Green%0D%0A%23FF6D01%2C%20Orange%0D%0A%230072F0%2C%20Blue%0D%0A&es-color-form__tile-size=compact&es-color-form__show-contrast=aaa&es-color-form__show-contrast=aa&es-color-form__show-contrast=aa18