La relación de contraste entre dos colores es un único número, de 1:1 a 21:1, y las WCAG lo usan para decidir si un texto es legible. Negro sobre blanco es el máximo, exactamente 21:1. Esta herramienta calcula la relación y te dice qué umbrales superas, pero ese número merece más escepticismo del que se le suele dar.
Cuáles son realmente los umbrales
Las WCAG 2.x definen cuatro que encontrarás en la práctica. AA exige 4,5:1 para texto normal y 3:1 para texto grande. AAA los sube a 7:1 y 4,5:1. AA es el nivel al que remite la mayoría de la legislación, incluida la European Accessibility Act; AAA es aspiracional, y la propia especificación no recomienda exigirlo en todo un sitio.
"Grande" tiene una definición precisa que pilla a mucha gente: 18pt, es decir 24px, o 14pt en negrita, es decir 18,66px. No "un encabezado". Un encabezado de 20px es texto normal para las WCAG y necesita los 4,5:1 completos.
Para dar a los números un anclaje físico: sobre fondo blanco, #767676 se sitúa en 4,54:1 y es el gris más claro que supera AA. #595959 alcanza exactamente 7:1 para AAA. Cualquier cosa más clara que #767676 sobre blanco falla para el texto corrido, lo que descarta la mayoría de los grises a los que los diseñadores recurren por instinto.
La fórmula mide luminancia, no legibilidad
Esta es la parte que merece entenderse, porque aprobar no es lo mismo que ser legible. La relación se calcula a partir de la luminancia relativa, que pondera los canales según cuánto contribuye cada uno al brillo percibido: el verde cuenta 0,7152, el rojo 0,2126 y el azul solo 0,0722.
Esa ponderación produce un fallo concreto y demostrable. El azul puro #0000FF sobre blanco puntúa 8,59:1: cómodamente por encima de AAA. Quien haya intentado leer un párrafo de texto azul puro sabe que cuesta: el ojo tiene dificultades para enfocar nítidamente la luz azul, y en el centro de la retina hay muy pocos conos sensibles al azul. La fórmula ve un color muy oscuro. Tus ojos ven uno borroso. La comprobación aprueba y el texto sigue siendo malo.
La fórmula es simétrica, y la visión humana no
He aquí el defecto que más importa en 2025, ahora que el modo oscuro está en todas partes. Las WCAG 2 tratan el par de colores como no ordenado: no saben ni les importa cuál es el texto y cuál el fondo. La visión humana no es tan neutral.
Puedes ver el problema suceder. El gris #949494 puntúa 3,03:1 sobre blanco, lo que falla AA para texto corrido. El mismo gris sobre negro puntúa 6,92:1, que pasa de largo. Mismo color, misma fórmula, veredicto radicalmente distinto, y no es porque el modo oscuro sea de verdad el doble de legible. El texto claro sobre fondo oscuro sufre halación: los glifos brillantes se derraman en la oscuridad circundante y los trazos finos engordan. La fórmula no tiene ningún concepto de esto.
La comunidad de accesibilidad sabe desde hace años que el contraste de las WCAG 2 es un modelo pobre de la percepción. APCA —Accessible Perceptual Contrast Algorithm— es el sustituto candidato que se desarrolla para las WCAG 3, y es direccional: da respuestas distintas según cuál color sea el texto. Todavía no es un estándar ni aquello con lo que te auditarán. Lo que deja una postura pragmática: cumple los números de las WCAG 2, porque son los que señala la ley, y no confundas cumplirlos con haber diseñado algo legible.
El requisito que todos olvidan: 3:1 para lo que no es texto
Las WCAG 2.1 añadieron el criterio de éxito 1.4.11, y se pasa por alto constantemente. Los elementos no textuales que portan significado necesitan 3:1 respecto a su entorno: el borde de un campo de entrada, el contorno de un botón, un indicador de foco, las barras de un gráfico, un icono que es la única etiqueta de un control.
Aquí es donde muchísimos diseños por lo demás cuidados fallan una auditoría. Ese elegante borde #E5E7EB alrededor de un campo de formulario da 1,4:1 contra el blanco. Falla, y falla justo en el elemento que un usuario más necesita encontrar. Esta herramienta comprueba los cuatro umbrales de texto; la regla 3:1 para lo no textual tienes que aplicarla tú, poniendo el color del borde y el del fondo en estos dos campos y buscando el 3:1.
El contraste es necesario, no suficiente
Superar todas las relaciones deja intacto el fallo de accesibilidad más común: usar el color en solitario para transmitir información. Un borde rojo que significa "no válido" no le dice nada a quien no puede distinguirlo de los grises, por bien que contraste. Alrededor de uno de cada doce hombres tiene alguna forma de deficiencia en la visión del color.
La regla es que el color puede reforzar un mensaje pero nunca debe ser su único portador. Un error necesita un icono o una etiqueta de texto junto al rojo. Un campo obligatorio necesita un asterisco. Un gráfico de líneas necesita patrones de trazo distintos, no solo tonos distintos. Es un criterio aparte —1.4.1, "Uso del color"— y ningún verificador de contraste te dirá jamás que lo has fallado.
Preguntas frecuentes
¿Se envía algo a un servidor?
No. Esta herramienta está marcada como "client": la relación es una fórmula evaluada en la pestaña de tu navegador. No se transmite nada.
¿Por qué mi gris aprueba sobre fondo oscuro y falla sobre uno claro?
Porque la relación no es lineal, y la fórmula es simétrica mientras que la percepción no lo es. #949494 da 3,03:1 sobre blanco y 6,92:1 sobre negro: el mismo color, más del doble de puntuación. La lectura honesta es que el número te está diciendo menos de lo que aparenta. Si construyes un tema oscuro, pruébalo con ojos reales en una pantalla real con brillo real, porque la relación te halagará.
¿El texto de los marcadores de posición debe aprobar?
Sí. El texto de un placeholder es texto, y no hay exención. Sorprende porque casi todos los sistemas de diseño incluyen un gris de placeholder que falla. Vale la pena señalar aparte que los placeholders no deberían usarse como etiquetas en absoluto: desaparecen en cuanto alguien escribe, llevándose consigo el significado del campo.
¿Y los botones deshabilitados?
Los controles deshabilitados están explícitamente exentos de los requisitos de contraste, así que un botón en gris puede fallar. Es una licencia que conviene usar con cuidado: "se le permite ser ilegible" no es "debe ser ilegible", y un usuario aún necesita poder ver que el control existe y entender por qué no está disponible.
¿Necesito AA o AAA?
AA, en la práctica. Es a lo que remite la legislación de accesibilidad, lo que comprueban las auditorías y lo que la propia especificación trata como objetivo general. AAA merece perseguirlo en textos largos de lectura, donde no te cuesta nada, pero la especificación dice explícitamente que no se exige para sitios enteros, en parte porque a 7:1 la paleta que te queda para diseñar es muy pequeña.