Contraste de color y accesibilidad WCAG: los ratios 4.5:1 y 3:1

Los ratios de contraste de color que exigen las WCAG para el texto

El criterio 1.4.3 se aplica a la presentación visual del texto y de las imágenes de texto. El umbral general es 4.5:1. El texto de gran tamaño, y sus imágenes, tienen un umbral más bajo de 3:1, porque un texto más grande y de trazo más ancho se lee mejor con menos contraste.

Estos valores deben tratarse como umbrales: el W3C indica que la relación calculada no debería redondearse, así que 4.499:1 no alcanza el umbral de 4.5:1.

Las cifras tienen una justificación. El W3C recuerda que 3:1 es el mínimo recomendado por las normas ISO 9241-3 y ANSI/HFS 100-1988 para texto estándar y visión normal. El 4.5:1 compensa la pérdida de sensibilidad al contraste asociada a una agudeza visual de aproximadamente 20/40: 3 × 1,5 = 4,5. Con la misma lógica, una agudeza de 20/80 requiere unos 7:1, el ratio usado en el criterio 1.4.6 de nivel AAA.

• Texto normal e imágenes de texto: al menos 4.5:1 (nivel AA).
• Texto grande e imágenes de texto grande: al menos 3:1 (nivel AA).
• Nivel AAA (criterio 1.4.6): ratio de 7:1.
• Información visual que identifica componentes de interfaz y sus estados, y partes de gráficos necesarias para comprender: al menos 3:1 (criterio 1.4.11).

¿Qué se considera texto grande en las WCAG?

Las WCAG definen el texto de gran tamaño como el de al menos 18 puntos, o al menos 14 puntos en negrita, o un tamaño equivalente en fuentes chinas, japonesas y coreanas. Son puntos CSS: 1pt = 1,333px, así que 14pt y 18pt equivalen aproximadamente a 18,5px y 24px.

En muchas fuentes habituales, 14 y 18 puntos equivalen más o menos a 1,2 y 1,5 em, es decir, al 120 % y 150 % del tamaño por defecto del texto, pero el W3C indica que hay que comprobarlo con la fuente realmente utilizada. Al evaluar, el tamaño en puntos debe obtenerse del navegador o calcularse con las métricas de la fuente como lo hace el navegador. Cuenta el tamaño en el momento de la entrega, no la ampliación que haga el usuario.

Cuidado con las fuentes muy finas o poco habituales: cuestan más de leer, sobre todo con poco contraste, y el suavizado (anti-aliasing) puede mostrarlas mucho más pálidas que el color definido en CSS. El texto puede aprobar en teoría y leerse mal en la práctica; lo recomendable es una fuente de trazo más grueso o una combinación de colores que supere el mínimo.

Excepciones: logotipos, texto decorativo y componentes inactivos

El criterio 1.4.3 no impone requisito de contraste en algunos casos concretos. Son excepciones estrechas: el W3C insiste en que, más allá de los logotipos, el texto con contraste insuficiente por la identidad corporativa o las guías de marca no está exento.

Incluso un logotipo pierde la exención si el bajo contraste es una elección del autor y no una exigencia de marca. Ejemplo del W3C: logotipos de empresas mostrados con poco contraste por defecto, hasta pasar el ratón por encima, no cumplen el criterio. Cuando un logotipo funciona como enlace o control, se recomienda elegir una variante con contraste suficiente si las guías de marca lo permiten, u ofrecer un componente equivalente que cumpla los requisitos.

• Logotipos: el texto que forma parte de un logotipo o nombre de marca.
• Decoración pura: un texto solo es puramente decorativo si sus palabras pueden reordenarse o sustituirse sin cambiar su finalidad, como palabras aleatorias muy claras de fondo en la portada de un diccionario.
• Componentes de interfaz inactivos: por ejemplo, un botón de envío visible que no puede activarse hasta completar todos los campos obligatorios.
• Texto invisible para todos, o texto dentro de una imagen con otros elementos visuales importantes, como el letrero de una calle que aparece por casualidad en una fotografía.

Contraste del texto frente a contraste de componentes (1.4.11)

El criterio 1.4.11, también de nivel AA, exige al menos 3:1 frente a los colores adyacentes para dos tipos de elementos: la información visual necesaria para identificar componentes de interfaz y sus estados (salvo componentes inactivos o apariencia determinada por el navegador sin modificación del autor) y las partes de gráficos necesarias para comprender el contenido (salvo cuando una presentación concreta es esencial para la información).

En la práctica, cuando sirven para identificar el componente o su estado, el borde de un campo, la marca de una casilla de verificación o la flecha de un desplegable deben alcanzar 3:1. También un indicador de foco personalizado por el autor; el estilo de foco por defecto del navegador, si no se modifica, está exento del ratio pero debe seguir siendo visible. El W3C da cifras: una casilla con borde gris #9D9D9D sobre blanco (2,7:1) falla, mientras que un campo con borde #767676 sobre blanco cumple. Un indicador de foco #AAA definido por el autor, a 2,3:1 sobre blanco, también falla.

El criterio no exige un borde visible en cada botón: si un control contiene texto o un icono con contraste suficiente, no hace falta delimitar su zona activa. Sí hace falta un indicador de foco con contraste suficiente. Los efectos de hover añadidos por el autor no necesitan llegar a 3:1, siempre que no hagan que el componente, ni los indicadores de otros estados como el foco o la selección, pierdan un contraste suficiente.

En los gráficos, cada línea de una curva o porción de un gráfico circular necesaria para comprender debe contrastar a 3:1. Deja de aplicarse si etiquetas y valores en texto transmiten la misma información, si la información está disponible de otra forma, como una tabla, o si la presentación es esencial: banderas, fotos, capturas de pantalla, mapas de calor. El texto dentro de un gráfico sigue sujeto al 1.4.3. Un texto muy estilizado, o caracteres usados como símbolos, como una «X» para cerrar o un «>» como flecha, entran en el contraste no textual.

Cómo medir el contraste de color de una página

La relación se calcula con (L1 + 0,05) / (L2 + 0,05), donde L1 es la luminancia relativa del color más claro y L2 la del más oscuro. Va de 1:1 a 21:1. El contraste se calcula de modo que el tono no sea un factor clave. Hay herramientas que lo calculan automáticamente; el W3C cita varias, como Colour Contrast Analyser, a título informativo y sin respaldarlas.

Para un resultado fiable, use los colores que da el navegador o los definidos en el marcado y las hojas de estilo, no los píxeles en pantalla, que el suavizado puede alterar. Para el 1.4.3, si no se especifica color de fondo, se asume blanco. Pero definir un color de texto sin color de fondo, o al revés, es en sí un fallo (F24), porque se desconoce el color por defecto del usuario. Una imagen de fondo sin contraste suficiente con el texto superpuesto es otro fallo documentado (F83).

• Revise también el texto de ejemplo (placeholder) y el texto que aparece al pasar el ratón o con el foco: los cubre el 1.4.3.
• Para cada componente (enlace, botón, campo), localice los indicadores visuales que muestran que existe y su estado, pruébelos al cargar la página y luego en cada estado.
• Para cada gráfico informativo, compruebe cada objeto gráfico frente a sus colores adyacentes; si usa varios colores o un degradado, pruebe la zona de menor contraste y, si está por debajo de 3:1, suponga que es invisible: ¿se sigue entendiendo el objeto?
• Con un degradado, tome el color central de la zona relevante y pregúntese si el objeto sigue siendo identificable sin el color adyacente insuficiente.

Preguntas frecuentes

Más sobre el tema en Conformly

• Cómo corregir un contraste de color insuficiente en HTML
• Criterio RGAA 3.2 sobre el contraste del texto
• Criterio RGAA 3.3 sobre el contraste de componentes

Fuentes

Este artículo se basa en las fuentes oficiales citadas al final de la página.

• W3C — Comprendre 1.4.3
• W3C — Comprendre 1.4.11