MCPcopy Index your code
hub / github.com/CoreyGinnivan/whocanuse

github.com/CoreyGinnivan/whocanuse @main

Chat with this repo
repository ↗ · DeepWiki ↗ · + Follow
59 symbols 161 edges 39 files 0 documented · 0%
What it actually does AI analysis from the code graph — generated when you open this
loading…
README
<img alt="WhoCanUse Logo" src="https://whocanuse.com/whocanuse_600.png" width="100" />

WhoCanUse.com

All Contributors

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.

Core symbols most depended-on inside this repo

getWcagScore
called by 3
src/components/getWcagScore.js
formatWcagGuidelines
called by 2
src/components/formatWcagGuidelines.js
getTextColor
called by 2
src/components/control/control.js
hasTextSelection
called by 2
src/components/control/hasTextSelection.js
updatePath
called by 2
src/pages/index.js
linkPath
called by 2
src/helpers/link.js
formatContrast
called by 1
src/components/small-info-bars.js
Layout
called by 0
src/layout/layout.js

Shape

Function 28
Class 21
Method 10

Languages

TypeScript100%

Modules by API surface

src/components/typography.js15 symbols
src/components/icons.js6 symbols
src/pages/index.js4 symbols
src/components/table/vision-table.js3 symbols
src/components/table/vision-table-alt.js3 symbols
src/components/infobars.js3 symbols
src/pages/_app.js2 symbols
src/components/control/control.js2 symbols
src/layout/layout.js1 symbols
src/helpers/link.js1 symbols
src/components/table/vision-row.js1 symbols
src/components/table/vision-row-alt.js1 symbols

For agents

$ claude mcp add whocanuse \
  -- python -m otcore.mcp_server <graph>

⬇ download graph artifact