Introducing Colorfuzz

Colorfuzz is the simple accessibility color blindness testing site.

Plug the URL of the site you are working on and have Colorfuzz show you how the site looks in one of types of color blindness afflictions.

Types of color blindness

Color blindness reference, here’s a regular color wheel illustration:

Color wheel

Deuteranomaly is a red-green color-blindness. Affects 5.35% of the population.

Color wheel as seen with someone with Deuteranomaly

Protanomaly means a missing the L-cone, different intensities of red light. Affects 1.11% of the population.

Color wheel as seen with Protanomaly

Deuteranopia is a red-green color blindness due to missing M-cone. Affects 1.1% of the population.

Color wheel seen with Deuteranopia

Protanopia is a type of red-green color-blindness. Affects 1.03% of the population.

Color wheel as seen with Protanopia

Tritanopia is a blue-yellow colorblindness due to missing S-cone. Affects <1% of the population.

Color wheel seen with Tritanopia

Achromatopsia is rod monochromacy. Affects 0.003% of the population.

Color wheel seen with Achromatopsia

Why build Colorfuzz

I built Colorfuzz for a few reasons. A couple of them:

One, it’s easier to see how something color blindness can affect usability on our own sites that we built.

Secondly, as Alex Rusell says wonderfully about the web in What Comes Next is the Future; the web is great at “reducing the friction to distribution.”

That means using something that one could use and share quickly with a click or a link, easily wins over something that involves installing or setting up before they can use. And maybe if it is that easy to use, it helps accessibility advocates convince others on their teams to build more open sites.

Browser support

Colorfuzz makes use of iframes, JavaScript, and SVG filters.

Iframes

Colorfuzz makes use of pulling in sites for testing via an iframe. In the old days, web authors could use a JavaScript pop-out script to block sites from locking them into an frame. Now, there’s server level prevention with X-Frame-OPtions HTTP response headers.

You probably won’t get a site to load if it’s a site like Amazon.com or Microsoft.com or any site that wants to avoid clickjacking. Which is, like, every site really.

SVG filters

Using SVG filters, support is universal. The speed in which the filters are applied may be determined by your machine speed or browser rendering time. I’ve noticed extreme lag on mobile devices. More on this soon!

[caniuse feature=”svg-filters”]

JavaScript

Makes light use of JavaScript for the user experience/user interface. Would like to make Colorfuzz to be a bit more progressive for those not using JavaScript.


Originally published at Christopher Schmitt.