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.
Component Opacity Guide
Choose the component you're building, enter its colors, and this will tell you which opacity setting to pick so the text stays readable — even over the darkest or lightest thing that could end up behind it.
Resting State
Hover and Mobile State
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.
Every background color here is checked as if it were sitting over a solid black layer and a solid white layer — the darkest and lightest thing likely to end up behind it — and the stricter of the two sets the requirement. The recommendation is always rounded up to the nearest opacity setting you can actually pick, so it never quietly falls short.
Set the opacity on the background color itself (an rgba/hex8 value, or the site's opacity field for that layer), not on the whole component — fading the whole component fades the text too and defeats the point.