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.

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) element that wraps the content of the page and 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 and heavier 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: