Skip to content
Randozi
All wheelsTools

Accessible Gray Finder

Enter a background color and a target ratio. The page searches the 256 neutral grays and returns the lightest gray that still reaches the target on a light background, or the darkest on a dark one, with its exact ratio.

Gray that reaches 4.5:1 on #ffffff

#767676

Ratio 4.5422:1 · the lightest gray that is still dark enough · gray level 118 of 255 · one step on, #777777 gives 4.4781:1

The search covers the 256 neutral grays (R = G = B) on one opaque background. On a light background it returns the lightest gray that still reaches the target; on a dark one, the darkest. The ratio shown is the raw one, not a rounded-up value. Not a certification of conformance.

How it works

  1. Enter the background color as a hex code. White is #ffffff.
  2. Choose the target ratio: 3, 4.5 or 7.
  3. Read the gray, its hex code and its exact ratio.
  4. Copy the result and use the hex code in your styles.

What people use it for

  • Subtle secondary text

    Find the palest gray for captions and hints that still passes AA on a white page.

  • Placeholder and border colors

    Find the gray for an input border that reaches 3:1 against the page.

  • Dark interface

    Find the dimmest gray for secondary labels on a dark panel.

Questions

How is the gray chosen?
Each gray has R = G = B from 0 to 255. The page computes the WCAG ratio for each, with the sRGB formula: L = 0.2126 R + 0.7152 G + 0.0722 B on linearised channels, ratio (Lmax + 0.05) ÷ (Lmin + 0.05). On a light background it keeps the lightest gray whose ratio is at least the target, and the one step lighter fails.
What counts as a dark background?
A background whose relative luminance is below about 0.179, where white starts to contrast more than black. Above it, the page looks for grays darker than the background, below it for grays lighter than the background.
What if no gray reaches the target?
Then the page says so and gives the best gray available. For example, a mid grey background such as #777777 cannot reach 7:1 with any gray.
Is the result a guarantee of conformance?
No. It is not a certification. It covers neutral grays on one opaque sRGB background and says nothing about size, weight, transparency or the other states of an element.