C3 — Now with Tests for Colorblindness

Today I checked in (mostly tested) code to insert a dropdown menu in development, that allows me to toggle eight unique types of colorblindness. View the source code on Github.

Accessibility testing has lots of facets. These include, but are not limited to:
* Keyboard access
* Fine motor skill
* Wayfinding
* Color contrast
* Audio/visual

I’ve been working with accessibility testing and remediation for the last year-and-a-half, and always wanted to make robust color-blindness testing part of my daily work. When PostCSS and PostCSS-colorblind were released, the possibility became a reality.

A few hours and a few GulpJS tasks later, I had what I was looking for. To ensure I practice what I advocate, I rebuild the colorblind CSS every time I save a SCSS file automatically. When the page reloads the baseline main.css file, it also reloads the eight colorblindness stylesheets, and the dynamically populated select menu. Automation is a wonderful thing.

The code is raw, but workable. I’m using it for static HTML/CSS/JS right now, but there’s no reason it can’t be extended for templates, server-side delivery, or JS frameworks like React or Angular.

Accessibility is all our concern. Front-end engineers, architects, and UX personnel can endear themselves to users and testers alike by making this part of their process.