In the Web Design & Development and Information Design courses that I teach we often talk about colour-blindness, as it is one (of many) accessibility concerns that designers should consider. To help students see how their work online may be affected, I put together some colour-blindness bookmarklets to help students quickly check their websites.
It is important to note that these are not replications of what a website will appear like to those who are colour-blind, but a simulation.
What is a bookmarklet?
Why a bookmarklet?
I have tried building out other full-webpage tools in the past. A tool where students can load up their website and flip through it entirely within the tool. It does not consistently work well and sometimes outright does not work at all mostly because of more recent prevention of loading content within
As a result, bookmarklets allow students to quickly apply the filter to each page within their own browser, without having to set lax security permissions on their web space.
Try them out
The bookmarklets are available here for you to try out yourself:
- Protanopia filter — less sensitivity to red light.
- Deuteranopia filter — less sensitivity to green light.
- Tritanopia filter — less sensitivity to blue light.
- Achromatopsia filter — unable to perceive colour.
Bookmark the links to use them on other pages.