Verificación de Contraste WCAG: Una Guía Práctica
Publicado el 2026-07-15
La relación de contraste no es solo una casilla de cumplimiento, es la diferencia entre un texto que la gente puede leer y uno que no. Aquí está cómo se calcula y qué significan realmente los umbrales.
Por qué importa el contraste
Un texto que no contrasta lo suficiente con su fondo es difícil de leer para todos, y puede ser completamente ilegible para personas con baja visión o daltonismo. Las Pautas de Accesibilidad al Contenido Web (WCAG) establecen relaciones de contraste mínimas específicamente para que el texto siga siendo legible para el rango más amplio posible de capacidades visuales, y cumplirlas es a la vez una mejora genuina de usabilidad y, en muchas jurisdicciones, un requisito legal para los sitios web de cara al público.
Cómo se calcula realmente la relación de contraste
La relación de contraste es una comparación entre la luminancia relativa (brillo percibido) del color del texto y el color de fondo, expresada como una relación desde 1:1 (idéntico, sin contraste alguno) hasta 21:1 (negro puro sobre blanco puro, el máximo contraste posible). No es una simple comparación de brillo, la luminancia se calcula usando una fórmula que pondera el rojo, verde y azul de manera diferente, ya que el ojo humano percibe el verde como más brillante que el rojo o el azul a la misma intensidad, y aplica una corrección gamma para tener en cuenta cómo los monitores realmente muestran el color. No necesitas calcular esto a mano, pero saber que se trata de brillo percibido (no solo valores RGB en bruto) ayuda a explicar algunos resultados genuinamente contraintuitivos, como por qué ciertos colores de tono medio que se ven razonablemente distintos pueden aun así fallar.
Los umbrales reales
WCAG 2.1 define dos niveles de conformidad. AA, el estándar al que apunta la mayoría de las organizaciones, requiere una relación de contraste de al menos 4.5:1 para texto normal y 3:1 para texto grande (definido como 18pt regular o 14pt negrita y mayor). AAA, un nivel más estricto, requiere 7:1 para texto normal y 4.5:1 para texto grande. La mayoría de los requisitos legales de accesibilidad (como la ADA en EE.UU., interpretada a través de WCAG, o el estándar EN 301 549 en la UE) hacen referencia a AA como línea base, AAA generalmente se trata como una meta aspiracional más que un requisito estricto.
Errores comunes de contraste
El texto gris claro sobre un fondo blanco es el fallo más común con diferencia, a menudo se ve “limpio” y “moderno” en una maqueta de diseño pero falla AA gravemente y es genuinamente difícil de leer para muchos usuarios. El texto de marcador de posición dentro de campos de formulario suele tener demasiado poco contraste, y como desaparece en cuanto empiezas a escribir, los diseñadores a menudo no notan que es un problema. El texto superpuesto sobre fotos o degradados es arriesgado porque la relación de contraste puede aprobar en una zona de la imagen y fallar en otra, añadir una superposición de color sólido o una sombra de texto detrás del texto es una solución común. Los colores de marca, especialmente las paletas de marca en pastel o de saturación media, frecuentemente fallan los requisitos de contraste cuando se usan como color de texto y necesitan una variante más oscura o más clara reservada específicamente para el texto.
Cómo verificar tus propios colores
Elige tu color de primer plano (texto) y tu color de fondo, luego verifica la relación resultante contra los umbrales AA y AAA para el tamaño de texto que estás usando. Si una combinación falla, la solución más fiable suele ser oscurecer el color del texto (para fondos claros) o aclararlo (para fondos oscuros) hasta que supere el umbral, en lugar de cambiar el fondo, ya que el color de fondo suele estar más ligado a la identidad de marca que el color del texto.