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

Increase pass rate to two decimal places: #13 #19

Closed ChrisBoon closed 6 years ago

ChrisBoon commented 8 years ago

I've taken a stab at #13 . In this version all the math is done on a ratio rounded to 2 decimal places. The large number that displays the ratio is floored to 1 decimal place. The tooltip shows the 2 decimal place value.

eg: background: white / text color: hsla(200,0%,0%,.414) On current version marks as passed (AA above 18pt). Shows a value of '3' in main bubble. http://leaverou.github.io/contrast-ratio/#hsla%28200%2C0%25%2C0%25%2C.414%29-on-white

On my version marks as fail. Shows a value of 2.9 in main bubble. In tooltip it says 'precise value: 2.96'. https://chrisboon.github.io/contrast-ratio/#hsla%28200%2C0%25%2C0%25%2C.414%29-on-white

Honestly, whilst the code works I'm not sure this is a better experience than what you have now. Figured it was worth coding up and letting people decide though.

patrickhlauke commented 6 years ago

as the rounding issue bubbled up in discussions again... https://twitter.com/accessibleweb/status/981867297584361472

LeaVerou commented 6 years ago

I fixed this by just changing the display to 2 decimal points and flooring instead of rounding. No need to a separate "precise value", that makes the display confusing if you don't see why the ratio is failing.

Thanks for contributing though, and sorry I could not merge this time!

ChrisBoon commented 6 years ago

No problem, I agree it didn't work from a UX perspective. I just coded it up like that as it seemed that was the consensus that was reached in issue #13.

I did consider proposing an alternative where it only showed the extra precision in the main UI when it was close to one of the WCAG thresholds. Never got round to it though.