Perceivable · 1.4 Distinguishable

Low or No Background Audio WCAG 1.4.7 · Level AAA

Prerecorded audio-only content that is mainly foreground speech, and is not an audio CAPTCHA, audio logo or musical vocals such as singing, must have no background sound, a way to turn it off, or background sound at least 20 dB below the speech, apart from occasional sounds lasting one or two seconds.

Level
AAA
Since
WCAG 2.0
Principle
Perceivable
Guideline
1.4 Distinguishable
Try the live demo All criteria Checklist

Live demo

Follow the voice over the music

The same task, done two ways: switch between the version that passes and the one that fails, or put them side by side. Everything in the box is live, so try it with a keyboard, a pointer or a screen reader.

Play the clip in each version and try to follow every word. In Fails, the music is much closer in volume to the voice.

Live example

Passes

Money Matters, episode 12

In this clip, the host explains how to build an emergency fund in six months.

What happened

    Why it passes

    The music is 22 dB below the voice. It stays in the background, so people who are hard of hearing can follow the host.

    Why it fails

    The music is only 8 dB below the voice. People who are hard of hearing hear the words blur into the music, and there is no way to turn it off.

    Examples

    Code that fails, and the fix

    Four examples, each one running: the usual ways this criterion fails, and code that passes. Listen to them, measure them, or copy the code.

    01What changes 2 lines

    Fails

    Music bed only 6 dB under the voice

    Live preview

    JavaScript
    const ctx = new AudioContext();const voice = new Audio("episode-12-voice.mp3");const music = new Audio("episode-12-music.mp3");// 20 * log10(0.5) = about -6 dBconst musicGain = new GainNode(ctx, { gain: 0.5 }); ctx.createMediaElementSource(voice).connect(ctx.destination);ctx.createMediaElementSource(music).connect(musicGain).connect(ctx.destination);

    If both tracks are mastered to the same loudness, a gain of 0.5 leaves the music only about 6 dB below the speech. It needs to be at least 20 dB below, or be possible to turn off.

    Passes

    Music mixed 20 dB down

    Live preview

    JavaScript
    const ctx = new AudioContext();const voice = new Audio("episode-12-voice.mp3");const music = new Audio("episode-12-music.mp3");// 20 * log10(0.1) = -20 dBconst musicGain = new GainNode(ctx, { gain: 0.1 }); ctx.createMediaElementSource(voice).connect(ctx.destination);ctx.createMediaElementSource(music).connect(musicGain).connect(ctx.destination);

    With both tracks mastered to the same loudness, a gain of 0.1 puts the music 20 dB below the speech, so it stays a quiet bed (technique G56).

    Fails

    Narrated tour with sound baked in

    Live preview

    HTML
    <h2>Stop 4: The old harbor</h2><!-- Harbor noise is mixed into this file 10 dB below the narration --><audio controls src="tour-stop-4.mp3"></audio>

    The harbor noise runs under the whole narration only 10 dB down, and it is part of the same file, so listeners cannot turn it off.

    Passes

    Separate tracks with an off switch

    Live preview

    JavaScript
    const narration = new Audio("tour-stop-4-voice.mp3");const harbor = new Audio("tour-stop-4-harbor.mp3");const soundsToggle = document.querySelector("#harbor-sounds"); soundsToggle.addEventListener("change", () => {  harbor.muted = !soundsToggle.checked;});

    The narration and the harbor sounds are separate tracks, and the “Harbor sounds” checkbox mutes the background. Background sound that can be turned off meets the criterion.

    Why it matters

    Who it helps

    People who are hard of hearing often find it much harder than others to separate speech from background music or noise, so quiet or removable background sound lets them follow it.

    W3C: Understanding 1.4.7

    • Level AAA

      Level AAA is the highest level. It is not required for whole sites, but it is worth meeting where you can.

    • In WCAG versions

      Part of WCAG 2.0 since December 2008, and of every version after it.

      No WCAG 1.0 checkpoint maps to it.

    • Where it is required

      No law on this site requires Level AAA criteria for whole sites.

    How to test

    Checking it

    A few concrete steps. Automated tools find some failures; most need a person.

    1. Identify prerecorded audio-only recordings that are mainly speech, such as podcasts and narrated tracks.
    2. Listen for background music or sound; if present, confirm it can be turned off or is at least 20 dB quieter than the speech.

    Common failures

    Where it breaks

    • A podcast has a music bed running under the voices throughout, only slightly quieter than the speech.
    • A narrated audio guide has constant ambient sound that cannot be switched off.

    Related