Audio Bubbles: Accessibility-Driven Redesign

Snapshot

Ahead of a VPAT submission, Genio Notes’ audio bubbles failed WCAG 2.1 AA contrast, brought into compliance with a border-based fix that kept the interface quiet, rather than raising saturation until the numbers passed.

Genio Notes uses small “audio bubbles” (with connecting lines) in the audio tab to let students navigate and annotate recorded lectures. The trigger was an upcoming VPAT (accessibility conformance report).

Problem

The audit found a colour contrast issue:

Dark mode: grey (4.04:1) and yellow (3.5:1) passed. Blue (2.94:1) and red (2.42:1) failed.
Light mode: every colour except red failed.

The brief: reach WCAG AA without turning a deliberately quiet background element into a heavier, more clinical UI: the opposite of its purpose.

Why this ran for months rather than an afternoon: the CEO was concerned that raising contrast until every colour passed would make the interface louder and undermine the point of the bubbles. That tension set the whole project, every decision below was weighed as evidence against that risk, not ticked off.

Constraints:

A hard VPAT deadline, later pulled forward to early February.
An unresolved second question: were the grey connecting lines decorative, or did they convey sequence and so need to meet 3:1 on their own?
No large testing pool, only Insiders and internal reviewers.

Reject the contrast bump; fix it with borders

Raising saturation to force 3:1 read as muddy and measurably heavier, exactly the tradeoff the CEO had flagged, so it was rejected on principle, not taste.

The border-based approach instead: background fill for inactive bubbles with a contrast-passing border, a lighter fill when active, lines from 2px to 1px, and heights retuned (8→5px inactive, 12→11px active) to centre on the thinner line. The new grey came from the design system, sitting as close to 3:1 as possible without overshooting.

Cross-checks: Paul ran both directions through ChatGPT and Gemini blind, and both favoured the thinner, lower-contrast one on visual weight and scannability: a second opinion, not a substitute for testing. Dave also raised a question worth recording: does an inactive bubble need 3:1 at all, if it communicates nothing until you interact with it?

Two columns of audio bubbles with fully saturated red, orange and purple fills against grey connecting lines. — The rejected direction, raising saturation to force 3:1 read as muddy and visually heavier.

Three panels comparing audio bubble fill treatments across slide outlines. — Comparing fill treatments for active bubbles against the thinner 1px connecting line.

Two audio tab panels side by side, one with a purple header and one with a teal header, showing highlighted bubbles. — The border-based treatment checked across themes, where the light-mode failures were worst.

The border-based direction in light mode (silent screen recording).

The same direction in dark mode, where grey and yellow already passed (silent screen recording).

Soften the connecting lines to 40% opacity

Three options: remove the lines (lost the structure), drop them to ~40% opacity (didn’t strictly pass, but visibly lighter), or leave them at full opacity (too heavy for a zone that isn’t interactive).

Went with 40%, with Steven backing it and the plan to push back if formal review flagged it. Scope stayed deliberately narrow, pass AA first, and Matt added logging on audio-tab vs. transcript-tab use so any deeper investment could be argued from data later.

Three panels comparing connecting-line treatments at different opacities behind outlined audio bubbles. — Line treatments compared: removed entirely, ~40% opacity, and full-opacity grey.

Three panels showing the progression of bubble and line styling across red, orange and purple states. — The progression across states, checking that sequence stayed readable as line weight dropped.

Survey only the students who use the audio tab

I surveyed people who actually use the audio tab, cross-referencing Pendo usage against the Insiders panel: a general population wouldn’t give a real signal on a feature-specific change. It compared current vs. proposed on cognitive load and on whether the design felt “beautiful and minimal”, then asked outright which they preferred.

Results (n=5, too small for hard conclusions):

Cognitive load tied 3/1/1 across both designs.
“Beautiful and minimal”: current 3.8/5, new 3.2/5, though one respondent resistant to any change scored the new design 1/5, which skews a sample this size.
Qualitatively, the new design made it easier to see where a bubble starts and ends, and felt less distracting.

Multiple choice survey results: 60% said the new bubble design would be an improvement, 20% wouldn't mind, 20% would miss the old design. — The direct preference question, 3 of 5 called the new design an improvement.

Survey responses explaining why the new audio bubble design is an improvement, with an AI summary of the themes. — Why respondents saw it as an improvement: clearer start/end points, less clutter.

Reverse the line decision on the auditor’s ruling

I put the open question to Level Access, the external WCAG auditor: decorative lines are exempt from 3:1, but lines that are interactive and convey essential context are not.

The lines are interactive and act as a sequencing aid, so they count as context. That reversed October’s assumption, they stayed at full contrast rather than being lightened, since making the bubble relationships illegible would raise cognitive load for the low-vision users the fix was for.

Shipped

Contrast lives in the border and the weight, not the fill: a background-fill inactive bubble with a contrast-passing border, a lighter fill when active, 1px lines at full contrast per the ruling, and heights of 5px / 11px so they centre on the thinner line.

Corner radius (Jan 2026): I built a “Bubble Playground” with 0.5px radius sliders so stakeholders could test presets rather than review comps. It landed on “Fully rounded” or “Rounded”, though the border treatment had already solved the segment-distinction problem on its own.

A tall audio tab panel showing the final bubble treatment across three slide sections. — The final bubble treatment in the audio tab.

The Bubble Playground with corner radius set to 5.5px, fully rounded, for selected bubbles. — The Bubble Playground, radius sliders in 0.5px increments, so stakeholders could test presets directly rather than review comps. “Fully rounded” shown here.

Outcome

WCAG 2.1 AA reached ahead of the VPAT deadline via borders rather than saturation, keeping the design as quiet as it was meant to be.
The decorative-vs-functional question settled by an external authority rather than an internal guess, and the design changed in response, even though it meant reversing an earlier call.
Direction validated by an AI cross-check and a small, targeted survey, with the 5-person sample stated as the limitation it is.
Usage logging left in place to argue any deeper investment in the audio tab from data.

Reflection

The “lighter lines” fix looked settled in October and got reversed in January once an actual authority looked at it. Treating that as new information rather than defending the earlier call is the more interesting decision here than the visual polish.

The rigour existed because of one tension set on day one: don’t let compliance quietly make the product worse to use. Every stage was really answering “did we just trade cognitive load for contrast?” with evidence instead of a gut call, which is how a colour swap became a lesson in accessibility improving a design rather than constraining it.