Colors and accessibility

#1

Post by reimertz » Tue, Mar 12, 2019, 3:19 PM UTC

Re: Colors and accessibility

#2

Post by airstrike » Tue, Mar 12, 2019, 4:35 PM UTC

I love the concept, but I would appreciate if they provided some more color around the WCAG standard it uses.

I also don't understand how #EB8521 or #00BBC9 could outright fail even the Headlines test when they're so clearly legible, which makes me think maybe this WCAG standard is not what I really want to optimize for, thank you very much.

Re: Colors and accessibility

#3

Post by CharlesW » Tue, Mar 12, 2019, 4:48 PM UTC

airstrike wrote: post #2

I love the concept, but I would appreciate if they provided some more color around the WCAG standard it uses. I also don't understand how #EB8521 or #00BBC9 could outright fail even the Headlines test when they're so clearly legible, which makes me think maybe this WCAG standard is not what I really want to optimize for, thank you very much.

> I also don't understand how #EB8521 or #00BBC9 could outright fail even the Headlines test when they're so clearly legible…

…to you, in (I assume) good or great viewing conditions. For other folks, and/or in challenging viewing conditions, they'll be significantly more difficult to read than higher-contrast options.

Re: Colors and accessibility

#4

Post by otterpro » Tue, Mar 12, 2019, 4:58 PM UTC

It is just me, or is it hard to read this website? I'm reading this website fullscreen on 22" monitor, and it's still too hard to read, as I find the main text (Raleway 16pt) too thin. Also the text changes sizes dramatically, from 16px (main text) to 22px (quote) to 13px (sub-text).

Re: Colors and accessibility

#5

Post by gotland_ » Tue, Mar 12, 2019, 5:00 PM UTC

airstrike wrote: post #2

I love the concept, but I would appreciate if they provided some more color around the WCAG standard it uses. I also don't understand how #EB8521 or #00BBC9 could outright fail even the Headlines test when they're so clearly legible, which makes me think maybe this WCAG standard is not what I really want to optimize for, thank you very much.

Hi, Anton, the creator of Color.review here.

I can agree that WCAG guidelines are a bit harsh sometimes but it makes sure that everyone have a good chance to view the content. Eyes, colors & computers interact in complex ways.

Also, in many countries, by law, you have to follow WCAG, specially for the public sector.

If you are interested how and what values W3 have chosen you can read more here: https://www.w3.org/WAI/WCAG21/Understanding/contrast-enhance...

Don't fully understand what you mean by providing "color around the WCAG".

Re: Colors and accessibility

#6

Post by gotland_ » Tue, Mar 12, 2019, 5:09 PM UTC

otterpro wrote: post #4

It is just me, or is it hard to read this website? I'm reading this website fullscreen on 22" monitor, and it's still too hard to read, as I find the main text (Raleway 16pt) too thin. Also the text changes sizes dramatically, from 16px (main text) to 22px (quote) to 13px (sub-text).

If anyone else have a problem reading the text, please let me know! Otterpro, if you want, send your browser specs to me at robsarve@gmail.com and I will check if anything strange is going on.

Also, the color & background of the article changes when you use the color-picker to give you more visual feedback of the selected colors.

/Anton - creator

Re: Colors and accessibility

#7

Post by MayeulC » Tue, Mar 12, 2019, 5:13 PM UTC

I had this issue [1] where a piece of software (GNU octave) would adapt foreground text color to my (dark) theme, while the background would not, thus ending up unreadable. The issue was exacerbated by the fact that colors could be picked by the user.

I would have liked a simple way to automatically adjust the colors. Are the formulas behind the site available somewhere? That would make a nice utility function for Octave as well :)

[1]: https://savannah.gnu.org/bugs/?func=detailitem&item_id=53995

Re: Colors and accessibility

#8

Post by airstrike » Tue, Mar 12, 2019, 5:15 PM UTC

gotland_ wrote: post #5

airstrike wrote: post #2

I love the concept, but I would appreciate if they provided some more color around the WCAG standard it uses. I also don't understand how #EB8521 or #00BBC9 could outright fail even the Headlines test when they're so clearly legible, which makes me think maybe this WCAG standard is not what I really want to optimize for, thank you very much.

Hi, Anton, the creator of Color.review here. I can agree that WCAG guidelines are a bit harsh sometimes but it makes sure that everyone have a good chance to view the content. Eyes, colors & computers interact in complex ways. Also, in many countries, by law, you have to follow WCAG, specially for the public sector. If you are interested how and what values W3 have chosen you can read more here: https://www.w3.org/WA…

Thanks! Appreciate the link.

> Don't fully understand what you mean by providing "color around the WCAG".

I suppose that was a bad attempt at a pun... I've changed the wording slightly to make it more obvious ;-)

Re: Colors and accessibility

#9

Post by [deleted] » Tue, Mar 12, 2019, 5:27 PM UTC

[deleted]

Re: Colors and accessibility

#10

Post by kaycebasques » Tue, Mar 12, 2019, 5:28 PM UTC

Chrome DevTools has a feature similar to this: https://developers.google.com/web/updates/2019/01/devtools#A...

AAA line was added in v74. AA line has been there since v65: https://developers.google.com/web/updates/2018/01/devtools#c...

The Audits panel (powered by Lighthouse, which in turn is powered by aXe for the a11y audits) also has an audit ("Background and foreground colors do not have a sufficient contrast ratio") that checks the contrast ratio of all text nodes on a page. In other words you can automate this check.

Disclosure: I write the DevTools and Lighthouse docs.