1.4.7 Low or No Background Audio

WCAG 2.2 · 1.4.7 AAA Perceivable

What it requires

For prerecorded audio-only content that (1) is mainly speech in the foreground, (2) is not a CAPTCHA or audio logo, and (3) is not vocalization meant primarily as musical expression such as singing, at least one of the following must be true:

  • The audio contains no background sounds at all; or
  • Background sounds can be turned off by the user; or
  • Background sounds are at least 20 dB lower than the foreground speech (roughly four times quieter), except for brief incidental sounds.

The goal is that the words being spoken are clearly distinguishable from any background music or noise.

People who are hard of hearing — and many older users with age-related hearing loss — struggle to separate a single voice from competing sound. When background music or ambient noise sits close to the level of the speech, the words can become impossible to follow, even though the audio plays fine for others. This criterion keeps the speech intelligible without requiring assistive technology.

How to detect it

Ways to check Low or No Background Audio
Check How
Manual listening Play the speech-only clip; confirm the words stay clear over any music or ambience, with no straining to separate them.
Measure the gap Use an audio editor (e.g. Audacity) to compare the level of foreground speech against background sound; confirm at least a 20 dB difference.
User control If a gap of 20 dB is not met, verify a mechanism exists to turn the background track off.
Automated tools Tools such as axe cannot evaluate this — audio mixing and intelligibility require human judgement, so it is a fully manual criterion.

How to fix it

  1. Prefer recording or exporting the narration with no background track.
  2. If a bed is needed, mix it so foreground speech is at least 20 dB louder than the background.
  3. When the gap cannot be guaranteed, provide a control to mute the background, or offer a clean speech-only version.
  4. Always pair the audio with a text transcript as a robust fallback.

Where you expose the audio in markup, give it native controls so users can pause or mute:

<audio controls src="interview-clean.mp3">
  <a href="interview-transcript.html">Read the transcript</a>
</audio>

Copy-paste tests

Automated coverage

There is no fully automated axe-core rule for 1.4.7 — audio mixing and speech intelligibility require human judgement. This criterion needs manual review, using the console check and steps below.

Run this in the browser console

audio-bgaudio-check.js 
// Read-only: surfaces audio/video that may carry foreground speech to review by ear.
const media = [...document.querySelectorAll('audio, video')];
const suspects = media.map(el => ({
  node: el,
  tag: el.tagName,
  src: el.currentSrc || el.getAttribute('src') || '(source children)',
  hasControls: el.controls,
  muted: el.muted
}));
console.table(suspects.map(({ node, ...row }) => row));
suspects.forEach(s => { s.node.style.outline = '3px solid magenta'; });
console.log('Listen to each:', suspects.map(s => s.node));

What to check manually: play each clip and confirm the foreground speech stays clearly audible — at least 20 dB above any background — and that, if the gap is not met, a working control to mute the background track exists. No script can measure intelligibility or the dB gap for you.