
Colors and accessibility - reimertz
https://color.review
======
kaycebasques
Chrome DevTools has a feature similar to this:
[https://developers.google.com/web/updates/2019/01/devtools#A...](https://developers.google.com/web/updates/2019/01/devtools#AAA)

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

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_
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
Very nice tool !

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

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

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

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

~~~
dwringer
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.

------
TuringNYC
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?

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

~~~
gotland_
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...](https://www.w3.org/WAI/WCAG21/Understanding/contrast-
enhanced#visual-audio-contrast7-resources-head)

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

~~~
airstrike
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 ;-)

