The quick brown fox jumps over the lazy dog
Background
#
Text
px
#

Who can use this color combination?

Contrast Ratio

8.41:1

WCAG Grading

AAA

AAA

Regular Vision (Trichromatic)

Can distinguish all three primary color, little to no blurriness

What I see

68%

affected

AAA

Protanomaly

Reduced sensitivity to red - trouble distinguishing reds and greens

What I see

1.3%

affected

AAA

Protanopia

Red blind - Can’t see reds at all

What I see

1.5%

affected

AAA

Deuteranomaly

Reduced sensitivity to green - Trouble distinguishing reds and greens

What I see

5.3%

affected

AAA

Deuteranopia

Green blind - Can’t see greens at all

What I see

1.2%

affected

AAA

Tritanomaly

Trouble distinguishing blues and greens, and yellows and reds

What I see

0.02%

affected

AAA

Tritanopia

Unable to distinguish between blues and greens, purples and reds, and yellows and pinks

What I see

0.03%

affected

AAA

Achromatomaly

Partial color blindness, sees the absence of most colors

What I see

0.09%

affected

AAA

Achromatopsia

Complete color blindness, can only see shades

What I see

0.05%

affected

AA

Cataracts

Clouding of the lens in the eye that affects vision

What I see

33%

affected

AAA

Glaucoma

Slight vision loss

What I see

2%

affected

AA

Low Vision

Decreased and/or blurry vision (not fixable by usual means such as glasses)

What I see

31%

affected

Situational Events

AA

Direct Sunlight

Simulating the effect of direct sunlight on a phone or screen

What I see
AAA

Night Shift Mode

Simulating the effect of night mode on a phone or screen

What I see

What is whocanuse.com?

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.

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! Feel free to fork the repo and submit a PR with any helpful additions or changes.

Created & maintained by

Corey@CoreyGinnivan