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.
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);