Skip to content We're live on Product Hunt today Upvote
install

free tools runs in this tab no account, no upload

free tool

Make a colour pass

How dark does this brand colour have to be to pass 4.5:1?

Keeps the hue and the saturation and moves only the lightness, by bisection, until the pair clears the threshold. What you get back is the same colour, just far enough.

The quick brown fox jumps over the lazy dog, at the size body text is actually set.
#048298 Same hue, same saturation, lightness moved from 43% to 31%.
  • the colour you gave 2.42:1
  • the colour you get back 4.51:1
  • as rgb() rgb(4, 130, 152)

how to use it

  1. Give the colour you wanted to use and the ground it will sit on.
  2. Set the threshold: 4.5 for body text, 3 for large text and for non-text.
  3. Read the nearest passing shade and how far it had to move.

what this page cannot do

This fixes one pair. The extension finds every pair on a live page that fails, which is the list you actually need before you decide the brand colour is the problem.

Tokens in the panel What design tokens is this page actually painting with?