Enhanced contrast, and background audio

Two criteria under guideline 1.4 Distinguishable raise the bar on how clearly content comes through: one for the eyes and one for the ears. The first is the Level AAA criterion almost everyone has heard of, Contrast (Enhanced). The second is one almost nobody has, and it matters a lot to the people it serves.

This is also a good lesson to see the part of the anatomy that is new in this course, Worth adopting?, because enhanced contrast is the criterion teams ask about most.

1.4.6 Contrast (Enhanced)

What it requires

The visual presentation of text and images of text has a contrast ratio of at least 7:1, except large text, which needs at least 4.5:1.

Compare with Level AA's 1.4.3 Contrast (Minimum):

"Large text" means the same as at Level AA: at least 18 point (about 24 CSS pixels), or at least 14 point bold (about 18.66 CSS pixels bold). And as at AA, a ratio is never rounded up: 6.96:1 fails 7:1.

📖 Understanding 1.4.6 Contrast (Enhanced)

Who it helps

• People with moderately low vision, roughly those whose acuity is around 20/80, who do not use assistive technology and read the page as it is. 4.5:1 was chosen for 20/40 vision; 7:1 compensates for the loss of contrast sensitivity that comes with poorer acuity
• Older people. Contrast sensitivity drops with age, and almost everyone over 60 reads low-contrast text more slowly
• Everyone in bad conditions: a phone in sunlight, a dim laptop on battery saving, a cheap projector

Before 🚫 / After ✅

/* Before 🚫: a mid-grey that passes AA and fails AAA */
p { color: #6b6b6b; background: #ffffff; } /* about 5.3:1 */

/* After ✅: a darker grey that still looks grey */
p { color: #4a4a4a; background: #ffffff; } /* about 8.3:1 */

Notice that the "after" text is still visibly grey. 7:1 does not force black on white. On a white background, any grey from about #595959 down passes. On a dark theme, the same logic works upwards: light grey on near-black passes easily.

The harder cases are brand colors. A typical brand blue or green that reaches 4.5:1 as link text often stays well below 7:1. The usual fixes are a darker shade of the brand color for text (keeping the bright one for large headings and decoration), or underlined links in the body color.

Exceptions

The same three as Level AA:

• Large text: 4.5:1 instead of 7:1, as above
• Incidental: text that is part of an inactive (disabled) component, pure decoration, invisible to anyone, or part of a picture with significant other visual content
• Logotypes: text in a logo or brand name has no contrast requirement

There is no enhanced version of 1.4.11 Non-text Contrast. Borders, icons, focus indicators, and chart parts stay at 3:1 at every level. (Focus indicators get a separate AAA rule, 2.4.13, in the focus lesson.)

How to test it

1. Run axe-core with its color-contrast-enhanced rule turned on (it is off by default, and runs with the wcag2aaa tag). It measures every text element against 7:1 or 4.5:1, exactly like its AA rule does against 4.5:1 or 3:1
2. As at AA, take what it sends to "needs review" (text over images, gradients, transparency, pseudo-elements) and measure those with an eyedropper
3. Check the states the scanner does not see: hover, focus, visited links, placeholder text, error messages, text in toasts and tooltips
4. In a report, say which threshold a text fails. "5.2:1, passes 1.4.3 (AA), fails 1.4.6 (AAA)" is a finding a team can prioritize. "Low contrast" is not

Automated: partly. The scanner does the measuring, as at Level AA. Backgrounds it cannot compute, and states it cannot trigger, remain yours.

Worth adopting?

For body text, adopt it broadly. It is usually a design-token change: one darker grey for secondary text, one darker shade of the brand color for links. It costs almost nothing once the tokens exist, it helps the large and growing group of older users, and it makes the product more readable outdoors.

For every text, in every state and over every image, it is harder. Brand colors, marketing banners, and illustrations are where teams get stuck. A sensible policy is "7:1 for body text and form labels, 4.5:1 everywhere else", written down, so nobody claims more than is true.

👨🏻‍🏫 This is the AAA criterion I recommend first to almost every team. Ask your designers what grey they use for secondary text. If the answer is somewhere around #757575, you have a one-line change that moves the whole product from "barely AA" to "comfortably AAA" for body text.

1.4.7 Low or No Background Audio

What it requires

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

1. No background: the audio contains no background sounds
2. Turn off: the background sounds can be turned off
3. 20 dB: the background sounds are at least 20 decibels lower than the foreground speech, with the exception of occasional sounds lasting only one or two seconds

A 20 dB difference means the background is roughly four times quieter to the ear than the voice.

📖 Understanding 1.4.7 Low or No Background Audio

Who it helps

• Hard of hearing people, including most older people, for whom background music turns speech into noise. Hearing aids amplify everything, so a background that sounds pleasant to you can drown the voice for them
• People with auditory processing disorders and some cognitive disabilities, who struggle to separate a voice from other sounds
• Non-native speakers, and anyone listening on a phone speaker or in a noisy place

Before 🚫 / After ✅

Before 🚫 (a podcast episode):
  Voice:            peaks around -12 dB
  Background music: around -20 dB, all the way through   -> only 8 dB below

After ✅:
  Voice:            peaks around -12 dB
  Background music: only in the intro and the outro, and around -34 dB under speech
                                                          -> 22 dB below
  plus a version of the episode without music, linked in the show notes

Exceptions

• Not audio-only: the criterion covers prerecorded audio-only content, such as podcasts, audio guides, and audiobooks. The soundtrack of a video is not in scope (though the same advice helps)
• Audio CAPTCHAs and audio logos (a short jingle that identifies a brand)
• Music: singing, rapping, and other vocalization that is primarily musical expression
• Occasional sounds of one or two seconds, such as a door closing in a radio drama

How to test it

1. List the prerecorded audio-only content with speech: podcasts, audio guides, audio versions of articles
2. Listen at a moderate volume. Does anything play behind the voice? If not, the criterion is met
3. If there is a background, look for a way to turn it off (a separate track, a version without music)
4. If there is none, open the file in an audio editor such as Audacity and compare the voice and the background levels over a typical stretch. Is the background at least 20 dB lower?

Automated: no.

Worth adopting?

Cheap if you produce the audio yourself: it is a mixing decision, made once per episode, and most audio editors can lower the music under speech automatically ("ducking"). Adopt it for every podcast, audio guide, and narrated article you produce, especially for older audiences. Content you do not produce yourself is harder, and a version without music is the practical fix.

Try it yourself 🔍

1. Inspect the secondary text (dates, captions, footers) of three sites with the DevTools color picker. Which pass 4.5:1 but fail 7:1?
2. Find a brand whose link color passes AA. Using a contrast checker, find the closest darker shade that reaches 7:1. How different does it look?
3. Play the first minute of a popular podcast. Is there music under the voice? Would someone with hearing aids understand every word?

Show the world what you learned 🌎

To show your professional network what you have learned in this lesson, post the following on LinkedIn.

I am taking the "WCAG 2.2 Level AAA" course by @Bruno Pulis at the @Talking About Testing School, where I learned 1.4.6 Contrast (Enhanced), 7:1 for text and 4.5:1 for large text, often a one-line design-token change that helps every older reader, and 1.4.7 Low or No Background Audio, which keeps podcast music 20 dB below the voice for hard of hearing listeners. #TalkingAboutTesting #TATSchool #WCAG22LevelAAA #Accessibility #ColorContrast

👨🏻‍🏫 Remember to tag me in your post. Here is my LinkedIn profile.