coreyginnivan / whocanuse Goto Github PK

WhoCanUse is a tool that brings attention and understanding to how color contrast can affect different people with visual impairments.

Home Page: https://whocanuse.com/

License: MIT License

JavaScript 87.67% CSS 12.33%

a11y accessibility-service accessibility color contrast-ratio

whocanuse's Introduction

WhoCanUse.com

What is WhoCanUse?

It's a tool that brings attention and understanding to how color contrast can affect different people with visual impairments.

The Web Content Accessibility Guidelines (WCAG) covers a wide range of recommendations for making Web content more accessible. Just a tiny part of making the web more accessible is accommodating for those with a form of blindness or low vision.

The standard grading system is a great start, but I thought I'd try to humanize the people who are affected by the different grades.

What is WhoCanUse? Where did you get the info from?

The percentages are sourced from both colour-blindness.com and Vision Australia. P.S. You're both the best, thankyou ✌️

Your maths is off, it doesn't add up to 100%...?

Good eyes! (haha) The population data provided are estimates for individual impairments, and don't cover the vast amount of visual impairments in the world. This is to give you not just an understanding of how color contrast affects different people but also who it can affect.

I'm fascinated by how this works, can you tell me more?

Of course! There's a few stages to get to this point. First we figure out the contrast between two HEX values. For this we're using a plugin called chroma.js - this does the heavy lifting for us. Once we have the ratio (and using font size and font weight) we can apply a grade to that specific color combo.

For the color blindness options we're using another plugin aptly called Color-blind that converts our HEX codes in to ones that would be seen by people with the different impairments, then we can apply our same process to obtain the color ratios and determine their grade.

For cataracts, glaucoma, low vision, and the situational events I've personally created simulations to help identify their rating.

What does a failing grade mean?

The grading uses a combination of color contrast, text size and text weight. A fail simply means that the color combination offers some visual strain to the person seeing it and should be avoided if possible.

Can I help contribute?

Absolutely! This project follows the all-contributors specification. Contributions of any kind are welcome!

Check out CONTRIBUTING.md for more info.

whocanuse's People

Stargazers

Watchers

Forkers

jackbush jennyqi jessbudd rbeatty mannionaco dashdashzako line47 alysia-dillon cloudfour aesyondu firede jakeginnivan labinatorsolutions vahlcode phild-fbo ilicmarko cultureamp polymath-is sajanglass wahlephilipp 06b andreswadley aadarshjr123 benmckay bhartisharma01 school-meal-mapper mavannkas imayuyu alibekmaz myndex dewanand7 lidwineteharuru-dev y4yogesh olegstepanovux taisho 3l3gant-cod3s rgembalik muellerphilipp phudit-2547 alexrogalskiy kkpan11 dexit bi-catalyst onlinecreation sertordom cecicoding

whocanuse's Issues

Dynamically create color comparison image for social sharing

Right now, you get a generic OpenGraph preview image when you share a WhoCanUse link in a chat client or social network. Here's what I get when sharing a comparison between #0078c2 and #ffeb38 (https://www.whocanuse.com/?bg=0078c2&fg=ffeb38&fs=16&fw=):

It would be cool if the image preview for the URL's specific color combination was dynamically generated so that shared link unfurls showed the colors and contrast ratio information like 11ty's Rainglow demo does:

The image it generates for #048e86 (https://rainglow.zachleat.dev/048e86/):

How it appears in social share previews:

This is accomplished using 11ty's serverless plugin on Netlify alongside 11ty's OpenGraph image API. It seems like it might be possible to create a new layout to use with 11ty's API or a similar one, but I'm not familiar with Vercel and have no idea how feasible it is to do either/both of these on there?

Can't reach the bottom of the left side color picker.

On a low res monitor

Width: 1360
Height: 768
Device Pixel Ratio: 1

Display Dimensions:(width x height) 14.2" x 8.0"
Screen Diagonal: 16.3" Screen

I am unable to get to the bottom of the left side color picker as the no scroll option.

On high res

Width: 3840
Height: 2400
Device Pixel Ratio: 2.5

Display Dimensions:(width x height) 16.0" x 10.0"
Screen Diagonal: 18.9" Screen

I can see this.

Font size not recognised in URL string

When amending the font size e.g. to 16px the query string does not appear to carry this with it and it always defaults to 20px.

Having more than 8 or more characters breaks the simulation results

Avoid back button trap by using `replaceState`

This tool is awesome! Nice work Corey!

I was testing it out and noticed that if you change your colors a number of times, then you have to use the back button an equal number of times to exit back out of the website.

I think it would be better if you only had to use the back button once to exit, regardless of how many changes you'd made.

I think this could be achieved by changing pushState to replaceState in updatePath. If I opened a PR for that would you be open to merging it in?

Thanks!

How does astigmatism figure into your ratings?

I agree with the posting at https://jessicaotis.com/academia/never-use-white-text-on-a-black-background-astygmatism-and-conference-slides/ It notes that light text on a dark background can be hard to read. The examples in her article match my experience: I do see ghost images of the glyphs that interfere with readability. So my question:

Does your rating system incorporate a factor for astigmatism? (I imagine that smaller fonts would suffer more...) Many thanks.

There a way for another tool to leverage your work?

I've got this project https://github.com/GoogleChromeLabs/ProjectVisBug and I'd love to enhance the accessibility hover tooltip with the information your site is currently displaying.

Give it a try by visiting the tool sandbox http://visbug.web.app and picking the accessibility tool from the left toolbar and hovering on things with color you want to compare. Imagine it was that easy to see the information you've uncovered right there in the moment.

thoughts!?

Add SAPC support

https://github.com/Myndex/SAPC/tree/master/JS

Can’t Copypaste Colors

I tried to copypaste a hex color without the # into the foreground and background color fields, but it won’t work.

My Environment
Safari 13.0.3
macOS 10.15.1

Input field text color frequently disobeys WhoCanUse's own color-contrast recommendations

WhoCanUse sets the text color of its input fields to white on dark backgrounds and black on light backgrounds:

Hilariously, the function used for this frequently disagrees with WhoCanUse's own contrast recommendations. In the above example, it placed white text on the #169155, even though WhoCanUse assigns that color combination a FAIL rating for all but a tiny minority of color-blind users. It should have chosen a black text color --- that combination gets an AA rating.

Personally, I think that the white text is actually a little more readable against the green background than black text. But the whole point of this website is to teach people like me (and the misguided designers who create inaccessible products like this) that we can't rely on our eyes to tell us which color combinations have the best contrast. To maximize accessibility and inclusion, we must defer to the WCAG contrast function, so the input field should use the WCAG contrast function as well.

Contributors

@all-contributors please add @CoreyGinnivan for design, code
@all-contributors please add @JakeGinnivan for infrastructure, code
@all-contributors please add @MadeByMike for infrastructure, code
@all-contributors please add @Tombre for code
@all-contributors please add @Logarek for a11y, ideas
@all-contributors please add @stringyland for a11y, ideas
@all-contributors please add @jessbudd for a11y, content

Have small font size better affect low vision types

make font size changes also impact the simulation blocks for vision types

Thanks for this great tool
Would it be possible to control the text size in the simulation blocks on the right (for different vision type) with the size in pixel defined in the left part of the page ?
thank you

How does astigmatism figure into your ratings?

Pass/Fail is misleading

You apply contrast calculations after applying the simulation and base pass/fail results on the adjusted colours. With this you make it seem like #663399 vs #FF99FF fails WCAG, but this is not the case.

Contrast calculation should be done on the original colours only. The 3:1, 4.5:1, and 7:1 contrast ratios already take into account if the end result would be sufficiently visible/readable to people with these visual impairments.

Add ability to check larger font sizes

I have run into an issue where a font is sized at 115px for a specific design, and as of right now the whocanuse only increases to 60px. I would love to be able to check for larger fonts.

33% of the population has cataracts?

This number doesn't seem right. I checked the sources listed and was not able to find this number documented.

Ratio for AAA should be 7:1 rather than 7.5:1

I love whocanuse and am recommending it to all my contacts.

I noticed that the threshold for rating AAA appears to be 7.5:1 on whocanuse, instead of 7:1. According to https://www.w3.org/TR/WCAG21/#contrast-enhanced it is 7.1.

Have I misunderstood? Or if not could the site be updated to rate >7:1 as AAA?

Safari Bug: Demo Area reduces to minimum size when window is reduced in width and expanded

Need Lightness/Hue sliders for the colour inputs

Can't paste values through CMD+V in Safari Mac 13.0.5

Hi there,

like stated in the subject I can't paste a hex value into the input fields with a CMD+V shortcut in Safari 13.0.5. I'm running Safari on Mojave.

Best regards,
Atilla