Opacity Calculator
How translucent can this background get?
Pick a text color and a background color. This works out the lowest opacity the background can drop to before the text falls below WCAG contrast — even if something dark or light shows through behind it.
Checks the required opacity against a pure black layer and a pure white layer behind the background, and uses whichever is stricter. This covers the realistic worst case — a photo, a video, or an unknown page section behind a translucent panel.
How this is calculated
Contrast is measured the way WCAG 2.2 defines it for success criteria 1.4.3 and 1.4.11: relative luminance is computed from the gamma-decoded sRGB channels, then compared as (L₁ + 0.05) / (L₂ + 0.05). Normal text needs 4.5:1 at AA and 7:1 at AAA; large text and UI components need 3:1 at AA and 4.5:1 at AAA.
The background color is blended toward whatever sits behind it exactly the way browsers composite rgba() — a linear mix of the encoded channel values by opacity, not in linear light. A pure black or white backdrop is the practical worst case to test against: an arbitrarily colored backdrop could in principle be tuned to defeat almost any opacity below 100%, so this tool bounds the problem to the two realistic extremes — the darkest and lightest thing likely to sit behind a translucent panel — rather than chasing an unbounded one.
When you apply this: set the opacity on background-color (an rgba/hex8 value, or color-mix()), not on the element's opacity property — element opacity fades the text along with the background and defeats the point.