Skip Navigation

Building an accessibility colour matrix

Having watched several recent talks about web accessibility, I noticed a trend of speakers creating self-made colour matrix testing tools using Excel, Google Sheets or basic HTML table without any interactivity.

I thought why not created a version myself that satisfies the following criteria.

  • Shareable: Provide the ability to share a custom made accessibility colour matrix, without the need for a database.
  • Format Support: Allow the user to input colours in HEX or RGB format.
  • Interactivity: Allow the users to tweak the colour using an on-screen palette in real-time rather than having to copy and paste new hex codes upon tweaking colours.
  • Real time feedback: Ability to see if the colours pass WCAG AA or AAA guidelines in real time, without having to reload a page, clone a spreadsheet.
  • Look relatively modern: though I'm not a graphic designer I wanted the app to look visually appealing

Interesting stuff

Using URL parameters as data structure

As I didn't want to have the hassle of saving information into a database I figured that I could use colour input as URL parameters, akin to a html form being sent using the GET method, not only does this give me the benefit of not having to use a database for storage but power users are able to easily send their design token colours to the URL as a comma separated string. i.e. (#ffffff,#ff0000,#00ff00)

Hashes in URL parameters

Looking back on this it makes total sense, but it originally didn't dawn on me that passing hashes in a URL might not be the best idea. For example a parameter like `url.com?color=#fafafa` would return `color: fafafa` using the JavaScript URL api.

API Endpoint

In addition to this I've created an API endpoint that shares the same background functionality as the front end. This can be found here.

Below are the parameters that can be passed via URL. This can be in hex format (without the hex) and also RGB format.

Hex Format: ?color=a1a1b2&color-2=01020a
RGB Format: ?color=rgb(255,255,255)&color-2=rgb(000,000,333)

Though not complete here is the solution that I developed here still to be added is:

  • Allow for multiple colour formats (Still needs support for RGB colour)