ShimantaBhuyan / color-contrast

A tool to check for color contrast using APCA
https://www.color-contrast.dev/
MIT License
5 stars 2 forks source link

Request regarding "nice job" and other encouragements #16

Closed Myndex closed 1 year ago

Myndex commented 1 year ago

Hello Shimanta, Love your tool it's very effective and easy to use.

Above your displayed Lc contrast value, you have some nice encouraging phrases like "nice job" or "Great!". I like the positive vibe.

But I'm concerned about some possible misunderstandings as these levels relate to the bronze simple levels, where 45 is indicated for very large text only.

As such I'd like to suggest a minor change or two to the verbiage, to reflect the nature of the contrast level, maybe something like:

    if (absoluteRatio < 15) {
      quality = "INVISIBLE! 😢";
    } else if (absoluteRatio >= 15 && absoluteRatio < 30) {
      quality = "JUST NOTICEABLE 😳";
    } else if (absoluteRatio >= 30 && absoluteRatio < 45) {
      quality = "GETTING BETTER 🤓";
    } else if (absoluteRatio >= 45 && absoluteRatio < 60) {
      quality = "OK FOR BIG TEXT 🙂";
    } else if (absoluteRatio >= 60 && absoluteRatio < 75) {
      quality = "NICE JOB! 😄";
    } else if (absoluteRatio >= 75 && absoluteRatio < 90) {
      quality = "GREAT!! 😊";
    } else if (absoluteRatio >= 90) {
      quality = "BEST!!! 🤩";
    }

Lc 45 is intended for fairly large text, such as larger than 32px.
Lc 60 it's really the bare minimum for most text that's part of the content Lc 75 is the bare minimum for body text, i.e. columns of text, and 90 is preferred.

As for "accessibility master" I'd suggest that's for the more complete silver or gold letters that involve the look up tables and font matching. See the draft guidelines:

APCA Readability Criterion

Thank you for reading, love the tool!

Andy

ShimantaBhuyan commented 1 year ago

Hey, thanks for engaging in this. Got a bit late to respond and work on this. I have updated the messaging surrounding the current contrast values being calculated as per your message. I have also added a footnote, linking to the readability criterion website for the user to get a better understanding. Planning to incorporate the font size related improvements as soon as I can. You can take a look at the site now, these changes are live. Here's the exact commit for your reference.

Thanks for championing this effort around accessibility and building APCA!

ShimantaBhuyan commented 1 year ago

Closed as completed in https://github.com/ShimantaBhuyan/color-contrast/commit/879041289caf1d945d8d4fa6b469e5768588cf78