Is Text on a Semi-Transparent Background Readable? Key Points for Evaluating Contrast

An event banner can place text over a photograph while keeping the picture visible by adding a semi-transparent panel. However, even when the panel’s color and opacity stay the same, its appearance changes over light and dark parts of the image. This article shows how to calculate the background color after blending and check whether text has enough contrast.

Check the blended background, not the overlay color alone

For white text on a translucent panel, compare the white with the color that actually appears after the panel blends with the image—not with the panel’s original color. CSS (Cascading Style Sheets, the rules that determine how a webpage looks) can specify rgb(20 43 69 / 50%) as a background color. RGB describes the red, green, and blue channels. This displays dark navy ■#142B45 at 50% opacity, allowing the underlying image to show through. The resulting color depends on what lies behind it.

WCAG 2.2 (Web Content Accessibility Guidelines, international guidelines for accessible web content) Success Criterion 1.4.3 at Level AA generally requires a contrast ratio of at least 4.5:1 between normal-sized text and its background, or 3:1 for qualifying large text. White text ■#FFFFFF needs to be compared with the background color after compositing.

Using opacity: 0.5 on the entire panel makes its contents, including its text, translucent too. To keep the letters opaque, apply transparency to the panel’s background-color rather than to the whole element.

Compare the same translucent panel over light and dark surfaces

Imagine an event announcement with one bright area of a photograph approximated by pale beige ■#F5EFE5 and a shaded area approximated by deep blue ■#163A56. Put a 50%-opaque dark navy ■#142B45 panel over each area and use white lettering ■#FFFFFF. These solid colors are simplified examples for calculation, not a representation of every pixel in a real photograph.

Over the beige surface, the blended panel becomes blue-gray ■#858D95, producing approximately 3.36:1 contrast with white ■#FFFFFF. That falls short of the 4.5:1 requirement for normal-sized text. Over the deep blue surface, the resulting dark blue ■#15334E has approximately 13.00:1 contrast with the same white text ■#FFFFFF. The overlay settings did not change; only the surface beneath them did.

Increasing the panel opacity to 75% produces dark blue-gray ■#4C5C6D over beige, with approximately 6.87:1 contrast against white ■#FFFFFF. Over deep blue, it becomes ■#152F49, with approximately 13.68:1 contrast against white ■#FFFFFF. If this hides too much of the photo, another approach is to use a smaller, fully opaque dark navy ■#142B45 panel directly behind the words. White ■#FFFFFF against that solid color has approximately 14.37:1 contrast.

Recheck after changing photos or switching to mobile

Actual photographs contain many different colors and brightness levels, so a single measurement cannot represent the entire image. Inspect multiple areas directly behind the letters, especially the lightest and darkest sections. Repeat the check if a photo changes or the image crop moves on a smartphone. Calculate contrast using the blended color visible behind the text, not just the specified translucent color.

When adequate contrast cannot be maintained at every text location, reposition the text or switch to an opaque panel. A large heading may qualify for the 3:1 threshold, but smaller dates and venue details usually need the 4.5:1 requirement for ordinary text. After checking the numbers, inspect the actual page as well: thin fonts and screen brightness can affect perceived clarity.

HueRoll can show the contrast between a selected color and white or black. It cannot automatically blend a translucent layer with a photograph, compare arbitrary pairs of colors, or determine WCAG AA or AAA pass/fail status. Use it to explore the base color, then check the blended background and the finished screen separately.