coreyginnivan / whocanuse Goto Github PK

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.

@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

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.

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

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

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.

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

It seems like the form fields are no longer being prefilled from URL parameter values, breaking share links. None of these work for me:

• https://whocanuse.com/?bg=fafafa&fg=246a4e&fs=16&fw=
• https://whocanuse.com/?bg=8e0101&fg=fafafa&fs=18&fw=b

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

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?

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

This is a question/request, not an issue.

Is it possible to localize/translate this tool into different languages? For me, I'd like to contribute to Japanese translation if possible. If yes, could you please give me the instructions? Thanks!

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.

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?

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.

Accessing https://whocanuse.com and pressing the invert button will invert the colors in the UI, but the URL Querystring will display only the (new) background color: https://whocanuse.com/?b=ffffff&c=ffffff&f=20&s=

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

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!

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.