Contraste de color para la accesibilidad, con el comprobador

Por qué te interesa

Una línea de texto gris sobre una página blanca puede verse elegante en tu monitor y ser ilegible en un móvil a pleno sol, o para un lector con baja visión o con una deficiencia de visión del color. El contraste es la parte medible de ese problema. Las Pautas de Accesibilidad para el Contenido Web (WCAG) lo convierten en un número, la relación de contraste, con marcas de aprobado que puedes comprobar antes de entregar un diseño.

Esta guía muestra cómo leer ese número con el comprobador de Herramientas de color, qué umbrales se aplican y por qué una relación que pasa no lo cuenta todo, sobre todo cuando los colores transmiten significado por sí solos.

Cómo hacerlo, con la herramienta

Herramientas de color tiene tres pestañas: Paleta, Degradado y Convertir y contraste. La comprobación de contraste está en la tercera y funciona en tu dispositivo.

1. Abre Convertir y contraste. Elige la pestaña bajo el título.
2. Introduce tus dos colores. Fija Color del texto y Color de fondo. Puedes escribir en los campos HEX, RGB o HSL y los otros dos se actualizan, así que sirve un valor copiado de un archivo de diseño en cualquiera de los formatos.
3. Indica si el texto es grande. Marca Texto grande (18pt o más, o 14pt en negrita) si corresponde.
4. Lee los veredictos. La herramienta muestra la Relación de contraste y dos líneas, AA — contraste mínimo y AAA — contraste mejorado, cada una marcada como Cumple o No cumple.
5. Ajusta y comparte. Cambia un color y observa cómo se actualiza el veredicto. Copiar enlace a este resultado guarda los ajustes en una URL que puedes enviar a un compañero.

Si aún estás eligiendo colores, crea una paleta base en la pestaña Paleta, con una armonía como Complementaria o Análoga, y lleva después a la pestaña de contraste los pares que pienses usar. Las armonías eligen tonos que se ven equilibrados, no pares que se lean bien juntos, así que comprueba siempre los pares de texto.

A qué prestar atención

Los umbrales. Para el texto normal, el nivel AA de WCAG pide una relación de al menos 4,5:1. El nivel AAA pide 7:1. El texto cuenta como grande a partir de 18pt, o de 14pt si es negrita. El texto grande necesita solo 3:1 para AA y 4,5:1 para AAA. La relación va desde 1:1, colores idénticos, hasta 21:1, negro sobre blanco. Esa misma marca de 3:1 es la que WCAG fija para las partes significativas de una interfaz, como el borde de un campo de entrada, aunque el comprobador solo compara los dos colores que escribes.

Quedarse cerca es no llegar. Una relación de 4,4 no alcanza la marca de 4,5. No redondees hacia arriba. Si un color de marca falla por poco, oscurece el texto o aclara un poco el fondo y vuelve a comprobar.

Cómo se calcula el número. La relación compara la luminancia relativa de los dos colores, una medida de lo brillante que es cada uno, después de convertir cada color de su valor sRGB almacenado a luz lineal. Esa conversión tiene un pequeño punto de corte. El comprobador usa 0,03928, el valor impreso en el texto de WCAG 2.x. El estándar sRGB más reciente da 0,04045. La diferencia es tan pequeña que las relaciones solo se separan en decimales lejanos, pero usar el valor de WCAG mantiene los resultados de esta herramienta alineados con las cifras publicadas de WCAG.

Convertir entre formatos puede mover un canal en una unidad. HEX, RGB y HSL usan valores de 8 bits, así que un viaje de ida y vuelta puede desplazar un canal en 1. Es redondeo, no un error, y no cambiará un veredicto salvo que estés justo en el límite.

El contraste no lo es todo con los colores categóricos. Los gráficos, los mapas y las insignias de estado suelen usar varios tonos para distinguir categorías, como un color por barra o por línea. La relación entre dos tonos de luminosidad parecida sale cercana a 1:1, aunque en un monitor en color se vean muy distintos. Eso es porque la fórmula mide solo la luminosidad, no el tono. Así que la relación de contraste es la prueba equivocada para saber si las categorías se distinguen. Las personas con deficiencia de visión del color pueden ver dos tonos así como el mismo color, y en escala de grises o en una impresión pueden fundirse del todo. Añade una segunda señal: etiquetas directas, distintos patrones de línea o formas de marcador, y una diferencia clara de luminosidad entre categorías vecinas. El comprobador puede ayudar con la parte de luminosidad, mostrando una relación baja entre dos colores de categorías contiguas, pero no puede decirte que la leyenda sea accesible.

La comprobación solo cubre los dos colores que introduces. No sabe nada de una foto detrás del texto, de una capa superpuesta ni del resto del diseño.

Preguntas frecuentes

¿Qué relación de contraste necesito para el texto del cuerpo?

Al menos 4,5:1 para cumplir WCAG AA y 7:1 para AAA. Si el texto es grande, de 18pt o más, o de 14pt o más en negrita, 3:1 cumple AA y 4,5:1 cumple AAA. Marca Texto grande en la herramienta para que aplique el par de umbrales correcto.

¿Por qué el comprobador dice que mis colores no cumplen si a mí me parecen bien?

Tu pantalla, tu vista y la luz de la habitación no son las del lector. La relación es un estándar repetible que no depende de ninguna pantalla en concreto. Si un par falla, toma el número como el hecho y ajusta los colores, en lugar de fiarte de cómo se ve en tu monitor.

¿Se aplica al texto de marcador de posición o a un botón desactivado?

Los controles desactivados están exentos en WCAG, pero el texto de marcador de posición es texto real y necesita contraste suficiente para leerse. Ante la duda, comprueba el par y prefiere una etiqueta visible a instrucciones que solo estén en el marcador de posición.