Contraste melhorado, e áudio de fundo

Dois critérios da diretriz 1.4 Discernível elevam a barra de quão claramente o conteúdo chega até você: um para os olhos e outro para os ouvidos. O primeiro é o critério do Nível AAA de que quase todo mundo já ouviu falar, o Contraste (Melhorado). O segundo é um de que quase ninguém ouviu, e que importa muito para as pessoas que ele atende.

Esta também é uma boa aula para ver a parte da anatomia que é novidade neste curso, Vale a pena adotar?, porque o contraste melhorado é o critério sobre o qual os times mais perguntam.

1.4.6 Contraste (Melhorado)

O que ele exige

A apresentação visual de texto e de imagens de texto tem uma razão de contraste de pelo menos 7:1, exceto texto grande, que precisa de pelo menos 4,5:1.

Compare com o critério 1.4.3 Contraste (Mínimo), do Nível AA:

"Texto grande" significa o mesmo que no Nível AA: pelo menos 18 pontos (cerca de 24 pixels CSS), ou pelo menos 14 pontos em negrito (cerca de 18,66 pixels CSS em negrito). E, como no AA, uma razão nunca é arredondada para cima: 6,96:1 falha em 7:1.

📖 Understanding 1.4.6 Contrast (Enhanced)

Quem ele ajuda

• Pessoas com baixa visão moderada, mais ou menos as que têm acuidade em torno de 20/80, que não usam tecnologia assistiva e leem a página como ela é. A razão de 4,5:1 foi escolhida para uma visão de 20/40; a de 7:1 compensa a perda de sensibilidade ao contraste que vem com uma acuidade pior
• Pessoas idosas. A sensibilidade ao contraste cai com a idade, e quase todo mundo depois dos 60 lê texto de baixo contraste mais devagar
• Todo mundo em condições ruins: um celular sob o sol, um notebook com o brilho reduzido para poupar bateria, um projetor barato

Antes 🚫 / Depois ✅

/* Antes 🚫: um cinza médio que passa no AA e falha no AAA */
p { color: #6b6b6b; background: #ffffff; } /* cerca de 5,3:1 */

/* Depois ✅: um cinza mais escuro que ainda parece cinza */
p { color: #4a4a4a; background: #ffffff; } /* cerca de 8,3:1 */

Repare que o texto do "depois" ainda é visivelmente cinza. O 7:1 não obriga a usar preto no branco. Em um fundo branco, qualquer cinza de mais ou menos #595959 para baixo passa. Em um tema escuro, a mesma lógica vale ao contrário: cinza claro sobre quase preto passa com folga.

Os casos mais difíceis são as cores da marca. Um azul ou verde típico de marca que chega a 4,5:1 como texto de link muitas vezes fica bem abaixo de 7:1. As correções de sempre são um tom mais escuro da cor da marca para texto (deixando o tom vivo para títulos grandes e decoração), ou links sublinhados na cor do texto corrido.

Exceções

As mesmas três do Nível AA:

• Texto grande: 4,5:1 em vez de 7:1, como acima
• Incidental: texto que faz parte de um componente inativo (desabilitado), pura decoração, invisível para todo mundo, ou parte de uma imagem com outro conteúdo visual significativo
• Logotipos: texto em um logo ou nome de marca não tem requisito de contraste

Não existe versão melhorada do critério 1.4.11 Contraste Não textual. Bordas, ícones, indicadores de foco e partes de gráficos ficam em 3:1 em todos os níveis. (Os indicadores de foco ganham uma regra AAA separada, o critério 2.4.13, na aula sobre foco.)

Como testar

1. Rode o axe-core com a regra color-contrast-enhanced ligada (ela vem desligada por padrão, e roda com a tag wcag2aaa). Ela mede cada elemento de texto contra 7:1 ou 4,5:1, do mesmo jeito que a regra do AA mede contra 4,5:1 ou 3:1
2. Como no AA, pegue o que ela manda para "needs review" (texto sobre imagens, gradientes, transparência, pseudoelementos) e meça com um conta-gotas
3. Confira os estados que o scanner não vê: hover, foco, links visitados, texto de placeholder, mensagens de erro, texto em toasts e tooltips
4. Em um relatório, diga qual limite o texto não atinge. "5,2:1, passa no critério 1.4.3 (AA), falha no critério 1.4.6 (AAA)" é um achado que um time consegue priorizar. "Contraste baixo" não é

Automatizável: em parte. O scanner faz a medição, como no Nível AA. Os fundos que ele não consegue calcular, e os estados que ele não consegue provocar, continuam com você.

Vale a pena adotar?

Para o texto corrido, adote de forma ampla. Geralmente é uma mudança de design token: um cinza mais escuro para o texto secundário, um tom mais escuro da cor da marca para os links. Custa quase nada depois que os tokens existem, ajuda o grupo grande e crescente de pessoas usuárias mais velhas e deixa o produto mais legível ao ar livre.

Para todo texto, em todo estado e sobre toda imagem, é mais difícil. Cores de marca, banners de marketing e ilustrações são onde os times empacam. Uma política sensata é "7:1 para texto corrido e rótulos de formulário, 4,5:1 no resto", por escrito, para ninguém afirmar mais do que é verdade.

👨🏻‍🏫 Este é o critério AAA que eu recomendo primeiro para quase todo time. Pergunte aos designers qual cinza eles usam no texto secundário. Se a resposta for algo perto de #757575, você tem uma mudança de uma linha que leva o produto inteiro de "AA por pouco" para "AAA com folga" no texto corrido.

1.4.7 Áudio de fundo baixo ou sem Áudio de fundo

O que ele exige

Para conteúdo apenas de áudio pré-gravado que (1) contém principalmente fala em primeiro plano, (2) não é um CAPTCHA de áudio nem um logotipo de áudio, e (3) não é vocalização feita principalmente como expressão musical, como canto ou rap, pelo menos uma das opções a seguir é verdadeira:

1. Sem fundo: o áudio não tem sons de fundo
2. Desligar: os sons de fundo podem ser desligados
3. 20 dB: os sons de fundo ficam pelo menos 20 decibéis abaixo da fala em primeiro plano, com exceção de sons ocasionais que duram só um ou dois segundos

Uma diferença de 20 dB significa que o fundo fica mais ou menos quatro vezes mais baixo ao ouvido do que a voz.

📖 Understanding 1.4.7 Low or No Background Audio

Quem ele ajuda

• Pessoas com deficiência auditiva, incluindo a maioria das pessoas idosas, para quem a música de fundo transforma a fala em ruído. Aparelhos auditivos amplificam tudo, então um fundo que parece agradável para você pode afogar a voz para elas
• Pessoas com transtornos do processamento auditivo e algumas deficiências cognitivas, que têm dificuldade de separar uma voz de outros sons
• Pessoas que não são falantes nativas, e qualquer um ouvindo pelo alto-falante do celular ou em um lugar barulhento

Antes 🚫 / Depois ✅

Antes 🚫 (um episódio de podcast):
  Voz:              picos em torno de -12 dB
  Música de fundo:  em torno de -20 dB, do começo ao fim   -> só 8 dB abaixo

Depois ✅:
  Voz:              picos em torno de -12 dB
  Música de fundo:  só na abertura e no encerramento, e em torno de -34 dB sob a fala
                                                           -> 22 dB abaixo
  além de uma versão do episódio sem música, com link nas notas do episódio

Exceções

• Não é apenas áudio: o critério cobre conteúdo apenas de áudio pré-gravado, como podcasts, audioguias e audiolivros. A trilha sonora de um vídeo não está no escopo (embora o mesmo conselho ajude)
• CAPTCHAs de áudio e logotipos de áudio (uma vinheta curta que identifica uma marca)
• Música: canto, rap e outras vocalizações que são principalmente expressão musical
• Sons ocasionais de um ou dois segundos, como uma porta batendo em uma radionovela

Como testar

1. Liste o conteúdo apenas de áudio pré-gravado com fala: podcasts, audioguias, versões em áudio de artigos
2. Ouça em volume moderado. Toca alguma coisa atrás da voz? Se não, o critério está atendido
3. Se há fundo, procure um jeito de desligá-lo (uma faixa separada, uma versão sem música)
4. Se não houver, abra o arquivo em um editor de áudio como o Audacity e compare os níveis da voz e do fundo em um trecho típico. O fundo fica pelo menos 20 dB abaixo?

Automatizável: não.

Vale a pena adotar?

É barato se você mesmo produz o áudio: é uma decisão de mixagem, tomada uma vez por episódio, e a maioria dos editores de áudio consegue abaixar a música sob a fala automaticamente (o chamado "ducking"). Adote para todo podcast, audioguia e artigo narrado que você produz, principalmente para públicos mais velhos. Conteúdo que você não produz é mais difícil, e uma versão sem música é a correção prática.

Experimente você mesmo 🔍

1. Inspecione o texto secundário (datas, legendas de imagens, rodapés) de três sites com o seletor de cores do DevTools. Quais passam em 4,5:1 mas falham em 7:1?
2. Encontre uma marca cuja cor de link passa no AA. Com um verificador de contraste, ache o tom mais escuro mais próximo que chega a 7:1. Quão diferente ele parece?
3. Toque o primeiro minuto de um podcast popular. Há música sob a voz? Alguém com aparelho auditivo entenderia cada palavra?

Mostre ao mundo o que você aprendeu 🌎

Para mostrar à sua rede profissional o que você aprendeu nesta aula, publique o seguinte no LinkedIn.

Estou fazendo o curso "WCAG 2.2 Nível AAA" com @Bruno Pulis na @Talking About Testing School, onde aprendi o critério 1.4.6 Contraste (Melhorado), 7:1 para texto e 4,5:1 para texto grande, muitas vezes uma mudança de uma linha nos design tokens que ajuda toda pessoa leitora mais velha, e o critério 1.4.7 Áudio de fundo baixo ou sem Áudio de fundo, que mantém a música do podcast 20 dB abaixo da voz para quem tem deficiência auditiva. #TalkingAboutTesting #TATSchool #WCAG22LevelAAA #Accessibility #ColorContrast

👨🏻‍🏫 Lembre-se de me marcar na sua publicação. Aqui está meu perfil no LinkedIn.