Colors and accessibility • Hacker News Board

Re: Colors and accessibility

#11

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

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

Re: Colors and accessibility

#12

Post by zamadatix » Tue, Mar 12, 2019, 5:30 PM UTC

MayeulC wrote: post #7

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 Oc…

"(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

Re: Colors and accessibility

#13

Post by zamadatix » Tue, Mar 12, 2019, 5:33 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).

Ironically the text is hard to read for those without high DPI displays.

Re: Colors and accessibility

#14

Post by TuringNYC » Tue, Mar 12, 2019, 5:53 PM UTC

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?

Re: Colors and accessibility

#15

Post by haldean » Tue, Mar 12, 2019, 6:13 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'm not colorblind, but this is almost illegible to me: 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

Re: Colors and accessibility

#16

Post by another-dave » Tue, Mar 12, 2019, 6:20 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).

Thought I was just getting old ;) but yes, the thin text was annoying on mobile — harder to read while scrolling through the page

Re: Colors and accessibility

#17

Post by franky47 » Tue, Mar 12, 2019, 6:23 PM UTC

gotland_ wrote: post #11

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 t…

Very nice tool !

Quick suggestion: consider adding user-select: none on the color selection buttons, on mobile it triggers text selection popups.

Re: Colors and accessibility

#18

Post by dwringer » Tue, Mar 12, 2019, 7:10 PM UTC

zamadatix wrote: post #13

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

Ironically the text is hard to read for those without high DPI displays.

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.