Accessible colour matrix
- Accessibility
- Tools
When you’re putting a palette of brand colours together, every colour is going to end up sat on top of another one at some point. Checking those pairings one at a time is slow enough that it generally doesn’t happen, and the combinations nobody got round to checking are usually the ones that fail.
This puts the whole palette into a grid against itself. You add your colours as hex values and it works out the contrast ratio for every pairing, then gives each one a rating:
- AAA / AA - passes for body text
- G - graphical elements and large text only
- F - doesn’t pass
Results are shareable by URL. There’s no database behind it, the colours are just stored as URL parameters, so you can send a palette over to somebody as actual evidence rather than just telling them it’s fine.
I wrote a bit more about how this came about, and the bits I found interesting whilst building it, over on Building an accessibility colour matrix.
Build