How to Calculate Contrast for Transparent Text on a Solid Background

The quick answer and its limits

For a single transparent text color over a solid, opaque background, use output = alpha × foreground + (1 − alpha) × background separately for red, green and blue. Next convert those output channels to linear sRGB, calculate relative luminance and compare it with the background luminance.

For example, black at alpha 0.4 over white produces #999999. Its ratio against white is about 2.85:1, below WCAG 2.2 AA’s 4.5:1 requirement for normal text. Checking opaque black against white would give 21:1 and answer the wrong question.

Scope: an sRGB color set directly on the text, ordinary source-over blending, and one opaque sRGB background. Parent opacity, overlapping layers, gradients, background images, blend modes and wide-gamut colors require the actual compositing context. This simplified calculator does not evaluate those cases.

Calculate the actual color pair

This calculator models one sRGB foreground color, ordinary source-over compositing and one solid, opaque sRGB background. It evaluates the color ratio only. It does not inspect a website or test all WCAG requirements.

Find the three inputs in your CSS

1. Foreground: the base text color before alpha, such as the three channels in rgb(0 0 0 / 0.4).
2. Alpha: the fraction of that color contributing to the result. Fully opaque is 1; fully transparent is 0.
3. Background: the opaque color actually behind that text. A page’s white body is not the right input if the label sits on a navy card.

.label {
  background: #ffffff;
  color: rgb(0 0 0 / 0.4);
}

If a class uses opacity: 0.4 on a parent, stop before entering 0.4 here. That property composites the element as a group and can also change its background and children. First identify the group and the backdrop behind it.

Step 1: composite the encoded sRGB channels

W3C’s source-over equation simplifies when the backdrop is opaque: each output channel is the foreground channel times its alpha plus the background channel times the remaining share. Use encoded sRGB values consistently, either all 0–255 or all 0–1. This step happens before the WCAG luminance calculation; do not blend the two luminance values instead.

Rout = alpha × Rtext + (1 − alpha) × Rbackground
Gout = alpha × Gtext + (1 − alpha) × Gbackground
Bout = alpha × Btext + (1 − alpha) × Bbackground

At alpha 0 the output equals the background and the ratio is 1:1. At alpha 1 the calculation becomes the ordinary opaque color-pair check. Fractional output channels are valid intermediate values; retain them until the calculation is finished.

Step 2: calculate luminance and contrast

Divide each composite channel by 255 to get s. Convert it to a linear value using WCAG 2.2’s sRGB definition:

linear(s) = s / 12.92                    if s ≤ 0.04045
            ((s + 0.055) / 1.055)^2.4   otherwise

L = 0.2126 × Rlinear + 0.7152 × Glinear + 0.0722 × Blinear
contrast = (lighter L + 0.05) / (darker L + 0.05)

Repeat the luminance conversion for the opaque background. Luminance runs from 0 for black to 1 for white; contrast runs from 1:1 to 21:1. Keep the calculation’s precision for the decision. A result of 4.499:1 does not meet 4.5:1 just because a short display rounds it to 4.50.

WCAG AA requires at least 4.5:1 for normal text and 3:1 for large text. Large means at least 18 point regular text or 14 point bold text, approximately 24 CSS pixels or 18.7 CSS pixels respectively. “Looks like a heading” is not a size test. This is a color-ratio check, not proof that the font, interaction or whole page is accessible.

Three worked examples, with visible demonstrations

These are constructed examples. Each demonstration sets alpha on the text color and keeps its background opaque. The displayed ratios are rounded; the pass/fail decisions below use the unrounded calculations.

Avoid the checks that answer the wrong question

• Checking the original hex only: an opaque checker cannot infer alpha. Calculate the composite first or use a tool that explicitly supports it.
• Sampling an anti-aliased letter edge: the edge includes partial pixel coverage. For WCAG’s text-color calculation, use the underlying CSS colors, as its Understanding document advises. Use a full-coverage color patch to investigate the compositor, not a fuzzy glyph edge.
• Replacing the background with an average: a photograph or gradient can have bright and dark areas behind the same text. This one-color model cannot certify that situation.
• Assuming a muted label is exempt: placeholder text and text shown on hover or focus still need the relevant contrast check. Read the criterion’s specific exceptions; “secondary information” is not a blanket exception.
• Calling the whole design compliant: links, focus indicators, non-text components and other requirements need their own review. A passing pair is one result.

For small or thin text, consider a pair with room above the minimum and inspect the actual rendering. Meeting a mathematical threshold does not guarantee comfortable reading in every font or viewing condition.

Record the result and choose the next action

Save a check that another person can reproduce:

• Element and state, for example “card helper text, default state.”
• Foreground hex, alpha and actual opaque background hex.
• Composite channels, ratio before display rounding, font size and weight.
• Color-ratio decision and the change made, if needed.

If the ratio is low, increase text alpha, choose a different text color or give the text a suitable opaque surface. Recalculate after each change. Keep hover, focus and other visible states in the same record.

Applying this to a menu? Continue with readable café menu colors. For a page’s surface roles, use the website background color guide. For charts, combine color with labels and line styles rather than making meaning depend on hue alone.