search

siege-media / contrast-ratio

A tool to calculate the contrast ratio between any two valid CSS colors.
https://www.siegemedia.com/contrast-ratio
MIT License
2.45k stars 221 forks source link

Make Accessibile Button #8

Open mgifford opened 10 years ago

mgifford commented 10 years ago

This is a very visually appealing color contrast checker. Often though I end up going to http://webaim.org/resources/contrastchecker/

I do this because it has a simple lighter/darker link on the side which makes it pretty trivial to pick a variation that is just slightly darker than the original. I'm not sure how Webaim does this, but in talking to @mparker17 he suggested that this is something that could be done in a fairly straight forward way using the HSL color space.

It would be great to know given a random foreground color, what is the lightest background color necessary to meet WCAG 2.0 AA & also for AAA.

LeaVerou commented 10 years ago

You can already use hsl() colors and make them lighter/darker with the arrow keys. Might be a good idea to make this easier on other color types though.

FYI using HSL for lighter/darker variants isn't a great idea, as HSL lightness is not a good measure of luminosity (think that yellow and blue both have 50% lightness).

mgifford commented 10 years ago

Ok, so you could do conversion of colors using http://stackoverflow.com/questions/17242144/javascript-convert-hsb-hsv-color-to-rgb-accurately I really hadn't looked at HSL at all before today, but interesting to learn more about it http://www.niwa.nu/2013/05/math-behind-colorspace-conversions-rgb-hsl/

So if what you wanted to do was find the closest WCAG 2.0 Compliant color, what is the best way to suggest a more accessible color? I don't know how Webaim is doing it, but theirs is just too coarse to be useful much of the time. I'd like to have something that gives designers a suggestion that is as close to their original vision as possible (while still meeting WCAG).

gsnedders commented 8 years ago

I wonder if it's worthwhile to make it possible to convert colours between different representations? That would make it easier to use hsl for this, despite its flaws.

LeaVerou commented 8 years ago

Soon, this will be possible via CSS alone. What CSS Color 4 uses atm for the algorithm is HWB.

mgifford commented 8 years ago

That is very cool! Thanks @LeaVerou

I also like the implementation by http://contrast-finder.tanaguru.com/