¿Qué ratio de contraste necesito para pasar WCAG AA?

El texto normal del cuerpo necesita al menos 4.5:1 contra su fondo. El texto grande (24px en peso normal o 18.66px en negrita, y más) y los elementos de UI sin texto, como iconos y bordes de campos, necesitan al menos 3:1.

¿El texto blanco sobre el color de mi marca también tiene que pasar?

Sí. Cualquier texto que el usuario necesite leer tiene que cumplir el umbral, incluido el texto blanco o claro sobre un fondo de color. Si el color de marca es demasiado claro, el texto blanco sobre él a menudo queda por debajo de 4.5:1.

¿Puedo simplemente agrandar el texto para que pase?

Un texto más grande o en negrita baja el requisito de 4.5:1 a 3:1, así que un par que está justo en el límite puede llegar a cumplir. Úsalo solo cuando el aumento de tamaño encaje con el diseño. Es un último recurso, no una forma de mantener un contraste realmente bajo.

¿Tengo que cambiar el color de mi marca para pasar el contraste?

Normalmente no. Conserva el color de marca para fondos, titulares grandes y detalles, y usa un casi negro o casi blanco para el texto del cuerpo. Rara vez hace falta repintar la marca en sí.

5 arreglos de contraste de color que sí funcionan

Una guía ordenada para corregir los pares de contraste que fallan sin perder tu marca ni tu maquetación.

Pasaste un verificador, un par falló y ahora tienes un número mirándote fijamente. La parte difícil no es encontrar el fallo. Es corregirlo sin aplastar el diseño que ya lanzaste. La mayoría de los consejos se quedan en “aumenta el contraste”, lo cual es cierto e inútil. Aquí tienes un conjunto de arreglos ordenados, del menos al más disruptivo, para que puedas recurrir al cambio más pequeño que supere la prueba.

TL;DR: Oscurece o aclara el texto primero. Si el color en sí es la marca, llévalo al fondo y usa casi negro o casi blanco para las palabras. Las capas superpuestas rescatan el texto sobre fotos. Agrandar el texto es un recurso, no una solución.

Qué buscas conseguir

WCAG AA tiene dos números que conviene memorizar. El texto normal necesita un ratio de contraste de al menos 4.5:1 contra su fondo. El texto grande necesita 3:1, donde grande significa 24px o más en peso normal, o 18.66px o más en negrita. Ese mismo mínimo de 3:1 cubre la UI sin texto: iconos, anillos de foco, bordes de campos y cualquier cosa que el usuario tenga que percibir para usar la página.

El ratio de contraste va de 1:1 (colores idénticos, invisible) a 21:1 (negro puro sobre blanco puro). El ratio depende de la luminancia relativa de ambos colores, no del tono, así que dos colores que se ven distintos pueden fallar igual si están a un brillo parecido. Por eso un enlace azul saturado sobre un fondo rojo saturado puede ser ilegible aunque los tonos choquen con fuerza.

Elige el arreglo que encaje con lo que está fijo en tu diseño y lo que tienes libertad para mover.

Arreglo 1: Lleva el texto a más oscuro o más claro

Esto es lo primero que hay que probar casi siempre. El color del texto rara vez es intocable, así que ajústalo hasta que pase. Sobre un fondo claro, oscurece el texto. Sobre un fondo oscuro, aclaralo. Conservas la maquetación, el espaciado y, por lo general, el tono.

Un fallo habitual es el texto del cuerpo en gris medio que se veía elegante en el mockup.

Elemento	Antes	Después	Fondo	Ratio antes	Ratio después
Texto del cuerpo	`#999999`	`#595959`	`#FFFFFF`	2.85:1	7.0:1
Enlace sobre oscuro	`#6699CC`	`#9FC2E8`	`#1A1A1A`	3.9:1	8.4:1

El tono sigue siendo reconociblemente el mismo. Solo moviste su luminosidad. Este es el arreglo menos disruptivo y el que resuelve más fallos, así que empieza por aquí antes de tocar nada estructural.

Arreglo 2: Conserva el color de marca, pero no en el texto

A veces el color que falla es el de la marca, y no quieres repintar tu identidad solo para contentar a un verificador. No tienes por qué. Lleva el color de marca a donde no cargue con la lectura.

Digamos que tu marca es un ámbar cálido, #F0A500. El texto ámbar sobre blanco es un fallo clásico porque el ámbar es claro. La solución es dejar que el ámbar gobierne los fondos, los titulares grandes, los botones y los detalles, mientras el cuerpo del texto cambia a casi negro.

Uso	Color	Fondo	Ratio	Veredicto
Texto del cuerpo en ámbar	`#F0A500`	`#FFFFFF`	1.9:1	Falla
Texto del cuerpo en casi negro	`#1A1A1A`	`#FFFFFF`	17.4:1	Pasa
Titular grande en ámbar	`#F0A500`	`#1A1A1A`	9.1:1	Pasa en grande y normal
Texto casi blanco en botón ámbar	`#FFFFFF`	`#F0A500`	1.9:1	Falla
Texto oscuro en botón ámbar	`#1A1A1A`	`#F0A500`	9.1:1	Pasa

La marca se lee fuerte y claro como un campo de color. Las palabras quedan en casi negro o casi blanco. Fíjate en que el blanco sobre ámbar falla con la misma dureza que el ámbar sobre blanco, porque la diferencia de luminancia es la misma en ambos sentidos. Sobre un color de marca claro, el texto oscuro es la jugada.

Arreglo 3: Pon una capa entre el texto y un fondo recargado

El texto sobre una foto o un degradado no tiene un único color de fondo, así que un verificador ni siquiera puede darte un solo número honesto. La zona más oscura de la imagen quizá pase, mientras que el cielo brillante detrás del titular falla. La solución es controlar el fondo de forma local con una capa superpuesta.

Funcionan dos enfoques. Una capa sólida es un panel negro o blanco semitransparente colocado detrás del bloque de texto. Una capa en degradado pasa de opaca junto al texto a transparente al alejarse, lo que disimula el borde del panel.

Supón que un titular en texto blanco está sobre una foto cuya región más clara es, más o menos, #C8D2DC.

Configuración	Fondo efectivo	Ratio	Veredicto
Texto blanco, sin capa, sobre cielo claro	`#C8D2DC`	1.4:1	Falla feo
Texto blanco sobre capa negra al 60% en ese cielo	alrededor de `#4F5559`	6.8:1	Pasa

Elige la opacidad de la capa probando contra la peor zona que cruza el texto, no contra el promedio. Si la imagen cambia (distintas fotos en un carrusel), pon la capa lo bastante fuerte para la más brillante. Un desenfoque detrás del texto ayuda a la percepción, pero no cambia el ratio, así que no te apoyes en él para pasar.

Arreglo 4: Agranda para alcanzar el umbral de 3:1 (con cuidado)

El texto grande solo necesita 3:1, así que un par que no llega a 4.5:1 todavía puede cumplir si haces el texto grande. Esto ayuda de verdad a un titular que se queda por poco.

Elemento	Color	Fondo	Ratio	A 16px normal	A 24px o 19px negrita
Subtítulo	`#767676`	`#FFFFFF`	4.54:1	Pasa	Pasa
Etiqueta de sección	`#949494`	`#FFFFFF`	3.0:1	Falla	Pasa

Usa esto cuando el diseño ya pide un titular grande y te quedas por un pelo. No lo uses como permiso para mantener un contraste flojo en el cuerpo subiéndolo todo a 24px, porque eso rompe tu escala tipográfica y deja igual fallando al texto pequeño. Trata el tamaño como una herramienta para titulares, no como un aprobado general.

Arreglo 5: Mueve el fondo cuando el texto está bloqueado

De vez en cuando el color del texto es el valor de marca fijo, escrito en un lockup de logo o en una guía estricta, y de verdad no puedes tocarlo. Entonces cambia el fondo en su lugar.

Si la marca exige un azul concreto para el logotipo, #2E5C8A, y está sobre una barra gris media que falla, oscurece o aclara la barra hasta que el par supere la prueba.

Elemento	Texto	Fondo antes	Fondo después	Ratio antes	Ratio después
Logotipo de marca sobre barra	`#2E5C8A`	`#7A7A7A`	`#F2F2F2`	1.6:1	5.1:1

Aclarar la barra llevó el par de un fallo claro a un aprobado claro sin tocar el azul protegido. Cuando el primer plano no se puede mover, el fondo es tu palanca.

Orden de trabajo

Recorre la lista en orden y detente en el primer arreglo que encaje. Ajusta el texto. Si el color es la marca, sácalo del texto y usa casi negro o casi blanco para leer. Añade una capa cuando el fondo sea una imagen o un degradado. Agranda solo cuando el diseño ya pida tipografía grande. Ajusta el fondo al final, cuando el color del texto está bloqueado.

Comprueba cada arreglo con números reales, no a ojo, porque un par puede verse bien en tu monitor brillante y fallar en una pantalla más tenue a plena luz del día. Pronto llegarán a color.hivly.net herramientas de contraste gratuitas, dentro del navegador, que calculan estos ratios y sugieren pares que pasan. Hasta entonces, cualquier verificador de contraste serio te dará el ratio que necesitas para confirmar que el arreglo funcionó.