Esta página fue traducida con asistencia de IA. El original en inglés es la versión autorizada.
El contraste es el fundamento de la legibilidad. Una forma de letra puede estar bellamente dibujada, generosamente espaciada y compuesta a un tamaño cómodo, y aun así fracasar si no se separa con nitidez de su fondo. En 2005 poco más podíamos decir que "texto oscuro sobre fondo claro, y bastante diferencia entre ambos". Hoy el contraste es medible, verificable y está incorporado a la legislación de muchas jurisdicciones — y la propia medición se ha convertido en objeto de investigación seria.
El modelo de contraste de WCAG 2.x
Las Pautas de Accesibilidad para el Contenido Web (WCAG) 2.x definen el contraste como una relación entre la luminancia relativa de dos colores, que va de 1:1 (idénticos) a 21:1 (negro puro sobre blanco puro). Tres criterios de conformidad la aplican:
- 1.4.3 Contraste (mínimo), nivel AA — el texto de cuerpo debe alcanzar 4.5:1; el texto grande (aproximadamente 24 píxeles, o 19 píxeles en negrita) puede bajar a 3:1.
- 1.4.6 Contraste (mejorado), nivel AAA — 7:1 para el texto de cuerpo, 4.5:1 para el texto grande, pensado para lectores con baja visión moderada.
- 1.4.11 Contraste no textual, nivel AA — 3:1 para componentes de interfaz y gráficos significativos: bordes de campos, indicadores de foco, iconos, elementos de gráficas.
Dónde se queda corta la matemática
La fórmula de WCAG 2.x es una medida física, no perceptual, y sus limitaciones están hoy bien documentadas por el propio grupo de trabajo. La relación trata la polaridad como simétrica: puntúa el blanco sobre negro igual que el negro sobre blanco, aunque el ojo no los experimenta igual. Solo maneja el peso y el tamaño de la fuente mediante un único umbral rudimentario de "texto grande", aunque una tipografía fina y ligera a 16 píxeles y una en negrita con la misma relación se leen de manera muy distinta. Y cerca del extremo oscuro del rango, la fórmula puede aprobar pares de colores que los observadores humanos juzgan débiles, mientras rechaza pares que se leen aceptablemente.
La línea de investigación APCA
El trabajo preliminar hacia WCAG 3.0 incluye un candidato a reemplazo, el Algoritmo de Contraste Perceptual Accesible (APCA), desarrollado a través de la investigación sobre contraste visual del W3C. Difiere del modelo 2.x en tres aspectos importantes: tiene base perceptual en lugar de puramente luminométrica; es sensible a la polaridad, puntuando de forma distinta el claro-sobre-oscuro y el oscuro-sobre-claro; y sus umbrales escalan con el tamaño y el peso de la fuente, de modo que una tipografía filiforme y delicada se somete a un estándar más estricto que una tipografía de texto robusta.
APCA sigue siendo una dirección en borrador, no un estándar de conformidad. Por ahora la posición práctica es: conformarse a WCAG 2.x, y usar la manera de pensar de APCA — el peso y el tamaño importan, la polaridad importa — como criterio de diseño superpuesto.
Más contraste no siempre es mejor
Es tentador tratar el contraste como un dial que se gira al máximo. A muchos lectores con baja visión, el contraste máximo les ayuda de verdad. Pero a una minoría significativa les perjudica. Un contraste muy alto — especialmente texto blanco puro sobre negro puro — produce halación, un resplandor o desenfoque alrededor de las formas de las letras, en particular para lectores con astigmatismo o sensibilidad a la luz. Algunos lectores con dislexia o estrés visual señalan que el negro sobre blanco absoluto resulta agresivo y prefieren un fondo ligeramente suavizado, como texto casi negro sobre una superficie blanco hueso.
La lección no es bajar el contraste por debajo de los mínimos. Es que los requisitos de contraste definen un suelo, y la buena tipografía trabaja en el rango por encima de ese suelo sin correr hacia el techo. Un casi negro, como un gris muy oscuro sobre un blanco hueso cálido, supera el AAA con holgura y se lee con más calma que #000 sobre #FFF. Mejor aún, los sistemas pueden dejar elegir al lector: la media query prefers-contrast informa cuándo un usuario ha pedido a su sistema operativo más (o menos) contraste, y una hoja de estilos puede responder reforzando el color del texto, engrosando los bordes y eliminando las translucideces decorativas. En Windows, el modo de colores forzados va más lejos y sustituye la paleta por la del propio usuario; los diseños deben tolerarlo en lugar de combatirlo.
Nunca codificar el significado solo en el matiz
Aproximadamente uno de cada doce hombres, y una proporción mucho menor de mujeres, tiene alguna forma de deficiencia en la visión del color, más comúnmente al distinguir rojos de verdes. El criterio WCAG 1.4.1 (Uso del color) existe para ellos: el color puede reforzar el significado, pero nunca debe portarlo en solitario. Un enlace distinguido del texto de cuerpo solo por el matiz es invisible para muchos lectores — acompáñelo de un subrayado. Un estado de error señalado solo por un borde rojo necesita además un icono o un mensaje. Una gráfica cuyas series difieren solo en el matiz necesita etiquetas, tramas o anotación directa.
Es un viejo principio del impreso con ropa nueva. Los diseñadores de información del siglo XX sabían que un mapa legible en fotocopia era un mapa más fuerte. Diseñe como si su página pudiera verse en escala de grises, porque para algunos lectores, en la práctica, así es.
Por qué este capítulo es nuevo
Cuando se escribió la primera edición de estas pautas, WCAG 2.0 aún no se había publicado; no había ningún requisito numérico de contraste que citar, ninguna herramienta en el navegador para verificarlo y ninguna media query mediante la cual un lector pudiera expresar una preferencia de contraste. Las dos décadas transcurridas produjeron el estándar de 4.5:1, su adopción legal, un corpus de crítica a su fórmula y un sucesor perceptual que ahora toma forma en el borrador de WCAG 3.0. El contraste pasó del gusto a la medición — y luego, útilmente, a un debate sobre qué debería medir la medición.
En CSS
:root {
--ink: #1f1a13;
--paper: #f6f1e7; /* ≥ 4.5:1 against ink (WCAG 1.4.3) */
--accent: #b03a10; /* check at the size and weight it's used */
}
@media (prefers-contrast: more) {
:root { --ink: #000; --paper: #fff; }
}Recomendaciones
- Cumpla WCAG 1.4.3 (4.5:1 para texto de cuerpo) como suelo absoluto; aspire al 1.4.6 (7:1) cuando la audiencia tienda a mayor edad o baja visión.
- Aplique el 1.4.11: los indicadores de foco, los bordes de campos y los iconos significativos necesitan 3:1 frente a su entorno.
- Juzgue las tipografías finas y ligeras con más rigor del que sugiere la relación por sí sola; el peso y el tamaño cambian el contraste efectivo.
- Evite el negro puro sobre blanco puro para la lectura de textos largos; un gris muy oscuro sobre un blanco hueso suave reduce la halación sin sacrificar la conformidad.
- Nunca deje que el matiz porte el significado en solitario — subraye los enlaces, etiquete los estados, anote las gráficas.
- Dé soporte a
prefers-contrasty tolere el modo de colores forzados en lugar de anularlo. - Siga el trabajo sobre APCA en el borrador de WCAG 3.0, pero confórmese hoy a 2.x.