Review contrast for common colour schemes to improve a11y

[chris48s]

📋 Description

Refs #5467

Some of our standard colour schemes score quite poorly on contrast for accessibility and could be improved. For example

We should review our most commonly used styles from this perspective. We probably can't rely on only brightness to get amazing contrast on every bespoke colour, but we can probably look at 'presets' or a package like color-contrast-checker to ensure all of these have a decent accessibility score.

The 'inactive' style also performs quite badly:

[runxel]

This one also performs really bad

[chris48s]

Right yes. and are also part of the standard palette

[chris48s]

Spent a bit of time on this.. basically all of our current standard colour combinations score pretty poorly on contrast:

Keeping all the existing backgrounds as they are but switching the text colour from white to black would give greater contrast in all cases and get us up to at least WCAG AA for small (below 18pt) fonts.

If we did that on our badges that would take us from

to something like

which does have more contrast but does seem to 'pop' slightly less. I wonder if tweaking the drop-shadow a bit could improve that? (not really a design person).

[ctcpip]

it would be nice to at least have an option to toggle. so you could preserve the existing behavior, but people could opt-in for WCAG AA compliance if they wanted. alternatively, though not as convenient, would be an additional option to set the text color directly.

[dylanatsmith]

Hi, I’m a designer at GitHub and npm. We’re currently fixing accessibility issues across the npmjs.com site.

One problem that was raised in a recent audit¹ was the contrast ratio of shields.io badges on package readmes². We pull these from GitHub readmes and obviously have no control over their styling.

I’d love to offer design help to find a solution to the contrast issues mentioned above in the thread. We have some precedent for solving for this on GitHub issues labels³, and it looks like this may be true of the shields users specify a custom colour for as well.

If you’re open to it, I can do some visual explorations that might be useful in moving toward (or ruling out) various directions.

Footnotes

1. Example of contrast issue from our accessibility audit
   ↩

2. Example of shields.io badges on axios package readme ↩

3. Examples of issue labels on GitHub where users can choose a background colour and the text colour is dynamically chosen for optimum contrast
   https://user-images.githubusercontent.com/6905903/183891828-bbbf198a-66d6-4ab7-bd58-10509d718676.mov ↩

[calebcartwright]

If you’re open to it, I can do some visual explorations that might be useful in moving toward (or ruling out) various directions.

That would be fabulous @dylanatsmith, thanks so much 🙏 ❤️

[ctcpip]

it's worth noting that WCAG 3 will use a new system APCA (Advanced Perceptual Contrast Algorithm).

as an aside, I ended up creating a11y-badges for exactly this reason. I have yet to update it to use APCA though.

[potremblay]

I also think that it should be addressed. The colour and text should by default be accessible and friendlier without any configuration from the party who using it.

As an example, I use a third party to for my end-to-end testing who return a badge. Should I write to every third party that I use to update the configuration, which will only go to their backlog?

It might seem extreme, but all element on a page should be accessible, not only some.

[nvlang]

Maybe GitHub's own design system could serve as an inspiration for badge colors?

[rybak]

I''ve stumbled upon this issue while trying figure out if text color could be changed. In my example the background color is #00f6eb, for which the brightness calculation from current version of badge-maker/lib/color.js gives 0.67. This results in white text, which is not very readable.

Demo: . This fails Web Content Accessibility Guidelines (WCAG): contrast checker (screenshot).

Spent a bit of time on this.. basically all of our current standard colour combinations score pretty poorly on contrast:

[...]

Keeping all the existing backgrounds as they are but switching the text colour from white to black would give greater contrast in all cases and get us up to at least WCAG AA for small (below 18pt) fonts.

@chris48s, here's a suggestion for WCAG compliance. To choose a compliant foreground color, the contrast ratio of background color with white and black foreground could be calculated. Then choose the color with greater contrast. WCAG website gives formulas for how to calculate the contrast ratio.