4 ms·

Colors and accessibility

81 points by reimertz 8y ago

airstrike 8y ago
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.
- CharlesW 8y ago
  > 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.
- gotland_ 8y ago
  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-enhanced#visual-audio-contrast7-resources-head https://www.w3.org/WAI/WCAG21/Understanding/contrast-enhance... Don't fully understand what you mean by providing "color around the WCAG".
  - airstrike 8y ago
    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 ;-)
- haldean 8y ago
  I'm not colorblind, but this is almost illegible to me: https://i.imgur.com/izGP46r.png https://i.imgur.com/izGP46r.png This is the luminosity of that mapped to grayscale. You can see why it might be difficult for colorblind people to read: https://i.imgur.com/Pyxt1NR.png https://i.imgur.com/Pyxt1NR.png
otterpro 8y ago
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).
- gotland_ 8y ago
  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
- zamadatix 8y ago
  Ironically the text is hard to read for those without high DPI displays.
  - dwringer 8y ago
    On a high DPI screen I still find it a little straining. To me the width is acceptable enough but the color is about as light as I'd want, and a shade of dark blue that strangely blends with the off-axis color-distortion of my inexpensive LCD panel so it makes me feel like my eyes aren't adjusting properly.
- another-dave 8y ago
  Thought I was just getting old ;) but yes, the thin text was annoying on mobile — harder to read while scrolling through the page
MayeulC 8y ago
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 https://savannah.gnu.org/bugs/?func=detailitem&item_id=53995
- zamadatix 8y ago
  "(L1 + 0.05) / (L2 + 0.05), where - L1 is the relative luminance of the lighter of the colors, and - L2 is the relative luminance of the darker of the colors." https://www.w3.org/TR/WCAG20/#contrast-ratiodef https://www.w3.org/TR/WCAG20/#contrast-ratiodef
deleted 8y ago
[deleted]
kaycebasques 8y ago
Chrome DevTools has a feature similar to this: https://developers.google.com/web/updates/2019/01/devtools#AAA 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#contrast 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.
gotland_ 8y ago
Hi everyone, Anton, the creator of Color.review here. 8% of all men have some kind of color blindness, and plenty more people have other visual deficiencies. Even though they represent 100s of millions, we designers & developers often skip making sure that our designs work for everyone. I made Color.review to help with that, believing that with better tooling we can change this behavior and get more people to check their colors. Would love any feedback you have on the project! Also, a litten gem, if you want you can send links to a direct color test. Such as the HN link color & background: https://color.review/check/828282-F6F6EF https://color.review/check/828282-F6F6EF
- franky47 8y ago
  Very nice tool ! Quick suggestion: consider adding user-select: none on the color selection buttons, on mobile it triggers text selection popups.
TuringNYC 8y ago
I like how this tool lets you toggle foreground and background with real text (headlines, sidebars, etc) rather than just a single like. Anyone know of a tool that can also allow you to toggle/change around typefaces this easily in live context?

81 points by reimertz 8y ago

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.

CharlesW 8y ago
> 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.
gotland_ 8y ago
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-enhanced#visual-audio-contrast7-resources-head https://www.w3.org/WAI/WCAG21/Understanding/contrast-enhance... Don't fully understand what you mean by providing "color around the WCAG".
- airstrike 8y ago
  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 ;-)
haldean 8y ago
I'm not colorblind, but this is almost illegible to me: https://i.imgur.com/izGP46r.png https://i.imgur.com/izGP46r.png This is the luminosity of that mapped to grayscale. You can see why it might be difficult for colorblind people to read: https://i.imgur.com/Pyxt1NR.png https://i.imgur.com/Pyxt1NR.png

otterpro 8y ago

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).

gotland_ 8y ago
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
zamadatix 8y ago
Ironically the text is hard to read for those without high DPI displays.
- dwringer 8y ago
  On a high DPI screen I still find it a little straining. To me the width is acceptable enough but the color is about as light as I'd want, and a shade of dark blue that strangely blends with the off-axis color-distortion of my inexpensive LCD panel so it makes me feel like my eyes aren't adjusting properly.
another-dave 8y ago
Thought I was just getting old ;) but yes, the thin text was annoying on mobile — harder to read while scrolling through the page

MayeulC 8y ago

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 https://savannah.gnu.org/bugs/?func=detailitem&item_id=53995

zamadatix 8y ago
"(L1 + 0.05) / (L2 + 0.05), where - L1 is the relative luminance of the lighter of the colors, and - L2 is the relative luminance of the darker of the colors." https://www.w3.org/TR/WCAG20/#contrast-ratiodef https://www.w3.org/TR/WCAG20/#contrast-ratiodef

deleted 8y ago

[deleted]

kaycebasques 8y ago

Chrome DevTools has a feature similar to this: https://developers.google.com/web/updates/2019/01/devtools#AAA 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#contrast 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.

gotland_ 8y ago

Hi everyone, Anton, the creator of Color.review here. 8% of all men have some kind of color blindness, and plenty more people have other visual deficiencies. Even though they represent 100s of millions, we designers & developers often skip making sure that our designs work for everyone. I made Color.review to help with that, believing that with better tooling we can change this behavior and get more people to check their colors. Would love any feedback you have on the project! Also, a litten gem, if you want you can send links to a direct color test. Such as the HN link color & background: https://color.review/check/828282-F6F6EF https://color.review/check/828282-F6F6EF

franky47 8y ago
Very nice tool ! Quick suggestion: consider adding user-select: none on the color selection buttons, on mobile it triggers text selection popups.

TuringNYC 8y ago

I like how this tool lets you toggle foreground and background with real text (headlines, sidebars, etc) rather than just a single like. Anyone know of a tool that can also allow you to toggle/change around typefaces this easily in live context?