¿Tu texto pasa el contraste WCAG? Cómo comprobarlo antes de publicar tu diseño
Si un diseñador te ha dicho «este texto no pasa el contraste» o quieres asegurarte de que tu paleta de marca es legible para todo el mundo, esta guía explica con ejemplos numéricos cómo funciona el cálculo de contraste WCAG que usa el verificador de contraste de color de ToolPico, y qué hacer cuando un par de colores falla.
Respuesta cortaEl ratio de contraste WCAG compara la luminancia relativa de dos colores y da un número entre 1:1 (idénticos) y 21:1 (negro puro sobre blanco puro). Cuanto más alto, más fácil es distinguir el texto del fondo.
La fórmula parte de los tres canales sRGB (rojo, verde, azul) de cada color, normalizados entre 0 y 1 y corregidos con la curva gamma estándar. Después se combinan con los pesos 0,2126×R + 0,7152×G + 0,0722×B para obtener la luminancia relativa (L) — el verde pesa más porque el ojo humano es más sensible a él que al rojo o al azul. El ratio final es (L_más_clara + 0,05) / (L_más_oscura + 0,05). El verificador hace este cálculo al instante en el navegador para cualquier par de colores que introduzcas en hex, rgb() o hsl(), sin enviar nada a un servidor.
Dato práctico: el gris medio #767676 sobre fondo blanco da aproximadamente 4,54:1 — justo por encima del mínimo AA para texto normal. Un gris ligeramente más claro, como #999999, ya baja de 3:1 y no serviría ni para texto grande.
AA vs AAA: qué nivel necesitas
Respuesta cortaAA es el nivel mínimo habitual: 4,5:1 para texto normal y 3:1 para texto grande o componentes de interfaz. AAA es más estricto: 7:1 para texto normal y 4,5:1 para texto grande.
La mayoría de sitios corporativos, tiendas online y aplicaciones apuntan a AA, que es también el nivel que suelen exigir las auditorías de accesibilidad y algunas normativas. AAA se reserva normalmente para contenido donde la legibilidad es crítica (por ejemplo, instrucciones médicas o legales) porque conseguir 7:1 en toda una interfaz suele limitar mucho la paleta de colores disponible. El «texto grande» tiene un umbral más bajo porque los caracteres de mayor tamaño ya son más fáciles de distinguir aunque el contraste sea algo menor.
Ejemplo (ilustrativo)
Ratio aprox.
AA texto normal
AAA texto normal
Texto oscuro sobre blanco
~17,9:1
Aprueba
Aprueba
Blanco sobre violeta #7C3AED
~4,9:1
Aprueba
No aprueba
Gris claro sobre blanco
~1,6:1
No aprueba
No aprueba
Estos valores son ejemplos ilustrativos para entender el orden de magnitud; comprueba siempre tus colores exactos con la herramienta antes de usarlos en producción, ya que un pequeño cambio de tono puede desplazar el ratio por encima o por debajo del umbral.
Verificar una paleta completa y el daltonismo
Respuesta cortaLa pestaña de verificación de paleta compara las 4 combinaciones posibles entre hasta 4 colores en una sola matriz, y la simulación de daltonismo muestra cómo se ve tu par elegido en protanopia, deuteranopia, tritanopia y acromatopsia.
Cuando tienes una paleta de marca con varios colores (por ejemplo, texto, fondo, acento y un color de estado como error o éxito), comprobar cada par manualmente es lento. La pestaña de paleta del verificador introduce hasta 4 colores y muestra el ratio de cada combinación por pares en una tabla, marcando en verde o rojo qué pares superan AA. Aproximadamente el 8% de los hombres tiene alguna forma de daltonismo rojo-verde, según cifras habituales citadas en estudios de accesibilidad, por lo que conviene comprobar también cómo se percibe tu paleta con la simulación de daltonismo antes de usar el color como única señal (por ejemplo, «rojo = error, verde = correcto»).
Contraste de componentes de interfaz: además del texto, WCAG exige un contraste mínimo de 3:1 para elementos gráficos y componentes de interfaz (bordes de botones, iconos, controles de formulario) frente a los colores adyacentes — el verificador incluye esta comprobación junto a los resultados de texto normal y texto grande.
Qué hacer cuando un color falla
Respuesta cortaSi un par de colores no llega al ratio objetivo, el verificador puede sugerir automáticamente el tono conforme más cercano ajustando la luminosidad del texto o del fondo, aplicable con un clic.
En los ajustes avanzados puedes elegir si prefieres ajustar el color del texto o el del fondo, y qué nivel objetivo quieres alcanzar (AA o AAA). La herramienta desplaza la luminosidad del color elegido hasta encontrar el punto más cercano al original que cumple el ratio necesario, para que puedas mantener el tono de tu marca cambiando lo mínimo posible. También puedes exportar el par de colores ya comprobado como variables CSS, SCSS o de configuración de Tailwind, listas para pegar en tu proyecto.
Comprueba tu contraste ahora
Ratio WCAG, AA/AAA, contraste perceptual APCA, simulación de daltonismo y verificación de paleta — todo gratis, en tu navegador.
El ratio de contraste WCAG expresa la diferencia entre la luminancia relativa de dos colores como un número entre 1:1 (colores idénticos) y 21:1 (negro/blanco puro). Las Web Content Accessibility Guidelines (WCAG) 2.x definen ratios de contraste mínimos entre los colores de texto y de fondo para que los usuarios con baja visión puedan seguir leyendo el contenido.
¿Cuál es la diferencia entre accesibilidad AA y AAA?
AA es el nivel de conformidad mínimo (estándar) de WCAG: exige 4,5:1 para texto normal y 3:1 para texto grande. AAA es el nivel reforzado y exige un contraste más alto: 7:1 para texto normal y 4,5:1 para texto grande. La mayoría de sitios corporativos y públicos aspiran a AA; AAA es más estricto y suele recomendarse para tipos de contenido específicos.
¿Qué significa un ratio de contraste de 4,5:1?
4,5:1 es el ratio de contraste mínimo que WCAG AA exige para el texto de tamaño normal (menos de 18pt/24px, o menos de 14pt/18,66px en negrita). Significa que la luminancia relativa del color más claro debe ser al menos 4,5 veces «más contrastada» que la más oscura según una fórmula específica; por ejemplo, el gris medio #767676 sobre blanco supera justo esta barrera con aproximadamente 4,54:1.
¿Cómo comprobar el contraste de un sitio web completo?
Introduce cada par de colores texto/fondo y botón/icono de tu sitio en el verificador de contraste en hex, rgb(), o hsl() y comprueba el ratio de contraste, el resultado AA/AAA y la vista previa de daltonismo. Para comparar varios colores a la vez, usa la pestaña de verificación de paleta, que muestra cada combinación por pares de tu paleta de marca en una sola tabla.
¿A qué debo prestar atención con los usuarios daltónicos?
Aproximadamente el 8% de los hombres y el 0,5% de las mujeres tienen daltonismo rojo-verde (protanopia/deuteranopia), según cifras habituales citadas en estudios de accesibilidad. Para estos usuarios, el contraste de color por sí solo no basta: evita usar colores como el rojo y el verde como única señal distintiva, y añade también un icono, un patrón o una etiqueta. La simulación de daltonismo del verificador muestra cómo se percibe tu par de colores elegido según varios tipos de visión.
Nota: esta guía y la herramienta usan la fórmula oficial de luminancia relativa de WCAG 2.x; los ejemplos numéricos de las tablas son ilustrativos para explicar el orden de magnitud, no una certificación de accesibilidad. La simulación de daltonismo es una aproximación visual, no una herramienta de diagnóstico médico. El contenido es solo informativo — para decisiones de cumplimiento normativo, verifica siempre con la herramienta y con tus propios colores exactos.