Stacked Bar Colors: Check Segment Edges and Labels Separately

A white-background check does not test touching fills

Check the colors that actually touch. A blue segment and an orange segment can each be visible on white while offering very little lightness separation at their shared edge. Their individual background ratios do not answer that adjacent-fill question.

First identify the task. If readers must infer the split between stacked segments from the graphic, the dividing edge contributes information. Test that edge. If complete visible names and values communicate the same information, the source explains that those graphical parts may no longer be required for understanding. That is a defined information alternative, not a reason to leave the text unreadable.

Basis: [2]

The example here uses both exact labels and white separators. It demonstrates an ordinary opaque digital stack. It does not certify a chart product, every display size or a printed result.

Inspect a complete 40/35/25 example

The constructed dataset has three categories: A 40, B 35 and C 25 fictional units. Their sum is 100, so their shares are 40%, 35% and 25%. The horizontal stack has widths in those same proportions. There are no omitted categories or missing records.

Download the original labelled SVG

On a narrow screen, scroll inside the table. The region can receive keyboard focus.

Download the complete original CSV

The graphic has a white background. Every colored segment has a white boundary, and its white text sits directly on that segment. A different background, opacity or label color would require different pair calculations.

Calculate segment, separator and text pairs

On a narrow screen, scroll inside the table. The region can receive keyboard focus.

All three dark fills have more than 4.5: 1 contrast against white. However, A/B and B/C are each below 3: 1. Saying “all colors passed on white” would miss both shared edges. A white separator supplies a new adjacent pair on each side; here each separator/fill pair exceeds 3: 1.

The white labels use the same white/fill pairs, but ordinary text needs 4.5: 1 rather than the 3: 1 graphical-object threshold. Evaluate the unrounded ratio. A line-style improvement cannot compensate for a label that becomes unreadable against its own fill.

Basis: [2] [3]

s = channel_byte /255
linear(s) = s/12.92 if s <=0.04045 else ((s+0.055)/1.055)**2.4
L =0.2126*linear(R)+0.7152*linear(G)+0.0722*linear(B)
ratio =(max(L1,L2)+0.05)/(min(L1,L2)+0.05)

These are nominal opaque sRGB calculations. Antialiasing, a thin separator and tiny text can make the exported chart less usable, so inspect its actual small-size result as well.

Keep the separator without changing the data

A separator is a visual boundary, not an extra category. Keep the underlying 40/35/25 proportions intact. In this original SVG, the white strokes sit over the mathematical boundaries. They slightly cover the nearby fills; the complete table prevents that visual width from becoming the only source of exact percentages.

Avoid creating a new gap that silently changes the total length, or subtracting a fixed number of units from every segment to make room. Very small segments can be visually consumed by a thick boundary. A chart with dozens of thin pieces may need a different layout or direct labels outside the stack.

If the question is an exact difference such as “Is B five units below A?”, 40 and 35 answer it directly. Ask whether a labelled table or grouped bars would serve that comparison more clearly. Stacks emphasize composition; a palette cannot make every internal baseline equally convenient to compare.

Handle narrow segments and real exports

A 25% segment has room for a short label in this illustration. A real 1% category might not. Move its name and value to a clearly attached outside label, or give a complete adjacent table. Do not squeeze important text into a tiny colored sliver and then assume a passing color ratio solves its size.

Keep category names attached to their values. A legend with colored chips alone does not give someone a visible alternative to recognizing the hue. A label such as “A 40” can convey both category and value; a vague title such as “Composition” cannot.

Basis: [1] [2]

Review the actual phone chart, full-size export and any static screenshot. Check that the white separators remain visible, labels do not overlap and all categories remain accounted for. If paper output matters, use a separate proofing process; an on-screen sRGB ratio is not a paper/profile measurement.

Try three boundary decisions

Use the stated opaque colors and 100-unit dataset for these original checks.