Contraste de color accesible: ratios WCAG, pruebas y arreglos

El texto gris claro sobre fondo blanco queda limpio en un archivo de diseño. En un móvil a pleno sol, o para alguien con baja visión, cuesta leerlo. Además, es el fallo de accesibilidad más común que existe: el WebAIM Million 2026 (se abre en una pestaña nueva) encontró texto con poco contraste en el 83,9 % de las páginas de inicio del millón de webs principales, con una media de 34 casos distintos por página.

La buena noticia es que el contraste se puede medir, los umbrales están claros y los arreglos suelen ser baratos. Esta guía le da las cifras, las herramientas gratuitas y una forma de corregir los colores de marca sin empezar de cero.

¿Qué es la relación de contraste de color?

La relación de contraste es un número que compara el brillo relativo, o luminancia, de dos colores, normalmente el del texto y el de su fondo. Las WCAG la calculan con una fórmula fija, y el resultado va de 1:1 (ninguna diferencia, blanco sobre blanco) a 21:1 (negro sobre blanco). Cuanto más alto es el número, más fácil es distinguir los dos colores.

La fórmula es (L1 + 0,05) / (L2 + 0,05), donde L1 es la luminancia relativa del color más claro y L2 la del más oscuro. Nunca tendrá que calcularla a mano, pero un detalle importa: solo cuenta la luminancia, no el tono. Por eso un texto rojo sobre fondo verde puede verse muy vivo y aun así puntuar mal.

El otro detalle que se pasa por alto es el redondeo. El documento explicativo del W3C sobre el 1.4.3 (se abre en una pestaña nueva) dice que los valores calculados «no deben redondearse (por ejemplo, 4,499:1 no alcanzaría el umbral de 4,5:1)». Así, el gris #767676 sobre blanco (4,54:1) cumple, mientras que el #777777 sobre blanco (4,48:1) no cumple, aunque nadie podría distinguirlos a simple vista.

¿Qué relación de contraste exigen las WCAG?

Para el nivel AA, al que remiten la mayoría de las leyes y contratos, el texto normal necesita al menos 4,5:1 con su fondo y el texto grande, 3:1 (criterio de conformidad 1.4.3). Los componentes de la interfaz y los gráficos con significado necesitan 3:1 respecto a los colores contiguos (1.4.11). El nivel AAA, más estricto, pide 7:1 para el texto normal y 4,5:1 para el texto grande (1.4.6).

¿Por qué 4,5:1? El W3C explica que este valor «compensa la pérdida de sensibilidad al contraste que suelen experimentar los usuarios con una pérdida de visión equivalente a una agudeza de aproximadamente 20/40» (en la escala decimal habitual en Europa, en torno a 0,5). Es decir, está pensado para personas con una visión moderadamente reducida, lo que incluye a muchos clientes mayores que nunca dirían de sí mismos que tienen una discapacidad.

Hay textos exentos: logotipos y nombres de marca, texto puramente decorativo, texto que nadie puede ver, texto dentro de una imagen con otro contenido visual importante y texto de controles inactivos (deshabilitados). Su logotipo puede quedarse como está. Un párrafo escrito en el color claro de su logotipo, no.

¿Qué se considera texto grande?

En las WCAG, texto grande significa al menos 18 puntos, o al menos 14 puntos si está en negrita. El W3C lo traduce a unos 24 píxeles CSS y 18,5 píxeles en negrita. Todo lo que sea más pequeño necesita los 4,5:1 completos. El cuerpo de texto, los pies de foto, las etiquetas de los formularios, los precios y los enlaces del pie de página casi nunca son texto grande, así que necesitan la relación más alta.

Veamos cómo funciona. El gris #949494 sobre blanco da 3,03:1. Vale para un encabezado de 28 píxeles y no cumple en un párrafo de 16 píxeles del mismo color. Muchas webs aprueban en los encabezados y suspenden en todo lo que hay debajo.

Las fuentes finas y decorativas requieren más cuidado. El W3C advierte de que, por el suavizado de bordes, «las fuentes especialmente finas o inusuales pueden mostrarse en los navegadores con un color mucho más tenue» que el que usted eligió. Si su fuente de marca tiene un peso ligero, deje margen por encima de 4,5:1 en lugar de apuntar a 4,51.

¿El contraste se aplica a botones, iconos, indicadores de foco y gráficos?

Sí. Según el criterio de conformidad 1.4.11 (nivel AA), todo lo que hay que ver para identificar un control, su estado o un gráfico necesita 3:1 respecto a los colores contiguos. Eso incluye los bordes de los campos de formulario, los iconos sin etiqueta de texto, los contornos del foco, los estados de casillas e interruptores, y las líneas y sectores de los gráficos. El texto dentro de un botón sigue necesitando 4,5:1.

• Campos de formulario: un borde gris claro #CCCCCC sobre blanco da 1,61:1. Si esa línea tenue es lo único que indica dónde escribir, no cumple.
• Botones: las WCAG no exigen un borde visible alrededor de cada botón. El documento explicativo del W3C sobre el 1.4.11 (se abre en una pestaña nueva) dice que solo hace falta un límite cuando no hay otra forma visual de identificar el control. Si un botón solo se reconoce por su forma de color, esa forma necesita 3:1 respecto a la página.
• Iconos: una lupa de búsqueda, un corazón de lista de deseos o un icono de cesta sin texto al lado necesitan 3:1.
• Indicadores de foco: el contorno que muestra el foco del teclado debe contrastar con el fondo que lo rodea. Nuestra guía de las WCAG 2.2 explica los criterios de foco más recientes.
• Gráficos: las líneas de un gráfico de líneas y los sectores de un gráfico circular necesitan 3:1, salvo que los mismos valores también se muestren como texto.
• Los controles deshabilitados están exentos, aunque la gente siga necesitando saber si un botón se puede pulsar.

Los enlaces dentro del texto son un caso especial. Si solo se distinguen por el color, sin subrayado, la técnica G183 (se abre en una pestaña nueva) del W3C pide 3:1 entre el color del enlace y el del texto que lo rodea, y ambos siguen necesitando 4,5:1 con el fondo. Encontrar tres colores que cumplan todo eso es difícil. Un subrayado es mucho más sencillo.

¿Cómo se comprueba el contraste de color?

Use un verificador de contraste gratuito para pares de colores concretos, las herramientas para desarrolladores del navegador para las páginas en vivo y un análisis automático para localizar las zonas problemáticas de toda la web. Después revise a ojo lo que las herramientas no ven: texto sobre fotos y degradados, estados al pasar el ratón y con foco, textos de ejemplo y mensajes de error. Casi todo esto lleva unos minutos por plantilla de página.

• WebAIM Contrast Checker (se abre en una pestaña nueva): introduzca dos códigos hexadecimales y obtendrá la relación, con el resultado para texto normal, texto grande y objetos gráficos. Su control deslizante de luminosidad viene bien para encontrar el tono más cercano que cumple.
• Colour Contrast Analyser (se abre en una pestaña nueva): una aplicación de escritorio gratuita de Vispero para Windows y macOS. Su cuentagotas toma muestras de cualquier píxel de la pantalla, algo útil para texto sobre imágenes, PDF y apps, e incluye un simulador de daltonismo.
• Chrome DevTools: inspeccione un texto y abra el selector de color. Su sección de relación de contraste (se abre en una pestaña nueva) muestra líneas para AA y AAA y puede sugerir un color que cumpla. El panel CSS Overview enumera todos los problemas de contraste de la página.
• Verificadores automáticos: las extensiones del navegador y Lighthouse señalan el texto con poco contraste de toda una página, pero a menudo marcan el texto sobre imágenes o degradados como pendiente de revisión manual en lugar de darlo por bueno o por malo.

Donde no llegan las herramientas, tome muestras manualmente. En un texto sobre una foto de portada, compruebe la parte más clara de la imagen detrás de las letras más claras; el W3C recoge como fallo conocido las imágenes de fondo sin suficiente contraste (F83). Pase el ratón por los botones, llegue a ellos con Tab, provoque un error en un formulario y cambie al modo oscuro si lo ofrece. Un tema oscuro también puede fallar: el gris #757575 sobre un fondo #121212 da 4,07:1. Nuestra guía sobre cómo comprobar la accesibilidad de su web sitúa el contraste junto a las demás comprobaciones manuales rápidas.

¿Cómo corregir el poco contraste sin cambiar de marca?

Normalmente, añadiendo un tono más oscuro de su color de marca para el texto y los elementos pequeños, y reservando el original para los encabezados grandes, los fondos y las ilustraciones. Muchos colores de marca solo fallan en tamaños pequeños. Cambiar el texto blanco por texto oscuro sobre un color de marca claro suele bastar, y la mayoría de los visitantes solo notará que la página se lee mejor.

1. Cree una versión apta para texto de cada color de marca, de al menos 4,5:1 con sus fondos principales, y úsela para el cuerpo de texto, los enlaces y los iconos pequeños.
2. Use el color brillante original para los encabezados grandes (ahí basta con 3:1), los fondos, las ilustraciones y la decoración.
3. Sobre colores de marca claros, cambie el texto de los botones de blanco a oscuro.
4. Ponga un panel opaco o semitransparente detrás del texto que va sobre fotos.
5. Compruebe todos los estados: al pasar el ratón, con foco, visitado, seleccionado, con error y texto de ejemplo.
6. Guarde los pares que cumplen como tokens de diseño o ajustes del tema, para que las páginas nuevas los hereden en lugar de reinventarlos.

Diseñar para el daltonismo: por qué el color no basta

El contraste y el color son problemas distintos. Alrededor de 1 de cada 12 hombres y 1 de cada 200 mujeres tienen alguna alteración de la visión del color, sobre todo rojo-verde, según Colour Blind Awareness (se abre en una pestaña nueva). El criterio 1.4.1 de las WCAG (se abre en una pestaña nueva) (nivel A) dice que el color no debe ser el único medio visual para transmitir información, así que acompáñelo de texto, iconos, tramas o subrayados.

• Errores de formulario: un borde rojo por sí solo no cumple. Añada un mensaje como «Introduzca un código postal» junto al campo, a ser posible con un icono.
• Existencias y estado: un punto verde o rojo junto a un producto no le dice nada a muchos compradores. Escriba «Disponible» o «Agotado».
• Gráficos: una leyenda que depende de emparejar colores es difícil de leer. Etiquete las líneas directamente o use tramas y estilos de línea distintos.
• Enlaces: en el cuerpo de texto, subráyelos, por lo explicado más arriba.

Para ver el problema por sí mismo, las DevTools de Chrome pueden emular deficiencias de la visión, y el Colour Contrast Analyser también tiene un simulador. Aquí el contraste también ayuda: la relación mide la luminosidad, no el tono, así que dos colores con una relación alta siguen distinguiéndose aunque sus tonos se parezcan. Para saber más sobre cómo configuran sus dispositivos las personas con baja visión y otras discapacidades, consulte cómo usan la web las personas con discapacidad.

¿Bastan los modos de alto contraste y los botones de contraste?

No. Los temas de contraste del sistema operativo y los botones de contraste en la página ayudan a quien sabe que necesita más contraste y lo activa. Pero las WCAG evalúan su página en su estado por defecto, así que los colores que ve primero cada visitante tienen que cumplir. Un botón de contraste es una opción extra para quien quiere más, no un arreglo para unos colores que no cumplen.

Algunas personas con discapacidad usan los temas de contraste de Windows, que sustituyen los colores de su web por los del tema. Merece la pena probar su web con uno activado: los iconos hechos con imágenes de fondo pueden desaparecer, y también los estilos de foco dibujados solo con una sombra (box-shadow). La media query de CSS prefers-contrast le permite además ofrecer una versión de mayor contraste a quien la haya pedido en los ajustes de su sistema.

Nuestro propio widget tiene un ajuste de contraste y un perfil para daltonismo, y a algunos visitantes les resultan útiles. Aun así, le diríamos lo mismo: si el cuerpo de texto de su web es #999999 sobre blanco, cambie el CSS. El widget da a quien quiere más contraste una forma de conseguirlo. No hace que unos colores por defecto que no cumplen pasen a cumplir, y la referencia de las WCAG de nuestra documentación también lo dice.