About This hue shall pass
What this tool is
This hue shall pass is an accessibility tool that helps you review and refine your brand's digital colour palette. It shows you a matrix of all possible colour combinations and which ones pass or fail your accessibility criteria. It then helps you make adjustments to unlock more usable combinations.
There are two ways to adjust colour combinations:
- Using the luminance sliders to change values yourself manually.
- Use the wand button to fix a combination that's close to passing. It nudges the luminance just enough to meet your chosen pass criteria.
Each of these adjustments will impact all colour combinations involving that colour. To experiment, you can duplicate a row and make edits without affecting the original colour.
Not every colour combination needs to pass – only those you plan to use together as foreground and background pairs.
This tool calculates contrast ratios using Oklch values. The slider adjusts the luminance (L) value of a colour's Oklch value without altering its hue. The aim is to preserve the brand personality in each colour.
For an approachable intro to colour contrast accessibility, please see WCAG in Plain English. For full details, please refer to the WCAG guidelines.
Why we made it
Most organisations want their websites to be accessible but are often limited by colour palettes that don't specifically prioritise accessibility. Designers can adapt existing colour palettes, gently nudging colour values to increase contrast, or adding new tints and shades to provide additional design options. That work is typically done inside a design tool like Figma. This hue shall pass offers a way to see those changes immediately – in the browser – and review the impact they’d have on your colour palette.
There are plenty of contrast-checking tools out there that highlight the potential problems with your palette but we couldn’t find one that also helps you solve them there and then.
It’s in beta stage
It’s a little bit rough around the edges. If you know how we could make it better, please email us your suggestions.
Thanks!
This tool was inspired by Contrast Grid by Directed Edges and Contrast Finder by Tanaguru.
It uses vanilla HTML and CSS, with support from colordx for the colour manipulation.