forked from a11yproject/a11yproject.com
-
Notifications
You must be signed in to change notification settings - Fork 0
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
copy edits, added resource (a11yproject#645)
* Update 2017-10-18-understanding-colourblindness.md Copy edited body content, added resources, simplified and clarified language. * Update 2017-10-18-understanding-colourblindness.md * Update 2017-10-18-understanding-colourblindness.md * colour > color found another instance that I missed in the first three commits * update link name * added edit attribution
- Loading branch information
1 parent
60641e7
commit f3eecc8
Showing
1 changed file
with
14 additions
and
19 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -1,43 +1,38 @@ | ||
--- | ||
layout: post | ||
title: "Understanding colourblindness" | ||
description: "What is colour blindness, and how can we design with it in mind?" | ||
title: "Understanding colorblindness" | ||
description: "What is color blindness, and how can we design with it in mind?" | ||
author: matthew_higgins | ||
updated_by: emily_lane | ||
published: true | ||
categories: | ||
- Background | ||
--- | ||
|
||
Some peoples' eyes can't tell the difference between certain colours; that's not to say they see everything in greyscale. Total colour blindness is very rare in humans. | ||
Colorblindness is a common genetic condition in which some peoples' eyes can't tell the difference between certain colors. That's not to say they see everything in greyscale— just that many colors seem identical to one another. Total color blindness is very rare in humans. | ||
|
||
Yet, colour vision deficiencies (typically grouped together as "colour blindness") are not rare. Some form of colour blindness affects at least one in twenty people; [Wikipedia has a helpful table](https://en.wikipedia.org/wiki/Color_blindness#Epidemiology), based on [a journal article](https://apfmj.biomedcentral.com/articles/10.1186/s12930-014-0010-3). There are [several different forms](http://www.colourblindawareness.org/colour-blindness/types-of-colour-blindness/). The most common, red-green colour blindness, affects around one in twelve men. | ||
Color vision deficiencies (typically grouped together as "color blindness") are not rare. Some form of color blindness affects at least one in twenty people. [Wikipedia has a helpful table](https://en.wikipedia.org/wiki/Color_blindness#Epidemiology), based on [a journal article](https://apfmj.biomedcentral.com/articles/10.1186/s12930-014-0010-3). There are [several different forms](http://www.colourblindawareness.org/colour-blindness/types-of-colour-blindness/). The most common, red-green color blindness, affects around one in twelve men. | ||
|
||
Colour blindness is less profound than many impairments. Yet, people with colour vision problems often face restrictions on certain activities. This varies around the world. For example, Romania prohibits residents who are colour blind from driving. Yet, the USA doesn't consider colour blindness as a disability, for workplace discrimination purposes. | ||
Color blindness is less profound than many impairments, but people with color vision problems often face restrictions on certain activities. This varies around the world. For example, Romania prohibits residents who are color blind from driving. The USA doesn't consider color blindness a disability because of workplace discrimination purposes. | ||
|
||
I've avoided going into the different types here, as the principles are the same for each. Also, [Wikipedia's article on colour blindness](https://en.wikipedia.org/wiki/Color_blindness) has some excellent descriptions. | ||
Though there are multiple types of color blindness, they are the same in principle. For more information, check out [Wikipedia's article on color blindness](https://en.wikipedia.org/wiki/Color_blindness), which has some excellent descriptions. | ||
|
||
## What does this mean for accessibility on the web? | ||
|
||
Don't rely on colour alone to communicate. As a result, you don't risk making life difficult for colour blind users. | ||
To make sure your site is readable for individuals with color blindness, avoid relying on color alone to communicate. | ||
|
||
Sticking to this is also compliant with the WCAG; guideline [1.4.1 covers making content distinguishable using colour](https://www.w3.org/TR/UNDERSTANDING-WCAG20/visual-audio-contrast-without-color.html). | ||
These guidelines are compliant with the WCAG; guideline [1.4.1 covers making content distinguishable using color](https://www.w3.org/TR/UNDERSTANDING-WCAG20/visual-audio-contrast-without-color.html). | ||
|
||
In practice, you can achieve this without too much extra work. For example, imagine you are using icons to represent tasks the user has outstanding. It might seem logical to show items that need attention in red, and those that are good in green. | ||
In practice, you can achieve this by choosing colors that are easily distinguished from one another, and by adding secondary visualizations for icons and tasks. For example, you're using red and green buttons to represent tasks a user has outstanding. It might seem logical to show items that need attention in red, and those that are good in green. One small change, such as overlaying a check mark icon over the "good" or "completed" items, will help determine which items are approved and which need attention. | ||
|
||
The problem comes for users who can't tell the difference. One small change, such as overlaying a check mark icon over the good items, will help determine which items are good and which need attention. | ||
|
||
Sometimes there is no space to do this. The periodic table, for example, often colour-codes the chemical symbols of the elements. With a huge table with a standardised layout adding more text or symbols might not be practical. | ||
There are cases where this isn't possible. The periodic table, for example, often color-codes the chemical symbols of the elements. When working with tables or other standardised layouts, adding more text or symbols might not be practical. | ||
|
||
## Available Tools | ||
|
||
One option to help with colour accessibility would be to design with colours people with colour blindness can tell the difference between. There are lots of tools for this very purpose available for free on the web, and as browser extensions. Some popular examples include: | ||
There are a number of online tools to help those without color blindness visualize how accessible their designs are: | ||
|
||
- [Colorblind Color + Contrast Picker](http://colorsafe.co) | ||
- [Colorblind web page filter by Toptal](https://www.toptal.com/designers/colorfilter) | ||
- [I want to see like the colour blind Chrome extension](https://chrome.google.com/webstore/detail/i-want-to-see-like-the-co/jebeedfnielkcjlcokhiobodkjjpbjia) | ||
|
||
Using them is pretty simple. You take your web page (or other interface), and run it through the tool. The tools pick out colours that are common in one type of colour blindness, like red and green. Then, the tool will replace the affected colours with one colour. This allows you to see the view the way someone with that type of colour blindness might. | ||
|
||
Since it's possible to measure colour vision, this should give you a good idea of how each type feels. | ||
|
||
Colour blindness is so common, that there are unlikely to be any scenarios where it's not relevant. | ||
|
||
These tools are free, simple to use, and can quickly help you make color-accessible choices. |