Illustration image about contrasts are misleading users: recommended colours are not contrasted enough

[juliemoynat]

Hello,

In these two articles, there is an image to illustrate what is a text with insufficient colour contrasts and versus what is a text with sufficient colour contrasts:

• https://almanac.httparchive.org/fr/2019/accessibility
• https://almanac.httparchive.org/fr/2019/mobile-web

The image is here: https://almanac.httparchive.org/static/images/2019/accessibility/example-of-good-and-bad-color-contrast-lookzook.png

The right column of the image is telling that the #F56905 orange with white text on it is a recommended colour contrast. But, the contrast ratio between the orange background colour and the white text is 3:1.

In the WCAG accessibility rules, contrast ratio are more complicated than that and this image is misleading users.

• You can have a 3:1 contrast ratio if:
  • Your non-bold text has a font-size of at least 24px;
  • Your bold text has a font-size of at least 18.5px.
• You must have a 4.5:1 contrast ratio if:
  • Your non-bold text has a font-size of less than 24px;
  • Your bold text has a font-size of less than 18.5px.

So, the image is incomplete. To prevent misleading users, I think you should use an image where the recommended colours have a contrast ratio of at least 4.5:1 (or you should explain the entire rule but it can be a little bit long).

I have fixed the image: https://www.lelutinduweb.fr/wp-content/uploads/example-of-good-and-bad-color-contrast.svg

Feel free to use it and modify it because it's a SVG so you can do what you want. To test contrast ratio of the orange, the Tanaguru Contrast Finder tool can be used.

Note: I added a text for the greyscales boxes because it was not clear, in my opinion - as I explained it here: #854

[tunetheweb]

@obto what are your thoughts? Update the image or the text?

I'm leaning with @juliemoynat and think an improved image is the way to go to avoid complicated text.

I've two concerns with the suggested image:

• Is there too much contrast between the "bad" orange, and the "good" orange because the good orange looks almost red or brown? IMHO, the current image shows that small tweaks can make text accessible without dramatically changing the impact for sighted users, whereas the new image loses that message somewhat. That's not a reason, not to address this of course, but just means we may need to play with the colours a bit more to get a good example. And thanks to it being an SVG (thanks @juliemoynat !) that is easy.
• It is currently credited to LookZook but now we've altered it, so do we still credit? Or not? Not sure what relationship you have (if any!) with LookZook @obto and maybe the answer to this is to get them to correct their image too so we can update this AND still credit them.

[foxdavidj]

LookZook is my web consulting company, so updating the graphic is no problem.

But I'm not completely sold that the graphic needs to be updated. The intention and goal behind the graphic was to demonstrate how this generally only requires a small change, and the end result makes it look way better too. But if we decide to use AAA conformance, while more "correct", it looks like a more difficult problem to solve because of how drastic it looks.

Are we really concerned a reader is going to use this as the sole basis to make all their color contrast changes, and never consult the spec/other helpful tools? If so, I'm more in favor of adding a link for where people can read more about how to solve this problem.

[juliemoynat]

The contrast rules I've recalled are AA level of conformance, not AAA. And I think it's a real problem to tell users that a wrong example is a recommended one.

[foxdavidj]

It is a correct example. It's enlarged text which perfectly meets AA levels of conformance. AAA levels for text this large would be 4.5:1. If the text was small, like you mentioned then yes you would need 4.5:1 by default for even AA.

This is just meant to be a singular example to get people interested in looking at their own sites. Not a specification.

Plus, the necessary color contrast you need scales as text grows or stroke sizes increase, and sometimes 4.5:1 isnt even enough. So for someone to really implement this properly there is some education involved which was outside of the scope of the Almanac unfortunately.

[tunetheweb]

I agree with both of you! Let's not get into an argument over this - we're all trying to do right by the users.

And while I agree the Almanac should not attempt to be a specification, I do like the idea of us setting the best example we can set – without needing qualifying text.

I also like the idea of changing this to an SVG as crisper even on large screens, and I also like the addition of the grey scale header as some way towards #856 (though think additional wording would be better there as well).

Could tweak the graphic to bring them slightly closer to address the concern about it being too different if really worried about that? I had those concerns initially, though to be honest, I'm less concerned about that now on a second look.

[juliemoynat]

To be more precise in my opinion, this is an image in a responsive website so we can't be sure about what is the effective font size of text in the image (either in PNG or in SVG). Actually, it is not displayed at its full size by default in desktop (width of 600px instead of 650px) and of course, it is even smaller on a mobile ;-)

[tunetheweb]

Had a crack at this. What do you two think of below?:

That acceptable to both of you as meets 4.5 contrast ratio but perhaps not as big a change in colour (though that's pretty subjective I guess)?

[foxdavidj]

1. Good point on the image potentially being very small if the reader has an old iPhone. I hadn't thought about that
2. Looks pretty good to me, but have a couple suggestions. Made them in the PR