Contraste mejorado, y sonido de fondo

Dos criterios de la pauta 1.4 Distinguible suben la vara de qué tan claro llega el contenido: uno para los ojos y otro para los oídos. El primero es el criterio del Nivel AAA del que casi todo el mundo oyó hablar, el Contraste (mejorado). El segundo es uno del que casi nadie oyó hablar, y que importa mucho a las personas a las que sirve.

Esta también es una buena lección para ver la parte de la anatomía que es nueva en este curso, ¿Vale la pena adoptarlo?, porque el contraste mejorado es el criterio sobre el que más preguntan los equipos.

1.4.6 Contraste (mejorado) (Contrast (Enhanced))

Qué exige

La presentación visual del texto y de las imágenes de texto tiene una relación de contraste de al menos 7:1, excepto el texto grande, que necesita al menos 4,5:1.

Compáralo con el criterio 1.4.3 Contraste (mínimo) (Contrast (Minimum)), del Nivel AA:

"Texto grande" significa lo mismo que en el Nivel AA: al menos 18 puntos (unos 24 píxeles CSS), o al menos 14 puntos en negrita (unos 18,66 píxeles CSS en negrita). Y, como en el AA, una relación nunca se redondea hacia arriba: 6,96:1 falla en 7:1.

📖 Understanding 1.4.6 Contrast (Enhanced)

A quién ayuda

• Personas con baja visión moderada, más o menos las que tienen una agudeza de alrededor de 20/80, que no usan tecnología de apoyo y leen la página tal como es. La relación de 4,5:1 se eligió para una visión de 20/40; la de 7:1 compensa la pérdida de sensibilidad al contraste que viene con una agudeza peor
• Personas mayores. La sensibilidad al contraste baja con la edad, y casi todos los mayores de 60 leen más despacio el texto de bajo contraste
• Todo el mundo en malas condiciones: un teléfono bajo el sol, una laptop con el brillo bajo para ahorrar batería, un proyector barato

Antes 🚫 / Después ✅

/* Antes 🚫: un gris medio que pasa en el AA y falla en el AAA */
p { color: #6b6b6b; background: #ffffff; } /* alrededor de 5,3:1 */

/* Después ✅: un gris más oscuro que sigue viéndose gris */
p { color: #4a4a4a; background: #ffffff; } /* alrededor de 8,3:1 */

Fíjate que el texto del "después" sigue siendo visiblemente gris. El 7:1 no obliga a usar negro sobre blanco. Sobre un fondo blanco, cualquier gris de más o menos #595959 hacia abajo pasa. En un tema oscuro, la misma lógica funciona al revés: gris claro sobre casi negro pasa con holgura.

Los casos más difíciles son los colores de marca. Un azul o un verde típico de marca que llega a 4,5:1 como texto de enlace muchas veces queda bastante por debajo de 7:1. Las correcciones habituales son un tono más oscuro del color de marca para el texto (dejando el tono vivo para los títulos grandes y la decoración), o enlaces subrayados en el color del texto principal.

Excepciones

Las mismas tres del Nivel AA:

• Texto grande: 4,5:1 en lugar de 7:1, como arriba
• Incidental: texto que forma parte de un componente inactivo (deshabilitado), pura decoración, invisible para todos, o parte de una imagen con otro contenido visual significativo
• Logotipos: el texto de un logo o nombre de marca no tiene requisito de contraste

No existe una versión mejorada del criterio 1.4.11 Contraste no textual (Non-text Contrast). Los bordes, los íconos, los indicadores de foco y las partes de gráficos se quedan en 3:1 en todos los niveles. (Los indicadores de foco tienen una regla AAA aparte, el criterio 2.4.13, en la lección sobre el foco.)

Cómo probarlo

1. Corre axe-core con la regla color-contrast-enhanced activada (viene desactivada por defecto, y corre con la etiqueta wcag2aaa). Mide cada elemento de texto contra 7:1 o 4,5:1, igual que su regla del AA mide contra 4,5:1 o 3:1
2. Como en el AA, toma lo que manda a "needs review" (texto sobre imágenes, degradados, transparencias, pseudoelementos) y mídelo con un cuentagotas
3. Revisa los estados que el escáner no ve: hover, foco, enlaces visitados, texto de placeholder, mensajes de error, texto en toasts y tooltips
4. En un informe, di qué umbral no alcanza un texto. "5,2:1, pasa el criterio 1.4.3 (AA), falla el criterio 1.4.6 (AAA)" es un hallazgo que un equipo puede priorizar. "Contraste bajo" no lo es

Automatizable: en parte. El escáner hace la medición, como en el Nivel AA. Los fondos que no puede calcular, y los estados que no puede provocar, siguen siendo tuyos.

¿Vale la pena adoptarlo?

Para el texto principal, adóptalo de forma amplia. Por lo general es un cambio de design token: un gris más oscuro para el texto secundario, un tono más oscuro del color de marca para los enlaces. Cuesta casi nada una vez que existen los tokens, ayuda al grupo grande y creciente de usuarios mayores y hace el producto más legible al aire libre.

Para todo el texto, en todo estado y sobre toda imagen, es más difícil. Los colores de marca, los banners de marketing y las ilustraciones son donde los equipos se traban. Una política sensata es "7:1 para el texto principal y las etiquetas de formulario, 4,5:1 en el resto", por escrito, para que nadie declare más de lo que es cierto.

👨🏻‍🏫 Este es el criterio AAA que le recomiendo primero a casi todos los equipos. Pregúntales a tus diseñadores qué gris usan para el texto secundario. Si la respuesta anda por #757575, tienes un cambio de una línea que lleva todo el producto de "AA por poco" a "AAA con holgura" en el texto principal.

1.4.7 Sonido de fondo bajo o ausente (Low or No Background Audio)

Qué exige

Para el contenido de solo audio pregrabado que (1) contiene principalmente habla en primer plano, (2) no es un CAPTCHA de audio ni un logotipo sonoro, y (3) no es una vocalización pensada principalmente como expresión musical, como el canto o el rap, se cumple al menos una de estas opciones:

1. Sin fondo: el audio no tiene sonidos de fondo
2. Apagar: los sonidos de fondo se pueden apagar
3. 20 dB: los sonidos de fondo están al menos 20 decibelios por debajo del habla en primer plano, salvo los sonidos ocasionales que duran solo uno o dos segundos

Una diferencia de 20 dB significa que el fondo suena más o menos cuatro veces más bajo que la voz.

📖 Understanding 1.4.7 Low or No Background Audio

A quién ayuda

• Personas con discapacidad auditiva, incluida la mayoría de las personas mayores, para quienes la música de fondo convierte el habla en ruido. Los audífonos amplifican todo, así que un fondo que a ti te suena agradable puede ahogar la voz para ellas
• Personas con trastornos del procesamiento auditivo y algunas discapacidades cognitivas, a quienes les cuesta separar una voz de otros sonidos
• Personas que no son hablantes nativas, y cualquiera que escuche por el altavoz del teléfono o en un lugar ruidoso

Antes 🚫 / Después ✅

Antes 🚫 (un episodio de pódcast):
  Voz:              picos alrededor de -12 dB
  Música de fondo:  alrededor de -20 dB, de principio a fin   -> solo 8 dB por debajo

Después ✅:
  Voz:              picos alrededor de -12 dB
  Música de fondo:  solo en la apertura y el cierre, y alrededor de -34 dB debajo del habla
                                                              -> 22 dB por debajo
  además de una versión del episodio sin música, enlazada en las notas del episodio

Excepciones

• Que no sea solo audio: el criterio cubre el contenido de solo audio pregrabado, como pódcasts, audioguías y audiolibros. La banda sonora de un video no está en el alcance (aunque el mismo consejo ayuda)
• CAPTCHAs de audio y logotipos sonoros (una cortina breve que identifica una marca)
• Música: canto, rap y otras vocalizaciones que son principalmente expresión musical
• Sonidos ocasionales de uno o dos segundos, como una puerta que se cierra en un radioteatro

Cómo probarlo

1. Lista el contenido de solo audio pregrabado con habla: pódcasts, audioguías, versiones en audio de artículos
2. Escúchalo a volumen moderado. ¿Suena algo detrás de la voz? Si no, el criterio se cumple
3. Si hay fondo, busca una forma de apagarlo (una pista separada, una versión sin música)
4. Si no la hay, abre el archivo en un editor de audio como Audacity y compara los niveles de la voz y del fondo en un tramo típico. ¿El fondo está al menos 20 dB por debajo?

Automatizable: no.

¿Vale la pena adoptarlo?

Es barato si produces el audio tú mismo: es una decisión de mezcla, tomada una vez por episodio, y la mayoría de los editores de audio pueden bajar la música debajo del habla automáticamente (el llamado "ducking"). Adóptalo para cada pódcast, audioguía y artículo narrado que produzcas, sobre todo para públicos mayores. El contenido que no produces es más difícil, y una versión sin música es la corrección práctica.

Pruébalo tú mismo 🔍

1. Inspecciona el texto secundario (fechas, epígrafes, pies de página) de tres sitios con el selector de color de DevTools. ¿Cuáles pasan 4,5:1 pero fallan 7:1?
2. Encuentra una marca cuyo color de enlace pase el AA. Con un verificador de contraste, busca el tono más oscuro más cercano que llegue a 7:1. ¿Qué tan distinto se ve?
3. Reproduce el primer minuto de un pódcast popular. ¿Hay música debajo de la voz? ¿Alguien con audífonos entendería cada palabra?

Muéstrale al mundo lo que aprendiste 🌎

Para mostrarle a tu red profesional lo que aprendiste en esta lección, publica lo siguiente en LinkedIn.

Estoy haciendo el curso "WCAG 2.2 Nivel AAA" con @Bruno Pulis en la @Talking About Testing School, donde aprendí el criterio 1.4.6 Contraste (mejorado), 7:1 para el texto y 4,5:1 para el texto grande, muchas veces un cambio de una línea en los design tokens que ayuda a cada lector mayor, y el criterio 1.4.7 Sonido de fondo bajo o ausente, que mantiene la música del pódcast 20 dB por debajo de la voz para quienes tienen discapacidad auditiva. #TalkingAboutTesting #TATSchool #WCAG22LevelAAA #Accessibility #ColorContrast

👨🏻‍🏫 Recuerda mencionarme en tu publicación. Aquí está mi perfil de LinkedIn.