Skip to content
Randozi
All wheelsTools

Transparent Color Contrast Checker

Enter a color, its opacity and the opaque background it sits on. The page blends them channel by channel in sRGB, rounds to whole channels, shows the resulting hex color, and computes the contrast ratio of that color on the background.

#000000 at opacity 0.5 over #ffffff gives

#808080

Contrast ratio of #808080 on #ffffff: 3.95:1 · the same color fully opaque has 21.00:1

Assumption: sRGB values from 0 to 255, each channel blended as round(alpha × foreground + (1 − alpha) × background). A browser may blend with another precision or color space. Only one transparent layer over a plain background is handled; images and gradients are not. Not a certification of conformance.

How it works

  1. Enter the foreground color as a hex code.
  2. Enter its opacity from 0 to 1, or as a percentage such as 50%.
  3. Enter the opaque background color it is drawn on.
  4. Read the blended hex color and its contrast ratio, then copy the result.

What people use it for

  • Overlay text

    Check white text at 70% opacity over a dark panel.

  • Disabled and muted states

    See what contrast a text at 50% opacity really has on the page color.

  • Translating a design token

    Turn a semi-transparent color into the opaque hex code to use in a checker or a palette.

Questions

How is the blended color computed?
For each channel, C = round(alpha × F + (1 − alpha) × B), with F the foreground channel, B the background channel and alpha between 0 and 1, in sRGB values from 0 to 255. Rounding to a whole channel is the assumption: a browser may blend with a different precision or in another color space. The ratio is then the usual WCAG ratio of the blended color on the background.
Why is the background required?
A transparent color has no contrast of its own. It depends on what is behind it, so the page asks for an opaque background. With opacity 0 the result is the background and the ratio is 1:1.
What does this not cover?
Backgrounds that are images or gradients, several layers of transparency, and blend modes. Check those by sampling the real pixels behind the text. This is not a certification of conformance.
Can I paste an 8 digit hex code?
Not here. Enter the 6 digit color in the first field and the opacity in the second one. Opacity 80% is 0.8, which is hex CC.