Semi-transparent text must be measured on the composited color
Aliases: alpha blending · opacity contrast · composited color
What it is
color: black that “passes as black” in a spec is not black on screen once it is translucent. Contrast for semi-transparent text is computed on the composited color after it is blended onto the background. Alpha-mix the foreground with the backdrop; the resulting RGB is what the eye and a pixel sampler see. Black at 40% opacity on white becomes a mid gray whose ratio falls below common floors. A checker that only reads the opaque value in the stylesheet will report a false pass.
Why it happens
Alpha compositing is a linear mix: C_out = C_fg × α + C_bg × (1 − α). Contrast formulas eat relative luminance at the two ends, not the pure swatch the designer named. Using opacity to fake hierarchy waters the foreground into whatever sits behind it; as α drops, the ratio collapses toward 1.
A second layer is stacked translucency. The glyph is translucent, the card is translucent, the page sits underneath — neither color nor background-color is the final pixel. Blend modes, frosted glass, and masks push the composite even farther from the palette. Placeholders, secondary copy, and disabled states are the usual “fade it” victims, and the usual failures after paint. Size and weight choose which floor to apply; compositing chooses which values to plug in. Those are two measurements, not one eyedropper click.
Studying it
Sample painted pixels (screenshot picker, “actual pixel” modes in contrast scanners) and put them beside getComputedStyle colors. Keep a fixture page where the swatch ratio passes and the same color plus opacity fails.
Independent variables: foreground alpha, background luminance, whether intermediate layers are also translucent. Dependent variables: swatch ratio, composited ratio, the gap between them, false passes.
Rules that parse color strings without compositing miss this class systematically. When the backdrop is a photo or a gradient, the composite also varies by position; a single sample is not a floor.
Where it stops holding
Opaque text on a solid fill needs no extra compositing step. Print and PDF flattening should be judged on the output. Dark mode changes the backdrop, so the same alpha can pass on light and fail on dark — composite both. Text-shadow and stroke create another composite at the glyph edge; sample inside the stroke, not the antialiased fringe.
Applying it
- Build hierarchy with lighter opaque colors. Do not fake gray by lowering alpha.
- When opacity is required, compute the composited RGB on the target backdrop (or pick from a screenshot) before running contrast.
- For type on cards, sheets, and frosted panels, composite the intermediate layers. Do not check only the page swatch.
- Verify: screenshot, pick pixels inside the glyph and in the adjacent backdrop, compute the ratio. Compare with the opaque value in the style panel; every “swatch passes, pixels fail” is a defect. Toggle opacity off and on so the measurement is the blended frame.