Contraste

Te damos la bienvenida a la lección sobre contraste. Se puede leer gratis, sin cuenta, así que también es la mejor manera de ver cómo está construida cada lección del curso: uno o más criterios de una pauta de las WCAG y, dentro de cada uno, las mismas cinco partes, terminando en cómo probarlo.

El contraste es el criterio de accesibilidad del que todo el mundo oyó hablar, y la falla más común de la web: año tras año, grandes estudios automatizados de las páginas de inicio más populares encuentran texto con poco contraste en la gran mayoría. También es Nivel AA, no Nivel A, lo que sorprende a casi todo el mundo la primera vez.

Esta lección cubre los dos criterios de contraste de la pauta 1.4 Distinguible (Distinguishable): uno para el texto, y otro para todo lo demás que necesitas ver.

1.4.3 Contraste (mínimo) (Contrast (Minimum))

Qué exige

El texto, y las imágenes de texto, tienen una relación de contraste de al menos 4,5:1 con su fondo. El texto grande necesita al menos 3:1.

La relación de contraste es un número de 1:1 (el mismo color dos veces) a 21:1 (negro sobre blanco), calculado a partir de la luminancia relativa de los dos colores. Nunca lo calculas a mano: un verificador de contraste lo hace por ti.

"Texto grande" tiene un significado preciso: al menos 18 puntos (unos 24 píxeles CSS), o al menos 14 puntos en negrita (unos 18,66 píxeles CSS en negrita).

📖 Understanding 1.4.3 Contrast (Minimum) (en inglés)

A quién ayuda

• Personas con baja visión, para quienes un texto claro se confunde con el fondo
• Personas con daltonismo, que pueden ver menos diferencia entre dos colores que quien diseñó la pantalla
• Personas mayores, ya que la sensibilidad al contraste disminuye con la edad
• Todas las personas que leen el teléfono en la calle, bajo un sol fuerte, o en una pantalla barata o con el brillo bajo

Antes 🚫 / Después ✅

Texto del cuerpo. El texto gris sobre blanco es la falla clásica.

<!-- Antes 🚫: #999999 sobre blanco da 2,85:1 -->
<p style="color: #999999; background: #ffffff;">
  Devolución gratis dentro de los 30 días.
</p>

<!-- Después ✅: #595959 sobre blanco da 7,0:1 -->
<p style="color: #595959; background: #ffffff;">
  Devolución gratis dentro de los 30 días.
</p>

El umbral no se redondea. #777777 sobre blanco da 4,48:1, y falla: 4,48 es menor que 4,5, por más cerca que parezca. #767676, un tono más oscuro, da 4,54:1 y cumple. Cuando un verificador muestra "4,5" con un decimal, mira el segundo.

Texto de placeholder. El texto de placeholder es texto, así que, si lleva información ("p. ej.: nombre@ejemplo.com"), necesita 4,5:1. Muchos grises de placeholder por defecto no llegan.

<!-- Antes 🚫: un placeholder claro es la única pista del formato esperado -->
<style> input::placeholder { color: #aaaaaa; } </style>
<label for="email">Correo electrónico</label>
<input id="email" placeholder="nombre@ejemplo.com">

<!-- Después ✅: la pista es texto real, con suficiente contraste, y sigue visible -->
<label for="email">Correo electrónico</label>
<p id="email-hint" style="color: #595959;">Por ejemplo, nombre@ejemplo.com</p>
<input id="email" aria-describedby="email-hint">

Texto sobre una imagen. Mide el contraste contra la parte más clara de la imagen detrás de un texto claro (o la más oscura detrás de un texto oscuro), no contra un promedio. Una capa oscura semitransparente detrás del texto, o un fondo sólido en el bloque de texto, es la corrección habitual.

Excepciones

• El texto grande solo necesita 3:1. Revisa primero el tamaño y el peso, y después elige el umbral
• Texto incidental: el texto de un control inactivo (deshabilitado), el texto que es pura decoración, el texto que nadie ve y el texto que forma parte de una imagen con otro contenido visual significativo (un cartel de calle en una foto) no tienen requisito de contraste
• Logotipos: el texto que forma parte de un logo o de un nombre de marca no tiene requisito de contraste

👨🏻‍🏫 "Deshabilitado" es la excepción en la que más se apoyan los equipos, y solo cubre los controles que de verdad no se pueden usar en ese momento. Un botón con estilo gris claro para que parezca "secundario", pero en el que se puede hacer clic, no está deshabilitado. Necesita 4,5:1 como cualquier otro texto.

Cómo probarlo

1. Ejecuta primero tu escáner. Este es el criterio en el que axe-core es mejor: mide el contraste de todos los textos en segundos. Corrige lo que reporte
2. Después busca lo que no puede medir, y verifica cada caso con un verificador de contraste o un cuentagotas:

- texto sobre imágenes, degradados y videos - texto en elementos superpuestos a otros (encabezados fijos, tarjetas, modales) - texto que solo aparece en un estado: hover, foco, seleccionado, error, placeholder y texto de tooltip - imágenes de texto: banners, botones e infografías con el texto incrustado en la imagen

1. Para cada uno, decide si el texto es grande (24 píxeles CSS, o 18,66 en negrita) para elegir entre 4,5:1 y 3:1
2. Revisa si una excepción de verdad se aplica: ¿ese control está realmente deshabilitado? ¿Ese texto forma parte realmente de un logo?

Automatizable: en parte. La regla color-contrast de axe-core verifica la mayoría de los textos contra un fondo sólido, y marca el texto sobre imágenes, degradados y elementos superpuestos como "needs review" (necesita revisión), lo que significa que una persona tiene que verificarlo. No verifica las imágenes de texto, y solo verifica los estados (hover, foco, error) si tu prueba pone la página en ese estado antes de escanear.

1.4.11 Contraste no textual (Non-text Contrast)

Qué exige

Dos tipos de cosas que no son texto necesitan una relación de contraste de al menos 3:1 con los colores que tienen al lado:

1. Componentes de la interfaz: la información visual necesaria para identificar un componente y sus estados. El borde de un campo de texto cuando el borde es lo que te muestra dónde escribir, la caja de una casilla de verificación y su marca, las posiciones de encendido y apagado de un interruptor, el indicador de foco
2. Objetos gráficos: las partes de un gráfico necesarias para entender el contenido. Las líneas y las barras de un gráfico, las porciones de un gráfico de torta, un ícono que tiene significado por sí solo

📖 Understanding 1.4.11 Non-text Contrast (en inglés)

A quién ayuda

• Personas con baja visión, que no encuentran un campo de texto cuyo borde claro desaparece en la página, ni distinguen una casilla marcada de una sin marcar
• Personas con daltonismo, que leen un gráfico con líneas de brillo parecido
• Todas las personas con una pantalla mala, bajo el sol, o con el brillo bajo

Antes 🚫 / Después ✅

Un campo de texto. Cuando el borde es lo único que muestra dónde está el campo, el borde necesita 3:1.

<!-- Antes 🚫: #d1d5db sobre blanco da 1,47:1, así que el campo casi desaparece -->
<style> input { border: 1px solid #d1d5db; background: #ffffff; } </style>
<label for="city">Ciudad</label>
<input id="city">

<!-- Después ✅: #8a8a8a sobre blanco da 3,45:1 -->
<style> input { border: 1px solid #8a8a8a; background: #ffffff; } </style>
<label for="city">Ciudad</label>
<input id="city">

Un estado. Un interruptor que muestra "encendido" con un riel verde claro, #4caf50, contra la página blanca (2,78:1), y "apagado" con uno gris claro. Oscurece el color de "encendido" (#2e7d32 da 5,13:1 contra el blanco) y agrega una segunda pista, como la posición de la perilla o una etiqueta "Encendido", para que el estado no dependa de un solo tono (esa segunda pista también es lo que pide el criterio 1.4.1 Uso del color, en el Nivel A).

Un gráfico. Un gráfico de líneas cuyas cuatro líneas son tonos pastel claros sobre blanco. Cada línea que lleva datos necesita 3:1 contra el fondo. Las porciones vecinas de un gráfico de torta necesitan 3:1 entre sí, o un borde visible entre ellas, a menos que cada porción también lleve escrito su valor.

Excepciones

• Componentes inactivos: un control deshabilitado no tiene requisito, igual que el texto deshabilitado en el criterio 1.4.3
• Apariencia definida por el navegador: una casilla de verificación nativa o un anillo de foco por defecto, sin modificar por quien hizo la página, son responsabilidad del navegador. Cuando la página les cambia el estilo, la responsabilidad pasa a ser de la página
• Presentación esencial: cuando los colores son la información misma, como en un mapa de calor, una fotografía, una bandera o una captura de la interfaz de otra persona
• No todo necesita 3:1. Un botón identificado por su texto no necesita que su fondo contraste con la página, porque el texto (verificado por el criterio 1.4.3) ya lo identifica. Y un gráfico que también muestra sus datos como texto, como un gráfico con el valor escrito en cada barra, no depende del contraste de las barras

👨🏻‍🏫 Los indicadores de foco son el caso para recordar. Un anillo de foco personalizado en un color claro, que apenas se distingue del estado sin foco, falla aquí, en el criterio 1.4.11, aunque el foco sea técnicamente "visible". La lección sobre el foco vuelve a esto con el criterio 2.4.7.

Cómo probarlo

1. Lista lo que necesitas ver para usar la página: bordes de campos, casillas de verificación, botones de opción, interruptores, controles deslizantes, indicadores de foco, íconos sin texto y las partes con significado de los gráficos y diagramas
2. Para cada uno, encuentra los colores que lo hacen identificable, y los colores de al lado (normalmente el fondo), y mide la relación con un cuentagotas
3. Revisa también cada estado: marcado y sin marcar, encendido y apagado, seleccionado o no, con foco y sin foco
4. Decide si se aplica una excepción: ¿está deshabilitado? ¿Sin modificar por la página? ¿Identificado por texto de todos modos?

Automatizable: no. axe-core no tiene una regla para el contraste no textual. Los bordes, los íconos, los estados, los indicadores de foco y las líneas de los gráficos se verifican a ojo y con un cuentagotas.

Pruébalo tú mismo 🔍

1. Ejecuta un escáner automatizado en un sitio que uses seguido y anota cuántos problemas de contraste reporta. Después busca dos que marque para revisión, o que se le escapen, y mídelos tú
2. Busca un formulario con un estilo "minimalista" y revisa el contraste de los bordes de sus campos, sus casillas y sus placeholders contra la página
3. Busca un gráfico en un sitio de noticias o en un dashboard. ¿Podrías distinguir cada línea o porción si todo fuera un poco más oscuro o más claro? Mide la más clara

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 AA" con @Bruno Pulis en la @Talking About Testing School, donde aprendí que el contraste es Nivel AA, no Nivel A: el texto necesita 4,5:1, o 3:1 cuando es grande, y 4,48 falla (1.4.3 Contraste (mínimo)), mientras que los bordes de los campos, las casillas, los indicadores de foco y las líneas de los gráficos necesitan 3:1 (1.4.11 Contraste no textual). Un escáner verifica la mayoría de los textos, y nada de lo demás. #TalkingAboutTesting #TATSchool #WCAG22LevelAA #Accessibility #ColorContrast

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