Embedded Files
In Progress
Color Blindness
Color Blindness
Overview
The average person has two types of cells in their retina that detect light; Rods and cones. Rods detect only light and dark, and they are very sensitive to low light levels.
Cone cells detect color and are concentrated near the center of your vision. There are three cones that are each a different size and correspond with certain colors:
The large cone is sensitive to reds
The medium cone is sensitive to greens
The small cone is sensitive to blues
The brain uses input from these cone cells to determine our color perception.
Color blindess occurs when one or more of the color cone cells are absent, not working, or detect a different color than normal. Nearly 300 million people around the world are affected. For more information, visit:
https://www.aao.org/eye-health/diseases/what-is-color-blindness
Types of Color Blindness
This chart breaks down the different forms of color blindness and their prevalence. The "x" represents which cone is lacking. Colors are that are difficult to distinguish are grouped per each type. For example: Deuteranopia has red and green grouped since those colors can appear to be similar.
Colors as Seen by the Color Blind
This chart shows how major colors look in the main types of color blindness
Color Blindness Tools
The following tools are useful to test the distinguishability between color sets.
https://www.color-blindness.com/coblis-color-blindness-simulator/
Free online tool for uploading images, then applying major types of color blindness: Deuteranopia (Common), Protanopia (Rare), Tritanopia (Very Rare), and even Grayscale.
Installing and running this program alters your screen to emulate the major types of color blindness: Deuteranopia (Common), Protanopia (Rare), Tritanopia (Very Rare), and even Grayscale.
https://davidmathlogic.com/colorblind/
This tool is wonderful for comparing color values. It automatically displays color blindess varient of the three types.
https://webaim.org/resources/contrastchecker/
Plugging color values into this resource will give a readout of their contrast ratio. Note: WCAG 2 level AA requires a contrast ratio of at least 4.5:1 for normal text and 3:1 for large text in terms of readability.
http://instant-eyedropper.com/
This is a color picker tool that can be launched from the taskbar and used anywhere. Not important, just a nice-to-have.
Color Friendly Combinations
Color Friendly Combinations
The following color combinations are color blind friendly. These are a recommendation and can be altered as needed as long as there is no conflict.
Data
Good for charts, and map pins. Works best against a white background.
Blue 80%
hex
#3398B9
rgb
(51, 152, 185)
Orange 60%
hex
#E7A96B
rgb
(231, 169, 107)
Purple 40% Dark
hex
#371748
rgb
(55, 23, 72)
Green 100%
hex
#195E2F
rgb
(25, 94, 47)
Heat Map
Good for background color of table cells with black (#000000) text.
Green 40%
Text
hex
#A3BFAC
rgb
(163, 191, 172)
Yellow 40%
Text
hex
#FEF499
rgb
(254, 244, 153)
Orange 60%
Text
hex
#E7A96B
rgb
(231, 169, 107)
Red 60%
Text
hex
#D77982
rgb
(215, 121, 130)
Page updated
Report abuse