A trail guide uses the same translucent blue caption panel on two page themes. White text is clear on the dark theme but difficult to read on the light one. The blue in the stylesheet has not changed. The color behind the letters has, because part of each theme shows through the panel.
For a panel over a single opaque color, calculate the visible background first. Then compare that solid result with the text color. The worked example shows why a check of the original blue alone gives the wrong answer for the light theme.
Find the two colors that make up the background
Write down the panel color and its alpha, then find the opaque color directly behind it. In this example the panel is rgb(28 72 132 / 50%), the light theme uses sand #f8f4ec, and the dark theme uses slate #182030. The caption itself is opaque white or black.
Check how the transparency is applied. A background-color with alpha affects the panel fill. Setting opacity: 0.5 on the whole caption box fades its text too. The CSS Color specification describes how element opacity applies to the rendered contents as a group. This calculation assumes normal layering of two flat sRGB colors, with no element opacity, filters or blend modes.
Calculate the visible color under the text
With an opaque backdrop, the simple alpha compositing formula weights each channel of the panel and the backdrop. If the backdrop is written in HEX, use the Color Converter to read its red, green and blue numbers first. Do the blend calculation separately.
visible channel = panel channel × alpha + backdrop channel × (1 − alpha)Here the panel has alpha 0.5, so each visible channel is the average of the two corresponding numbers. For the sand theme, the red calculation is 28 × 0.5 + 248 × 0.5 = 138. Green becomes 158 and blue becomes 184, giving rgb(138 158 184) or #8a9eb8. With slate behind the same panel, the visible color is rgb(26 52 90) or #1a345a.
Both results are opaque because the underlying theme is opaque. We also rendered these two flat CSS panels locally and sampled the background away from the text. Both sampled colors matched the calculation in this example.
Compare black and white text in the converter
- Enter the calculated opaque color,
#8a9eb8, in the converter color field. The rows update as you type. - Read On white and On black under WCAG contrast ratio. The ratio is the same whichever of the two colors is the text.
- Repeat with
#1a345a. Use the WCAG 2.2 Contrast (Minimum) guidance for the threshold: 4.5:1 for ordinary text and 3:1 for qualifying large text, subject to the stated exceptions. Compare with the threshold before rounding.
| Theme backdrop | Visible panel color | White text | Black text |
|---|---|---|---|
Sand #f8f4ec |
#8a9eb8 |
2.74:1 | 7.66:1 |
Slate #182030 |
#1a345a |
12.48:1 | 1.68:1 |
Black meets the ordinary text threshold over sand; white meets it over slate. The converter does not combine layers. Entering the original 50% blue directly gives a white ratio of 9.09:1, because the converter ignores alpha in this check. That would miss the 2.74:1 white text result on the light theme. The converter checks pure black and white only, so use a contrast checker that accepts both colors for any other text color.
Check the backdrop wherever the caption appears
For a fixed set of solid themes, record a tested label color for each theme and inspect the finished caption. A gradient or photograph can put different colors behind individual letters, and a responsive crop can move those colors as the layout changes. A single sampled background cannot represent every position. Check the relevant placements and states, or give the label a solid backing if you cannot control what appears behind it.
Once the backing is opaque, you can check it directly. The guide to choosing readable button text colors shows that simpler workflow and explains which interactive states need their own checks.