Contraste de color: cómo cumplir los criterios WCAG 1.4.3 y 1.4.11

En las WCAG 2.2, nivel AA, el texto normal necesita un contraste de al menos 4,5:1 con el fondo (criterio 1.4.3). El texto grande, que es el de 18 puntos o más, o de 14 puntos en negrita, necesita 3:1. Los componentes de interfaz, como los bordes de los campos y los indicadores de foco, y las partes de gráficos necesarias para entender el contenido necesitan 3:1 con los colores adyacentes (criterio 1.4.11). El nivel AAA (criterio 1.4.6) sube el texto a 7:1 y el texto grande a 4,5:1. Los valores no se redondean: 4,48:1 no cumple 4,5:1.

El texto sigue las WCAG 2.2 en la edición de diciembre de 2024 y los documentos "Understanding" del W3C, que explican cada criterio. Las novedades de la versión 2.2 están en la guía WCAG 2.2 nivel AA.

Los tres criterios de contraste

Los números vienen de investigaciones sobre la visión. Según el Understanding 1.4.3, 3:1 es el mínimo que recomiendan las normas ISO y ANSI para lectores con visión normal. Las WCAG lo multiplican por 1,5 para compensar la pérdida de sensibilidad al contraste asociada a una agudeza visual de 20/40, y llegan a 4,5:1.

El 1.4.6 es AAA, y las WCAG no recomiendan exigir AAA como regla para sitios enteros. Tiene sentido como meta para textos largos de lectura, pero no es el nivel que suelen pedir las leyes y las normas.

Qué cuenta como texto grande

Las WCAG definen el texto de tamaño grande como texto de al menos 18 puntos, o 14 puntos en negrita (WCAG 2.2, glosario). La NBR 17225, la norma técnica brasileña de accesibilidad web, usa la misma definición. Como la web mide en píxeles CSS, la conversión es 1 pt = 1,333 px, según el Understanding 1.4.3:

Tres detalles de la definición suelen pasar desapercibidos:

• Cuenta el tamaño con el que se entrega el contenido. El zoom que el usuario aplique después no cuenta.

• Con unidades relativas (rem, em, %), el tamaño real es el que calcula el navegador. Comprueba el valor final en "Computed" en las DevTools, no el valor escrito en el CSS.

• Las WCAG advierten que las fuentes de trazo muy fino o de formas poco comunes son más difíciles de leer con poco contraste. Una fuente fina de 24 px pasa en el número, pero puede ser difícil de leer.

Cómo se calcula la relación de contraste

La relación de contraste compara la luminancia relativa de los dos colores, que es el brillo de un color en una escala de 0 (negro) a 1 (blanco). Las fórmulas están en el glosario de las WCAG 2.2 (luminancia relativa y relación de contraste), que a su vez toma la luminancia de la norma sRGB (IEC 61966-2-1).

1. Divide cada canal del color (R, G y B, de 0 a 255) entre 255.

2. Convierte cada canal a valor lineal: si es menor o igual que 0,04045, divídelo entre 12,92; si es mayor, calcula ((valor + 0,055) / 1,055) elevado a 2,4.

3. Calcula la luminancia: L = 0,2126 × R + 0,7152 × G + 0,0722 × B, con los valores lineales.

4. Calcula la relación: (L1 + 0,05) / (L2 + 0,05), donde L1 es la luminancia del color más claro y L2 la del más oscuro.

Ejemplo: texto #767676 sobre fondo #FFFFFF

#767676 → 118/255 = 0,4627 → ((0,4627 + 0,055) / 1,055)^2,4 = 0,1812
Como R = G = B, L = 0,1812
Blanco: L = 1

Relación = (1 + 0,05) / (0,1812 + 0,05) = 4,54 → cumple 4,5:1

Texto #777777 sobre blanco: 4,48 → no cumple (no se redondea)

El resultado va de 1:1 (el mismo color) a 21:1 (negro sobre blanco). Hasta mayo de 2021, el umbral de la fórmula en las WCAG era 0,03928; hoy es 0,04045. El W3C dice que el cambio no tiene efecto práctico en los cálculos.

Dos reglas del glosario afectan a la auditoría. Si el CSS define el color del texto pero no el del fondo, o al revés, eso ya es un fallo, porque el color predeterminado del usuario es desconocido. Y si no se definió ningún color de fondo, se considera blanco.

Contraste de lo que no es texto (1.4.11)

El criterio 1.4.11 pide 3:1 frente a los colores adyacentes para dos cosas (WCAG 2.2, 1.4.11):

• Componentes de interfaz: lo que hace falta ver para identificar un control (botón, campo, casilla de verificación) y su estado (con foco, marcado, seleccionado, desplegado).

• Objetos gráficos: las partes de un gráfico o de un ícono necesarias para entender el contenido, como las líneas de un gráfico o un ícono de estado sin texto.

El Understanding 1.4.11 aclara puntos que generan dudas:

• Un campo de texto no tiene por qué tener borde. Pero, si el borde es la única pista visual de que ahí hay un campo, necesita 3:1 frente al fondo. Vale también para los campos que solo tienen la línea inferior.

• Los "colores adyacentes" son los que rodean el componente. Para un campo, cuenta el fondo de la página alrededor, no el relleno interior.

• En un gráfico, las líneas y los sectores necesitan contraste, salvo cuando las etiquetas y los valores en texto ya transmiten la misma información.

• El estilo de hover que añade el sitio es complementario y no necesita 3:1. Sin embargo, no puede hacer que el componente o el indicador de foco pierdan contraste.

Excepciones

Errores frecuentes

Placeholder

El texto de ejemplo dentro de un campo, el placeholder, es texto y necesita 4,5:1, como dice el Understanding 1.4.3. Lo mismo vale para el texto que aparece al pasar el mouse o al recibir el foco, como los tooltips. Usar el placeholder en lugar de una etiqueta es otro problema, que se trata en la guía de formularios accesibles.

Texto sobre imagen o degradado

Usar una imagen de fondo que no da suficiente contraste con el texto es un fallo documentado por el W3C (F83). En una imagen o en un degradado, el contraste cambia de un punto a otro. Recomendación: mide en el tramo en el que el fondo más se acerca al color del texto, y no en un promedio. Las correcciones más simples son una capa oscura o clara semitransparente entre la imagen y el texto, o una caja de fondo sólido detrás del texto. Recuerda que el recorte de la imagen cambia entre móvil y escritorio, y cada variación tiene que cumplir.

Indicador de foco

El criterio 2.4.7 (AA) pide que el foco del teclado sea visible. El Understanding 1.4.11 añade que, si el sitio cambia el estilo del foco, el indicador necesita 3:1 frente al fondo adyacente. Un contorno azul claro sobre fondo blanco, o un outline: none sustituido por una sombra casi invisible, suele fallar. La NBR 17225 es más explícita: el ítem 5.11.6, que es un requisito, pide un contraste de al menos 3:1 del indicador de foco con el fondo y entre los estados con foco y sin foco.

Estados que dependen solo del color

Un interruptor que pasa de gris a verde al activarse, o una pestaña seleccionada que solo cambia de tono, necesita que esa diferencia de estado tenga 3:1. Si no la tiene, añade otra pista, como un ícono, un subrayado o un texto.

El gris "elegante"

El texto secundario en gris claro (fechas, leyendas, pie de página, precios anteriores) es donde más aparece el contraste insuficiente. Usa el cálculo de arriba: sobre blanco, #767676 es el gris más claro que todavía pasa en texto normal.

Cómo probarlo

1. Pasa una herramienta automática para encontrar los casos obvios. En Chrome, el panel CSS Overview enumera los problemas de contraste en la sección de colores, y el informe de accesibilidad de Lighthouse también comprueba el contraste (Chrome DevTools).

2. Inspecciona los textos sospechosos: en el selector de color de las DevTools, la sección "Contrast ratio" muestra la relación y si alcanza AA o AAA.

3. Para el texto sobre imagen, usa el cuentagotas en el punto del fondo más cercano al color del texto y calcula la relación con esos dos colores.

4. Prueba los estados: pasa el mouse, da el foco con Tab, marca casillas, abre menús. Comprueba el texto que aparece y el contraste del indicador de cada estado.

5. Verifica el 1.4.11 a mano: bordes de campos, íconos sin texto, gráficos y el indicador de foco.

6. Repite en el móvil y, si el sitio lo tiene, en el tema oscuro.

Las herramientas automáticas ayudan, pero el W3C advierte que no determinan por sí solas si un sitio es accesible (Selecting Web Accessibility Evaluation Tools). El contraste en los estados, sobre imágenes y en los elementos no textuales pide revisión humana. La corrección del contraste se hace en el CSS del sitio; un widget instalado encima no cambia el código (mira ¿un overlay de accesibilidad cumple la ley?).

El contraste en la NBR 17225

La ABNT NBR 17225:2025, la norma brasileña, trata el contraste en la sección 5.11, "Uso de colores" (ABNT NBR 17225:2025):

Para saber quién está obligado por la Ley Brasileña de Inclusión y qué papel tiene la norma, mira la guía Accesibilidad web en Brasil: qué exigen la LBI y la NBR 17225. Este texto explica la norma técnica; no es asesoramiento jurídico.

Cómo verificar tu sitio

La verificación gratuita de WebVyze analiza la página de inicio, sin registro, y señala riesgos de accesibilidad vinculados a la ley, entre ellos los problemas de contraste que se pueden detectar automáticamente. Los casos que necesitan ojo humano, como el texto sobre imagen, los estados de hover y de foco, los íconos y los gráficos, siguen exigiendo las pruebas manuales descritas arriba.