ah designs colour-blindness bookmarklets

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?

A bookmarklet is a small snippet of JavaScript code that runs from an in-browser bookmark. In this case, the JavaScript is adding in a small (non-permanent) styling to the content of the page which applies a filter to simulate different forms of colour-blindness.

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 <iframes>.

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:

Bookmark the links to use them on other pages.