Skip to content

Instantly share code, notes, and snippets.

@minifyre

minifyre/colorblind-gradients.html

Last active May 26, 2021 02:58
Show Gist options
  • Save minifyre/80fdafe6abc746809141417d12b56fee to your computer and use it in GitHub Desktop.
Save minifyre/80fdafe6abc746809141417d12b56fee to your computer and use it in GitHub Desktop.
Download ZIP
A visual representation of different types of colorblindness & their affects on color gradients (filters adapted from this awesome repo at https://github.com/oftheheadland/Colorblindly).
Raw
colorblind-gradients.html
<!Doctype html>
<style>
div
{
background:linear-gradient(to right,
#f00 0%,
#ff0 16.66%,
#0f0 33.33%,
#0ff 50%,
#00f 66.66%,
#f0f 83.33%,
#f00 100%
);
font-size:2rem;
margin-bottom:1rem;
}
.achromatomaly{-webkit-filter:url(#achromatomaly);-moz-filter:(#achromatomaly);-ms-filter:(#achromatomaly);-o-filter:(#achromatomaly);filter:(#achromatomaly);}
.achromatopsia{-webkit-filter:url(#achromatopsia);-moz-filter:(#achromatopsia);-ms-filter:(#achromatopsia);-o-filter:(#achromatopsia);filter:(#achromatopsia);}
.deuteranomaly{-webkit-filter:url(#deuteranomaly);-moz-filter:(#deuteranomaly);-ms-filter:(#deuteranomaly);-o-filter:(#deuteranomaly);filter:(#deuteranomaly);}
.deuteranopia{-webkit-filter:url(#deuteranopia);-moz-filter:(#deuteranopia);-ms-filter:(#deuteranopia);-o-filter:(#deuteranopia);filter:(#deuteranopia);}
.protanomaly{-webkit-filter:url(#protanomaly);-moz-filter:(#protanomaly);-ms-filter:(#protanomaly);-o-filter:(#protanomaly);filter:(#protanomaly);}
.protanopia{-webkit-filter:url(#protanopia);-moz-filter:(#protanopia);-ms-filter:(#protanopia);-o-filter:(#protanopia);filter:(#protanopia);}
.tritanomaly{-webkit-filter:url(#tritanomaly);-moz-filter:(#tritanomaly);-ms-filter:(#tritanomaly);-o-filter:(#tritanomaly);filter:(#tritanomaly);}
.tritanopia{-webkit-filter:url(#tritanopia);-moz-filter:(#tritanopia);-ms-filter:(#tritanopia);-o-filter:(#tritanopia);filter:(#tritanopia);}
</style>
<!--filters-->
<svg id="colorblind-filters" style="display: none">
<defs>
<filter id="achromatomaly"><feColorMatrix type="matrix" values="0.618,0.320,0.062,0,0 0.163,0.775,0.062,0,0 0.163,0.320,0.516,0,0 0,0,0,1,0" in="SourceGraphic" /></filter>
<filter id="achromatopsia"> <feColorMatrix type="matrix" values="0.299,0.587,0.114,0,0 0.299,0.587,0.114,0,0 0.299,0.587,0.114,0,0 0,0,0,1,0" in="SourceGraphic" /> </filter>
<filter id="deuteranomaly"> <feColorMatrix type="matrix" values="0.8,0.2,0,0,0 0.258,0.742,0,0,0 0,0.142,0.858,0,0 0,0,0,1,0" in="SourceGraphic" /> </filter>
<filter id="deuteranopia"> <feColorMatrix type="matrix" values="0.625,0.375,0,0,0 0.7,0.3,0,0,0 0,0.3,0.7,0,0 0,0,0,1,0" in="SourceGraphic" /> </filter>
<filter id="protanomaly"> <feColorMatrix type="matrix" values="0.817,0.183,0,0,0 0.333,0.667,0,0,0 0,0.125,0.875,0,0 0,0,0,1,0" in="SourceGraphic" /> </filter>
<filter id="protanopia"> <feColorMatrix type="matrix" values="0.567,0.433,0,0,0 0.558,0.442,0,0,0 0 0.242,0.758,0,0 0,0,0,1,0" in="SourceGraphic" /> </filter>
<filter id="tritanomaly"> <feColorMatrix type="matrix" values="0.967,0.033,0,0,0 0,0.733,0.267,0,0 0,0.183,0.817,0,0 0,0,0,1,0" in="SourceGraphic" /> </filter>
<filter id="tritanopia"> <feColorMatrix type="matrix" values="0.95,0.05,0,0,0 0,0.433,0.567,0,0 0,0.475,0.525,0,0 0,0,0,1,0" in="SourceGraphic" /> </filter>
</defs>
</svg>
<!-- gradients -->
<div>Trichromacy / Normal</div>
<div class="achromatomaly">Blue Cone Monochromacy / Achromatomaly</div>
<div class="achromatopsia">Monochromacy / Achromatopsia</div>
<div class="deuteranomaly">Green-Weak / Deuteranomaly</div>
<div class="deuteranopia">Green-Blind / Deuteranopia</div>
<div class="protanomaly">Red-Weak / Protanomaly</div>
<div class="protanopia">Red-Blind / Protanopia</div>
<div class="tritanomaly">Blue-Weak / Tritanomaly</div>
<div class="tritanopia">Blue-Blind / Tritanopia</div>
@minifyre
Copy link
Author

minifyre commented Oct 2, 2019 •
edited

View the code in action at: https://gistpreview.github.io/?80fdafe6abc746809141417d12b56fee.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment