Web, UI, and CSS
Why can black text have poor contrast when transparent?
Tools to use
Secondary text can look faint even when its base color is the same black as the body. Lower alpha blends it into the background. White text on a translucent card depends on the surface behind that card too. Enter foreground, background and final backdrop separately, and do not extend a solid-color result to an entire photograph or changing background.
Start with black and white at 21:1
foreground: #000000
background: #FFFFFF
ratio: 21:1Enter black foreground and white background for a ratio of 21. This establishes an opaque reference. The ratio describes relative luminance contrast; it does not by itself evaluate font design, display resolution or actual text size.
Change the foreground to #777777: against white the ratio is about 4.478. Rounding it yourself to 4.5 does not meet the 4.5:1 normal-text threshold. The tool judges before display rounding, so do not round a borderline failure into a pass.
Half-transparent black is not the 21:1 black
foreground: rgba(0, 0, 0, 0.5)
background: #FFFFFF
composited RGB: 127.5, 127.5, 127.5
ratio: approximately 3.977:1Use rgba(0, 0, 0, 0.5). Its black components blend halfway with white, producing gray and about 3.977:1, below the normal-text AA threshold of 4.5. Check finalForeground to see the color used in the calculation rather than judging the uncomposited black.
Put that same foreground over black and the ratio is 1 because it remains black. Alpha 0.5 has no fixed readability result without a background. Recheck the complete pair in each theme, including transparency.
A translucent background also needs a final backdrop
foreground: #FFFFFF
background: rgba(0, 0, 0, 0.5)
backdrop: #FFFFFF → approximately 3.977:1
backdrop: #000000 → 21:1White text on a half-transparent black card depends on the final surface. White behind it makes the card gray; black keeps it black. Set the final backdrop to the actual opaque surface. The tool rejects a translucent final backdrop instead of inventing the missing color.
CSS opacity on a parent can composite text and background as a group. Entering the same alpha independently for both colors is not guaranteed to reproduce that operation. Check which element receives opacity and inspect the rendered colors too.
Do not apply the large-text threshold to ordinary body text
WCAG AA distinguishes 4.5:1 for normal text and 3:1 for qualifying large text. Large is defined by size and weight, not impression. The calculator shows both without inspecting your font. A large-text pass does not authorize the color for small helper text.
Passing contrast is not a whole-page accessibility audit. Check focus, links, enlargement and non-color cues separately. The objective is usable reading and interaction, not collecting pass labels.
Check the least readable region of variable backgrounds
One sampled color cannot represent all text over a photo or gradient. Check regions beneath the letters and hover, selection and theme states. An opaque text surface can make the background predictable. This tool does not scan images or all page states; document exactly which pair you tested.