Your text contrast advice ruins legibility and fails ACAG

[kevinmarks]

Making text #666 on white fails ACAG AAA. (contrast ratio 5.7) Making text #666 on #eee does too (contrast ratio 4.9) Making code text #a7adba on #f5f7f9 fails WCAG 2.0 entirely (contest ratio 2.1)

Sabotaging contrast like this does not help readers at all.

[ericwbailey]

Hi there, I'm just another internet rando who cares about accessibility falling out of the sky to say something. While I do agree that accessibility concerns should be baked in from the very start of the design process, I think that there's a far more constructive way to structure that comment.

Treating people who are unaware of a11y issues like this only really furthers a lot of negative stereotypes about compliance work and, in my opinion, only really embitters those who otherwise might be open to solving the issue. Again, I believe what you said is legitimate criticism, but the phrasing could use some work.

This is a very cool project that's clearly had a lot of work and thought put into it—it would be great to see it not only address the issue, but also turn it into an additional point to learn.

[kevinmarks]

Is there any research support for "Black text on a white background can be harsh on the eyes. Opting for a softer shade of black for body text makes the page more comfortable to read."?

I see this sentiment widely expressed, but have never seen anything justifying it, and formal advice on contrast says the opposite.

[ericwbailey]

I don't disagree—that's what a proper ratio is for. Achieving it enables the author to make aesthetic choices relevant to the design's content, so long as they're meeting acceptable compliance criteria.

[ghost]

This is a nice basic typography guide. However: low contrast can be super annoying. Depending on screen quality, screen brightness and lighting conditions #555 on white can be very hard to read. Github's #333 seems ok though.

In the past some people used to build websites for a specific screen resolution. I think reducing contrast is a similar trap. It might be great on your high quality apple screen but unreadable on my thinkpad or someone's cheap benq screen.

Edit: So maybe playing with the basic text color and contrast shouldn't be encouraged by a introductory guide, but rather be left to more advanced web design.

[abacaj]

This is just an intro, and should be consumed as such. By no means does failing the ACAG actually matter here.

Appreciate the work.

[kevinmarks]

Of course it matters. The step from "make it more legible" to the next one clearly makes it less legible. This is not a good thing to be teaching people to do by default.

On 27 Jul 2016 9:12 am, "Anton Bacaj" notifications@github.com wrote:

This is just an intro, and should be consumed as such. By no means does failing the ACAG actually matter here.

Appreciate the work.

— You are receiving this because you authored the thread. Reply to this email directly, view it on GitHub https://github.com/jgthms/web-design-in-4-minutes/issues/1#issuecomment-235636422, or mute the thread https://github.com/notifications/unsubscribe-auth/AAGCwJUTmktyPfyGJXMdLcasOGqHCuHbks5qZ4NUgaJpZM4JVcqh .

[thewarpaint]

I don't think anyone here disagrees with the message. The delivery, on the other hand, could have been done in a more... polite way.

Sabotaging a helpful, interesting message like this does not help readers at all.

[rdunk]

Grey text on a white background is a design choice which has unfortunately been misinterpreted by some as a blanket method for improving readability and so has become something of a design trend.

It is a valid solution for improving readability by providing contrast between distinct elements, for example a black heading alongside a grey subheading or body text can improve readability by clearly signalling that the two elements are separate. Just as scale, spacing and text weight are also used as devices for improving readability by providing contrast. This is a standard tenet of design, providing the required amount of contrast between elements in order to facilitate fluid navigation of content.

Using grey text alone on a white background doesn't automatically improve readability, however as long as the contrast ratio meets the generally accepted minimum accessibility requirements then it can be chalked up as a perfectly valid aesthetic decision, as long as it is understood as such. Whilst I understand the good intent of the author, it is frustrating to see this particular design myth perpetuated.

[Swizz]

I am interested about the color contrast and constraints. But the jgthms small guide take juste a litle about that. Do you have any ELI5 reads about that ?

[ericwbailey]

@Swizz: Here's an introductory article on WebAIM about low vision conditions. WebAIM is a great general resource for accessibility concerns—it's well-worth spending an hour or two perusing if it's something you're interested in.

A kind of tricky thing I wish I knew when I was getting started is that contrast alone won't necessarily guarantee compliance. Type size can also be a factor, where certain color combinations won't be apparent when smaller sizes are used.

If you're interested in adding some tools into your toolbox, here's a few of my favorites:

• Lea Verou's Contrast Ratio checker
• The NoCoffee Chrome extension
• Michel Fortin's Sim Daltonism
• Donielle Berg and Adrian Rapp's Color Safe

Another thing to consider is that if you're using a build system such as Gulp or Grunt, there are tools that can automatically warn you if low contrast colors are being used. Manual spot checks will also be needed to see component colors in context, but it can provide a nice just-in-time warning.