Colors Optimized for Color-Blind Individuals

Accessibility in Web Development is important and should not be an afterthought. Bang Wong writes a post in Nature , which offers guidelines to make graphics accessible to those with color vision deficiencies.

Figure 1: P and D indicate simulated colors as seen by individuals with protanopia and deuteranopia, respectively.

Figure 1: P and D indicate simulated colors as seen by individuals with protanopia and deuteranopia, respectively.

Here are the colors with copyable RGB and Hex codes:

Color name RGB Hex
Black 0, 0, 0 #000
Orange 230, 159, 0 #e69f00
Sky blue 86, 180, 233 #56b4e9
Bluish green 0, 158, 115 #009e73
Yellow 240, 228, 66 #f0e442
Blue 0, 114, 178 #0072b2
Vermillion 213, 94, 0 #d55e00
Reddish purple 204, 121, 167 #cc79a7

CSS Custom Properties

:root {
    --black: rgb(0, 0, 0);
    --orange: rgb(230, 159, 0);
    --sky-blue: rgb(86, 180, 233);
    --bluish-green: rgb(0, 158, 115);
    --yellow: rgb(240, 228, 66);
    --blue: rgb(0, 114, 178);
    --vermillion: rgb(213, 94, 0);
    --reddish-purple: rgb(204, 121, 167);
}

SASS Variables

$black: rgb(0, 0, 0);
$orange: rgb(230, 159, 0);
$sky-blue: rgb(86, 180, 233);
$bluish-green: rgb(0, 158, 115);
$yellow: rgb(240, 228, 66);
$blue: rgb(0, 114, 178);
$vermillion: rgb(213, 94, 0);
$reddish-purple: rgb(204, 121, 167);
Edit this page on GitHub