Comprobador de contraste de color: WCAG AA/AAA y APCA

Qué es un comprobador de contraste de color

Un comprobador de contraste de color mide qué tan legible es un texto sobre su fondo, comparando la luminancia relativa de ambos colores con la fórmula que define WCAG 2: (L1 + 0,05) / (L2 + 0,05), siempre el color más claro dividido entre el más oscuro. El resultado va de 1:1 (dos colores idénticos, ilegible) a exactamente 21:1 (negro puro sobre blanco puro, porque 21 no es más que 1,05 dividido entre 0,05). Esta herramienta calcula esa proporción al instante para cualquier par de colores en hexadecimal, indica si supera los umbrales AA y AAA de WCAG, y añade la lectura de APCA, el método candidato para WCAG 3, todo sin subir nada a ningún servidor.

La luminancia relativa no es lo mismo que el brillo que percibimos: la fórmula pondera el canal verde en 0,7152, el rojo en 0,2126 y el azul en apenas 0,0722, así que el verde pesa casi diez veces más que el azul. Por eso el azul puro #0000FF y el amarillo puro #FFFF00, que comparten exactamente la misma luminosidad HSL del 50%, tienen luminancias relativas de 0,0722 y 0,9278 —trece veces de diferencia—. Texto blanco sobre ese azul da 8,59:1 y aprueba AA sin problema; el mismo blanco sobre ese amarillo da 1,07:1 y es prácticamente invisible. Fiarse del ojo, o de la luminosidad que muestra cualquier selector de color, engaña: solo el cálculo de contraste dice la verdad.

Comprobar el contraste de colores es uno de los requisitos de accesibilidad web más citados y, a la vez, de los más fáciles de arreglar: forma parte de las pautas WCAG que exige la mayoría de auditorías y normativas de accesibilidad, y a diferencia de otros criterios no depende de interpretación, se calcula. Esta página sirve tanto a quien diseña una interfaz como a quien necesita justificar, con un número exacto, que un texto es legible.

Cómo usarlo

1. Introduce el color del texto. Escribe el código hexadecimal en el campo «Color del texto» —acepta 3, 6 u 8 dígitos, con o sin «#»— o haz clic en la muestra de color para abrir el selector nativo de tu sistema operativo. Si usas 8 dígitos, los dos últimos fijan la opacidad.
2. Define el color de fondo. El campo «Color de fondo» funciona igual: el mismo campo hexadecimal y la misma muestra nativa. Entre los dos hay un botón para intercambiar los colores al instante, así compruebas las dos direcciones —texto oscuro sobre fondo claro y al revés— sin volver a escribirlos.
3. Lee el resultado en la vista previa y en las filas de aprobado o reprobado. El panel de vista previa se pinta con tu color de fondo y muestra la misma frase de ejemplo en tres tamaños —16px normal, 18,5px en negrita y 24px normal— junto a un recuadro con borde que simula un componente de interfaz. Debajo aparecen la proporción de contraste en grande, las cinco filas de aprobado o reprobado (AA y AAA, texto normal y grande, y componentes de interfaz) y el panel de APCA con su valor Lc. Si el texto no aprueba AA en tamaño normal, verás chips con la versión más oscura y más clara de tu color que sí llega a 4,5:1; haz clic en cualquiera para aplicarla.

Qué significan realmente los niveles

WCAG 2 define dos niveles de exigencia. El nivel AA —el que piden prácticamente todas las normativas y contratos— exige una proporción mínima de 4,5:1 para texto normal (criterio de éxito 1.4.3) y de 3:1 para texto grande. El nivel AAA es más estricto: 7:1 para texto normal y 4,5:1 para texto grande (criterio 1.4.6). «Grande» no es una impresión subjetiva: WCAG lo define como 18 puntos o más, o 14 puntos en negrita, y el propio documento de referencia traduce 1 punto a 1,333px, lo que da unos 24px para el texto normal grande y unos 18,5px para el negrita grande —de ahí los dos tamaños marcados como «grande» en la vista previa—. La mayoría de comprobadores omiten esta conversión y se limitan a decir «texto grande» sin más.

La diferencia entre aprobar y no aprobar puede depender de un solo valor de byte en el color. Sobre blanco, #767676 es el gris más claro que todavía llega a 4,5:1 (4,54:1 exactos); el siguiente gris más claro, #777777, cae a 4,47:1 y reprueba. Sobre negro ocurre el caso simétrico: #757575 es el gris más oscuro que aprueba, con 4,55:1. Esos dos grises, #757575 y #767676, son los únicos que aprueban AA tanto sobre blanco como sobre negro: un solo paso de color separa el aprobado del reprobado.

Además del texto, WCAG exige un contraste mínimo de 3:1 para componentes de interfaz y elementos gráficos —bordes de campos, iconos, el contorno de un botón— bajo el criterio 1.4.11. Por eso esta herramienta incluye, junto a las cinco filas de aprobado o reprobado, un recuadro con borde en la vista previa: sirve para comprobar ese contraste no textual, no solo el del texto sobre el fondo.

El redondeo también importa: #118A11 sobre blanco da 4,4994:1, así que un comprobador que redondee al centésimo más cercano muestra «4,50» con una marca verde de aprobado, cuando el par en realidad reprueba. Esta herramienta siempre redondea hacia abajo el número que ves, y decide el aprobado o reprobado con el valor exacto sin redondear, nunca con la cifra bonita.

Cuando WCAG y APCA no están de acuerdo (y lo que ninguno de los dos te dice)

El ejemplo más claro de que WCAG 2 y APCA no miden lo mismo es un solo gris: #888888. Sobre blanco da 3,54:1, lo que reprueba AA con claridad, y sin embargo APCA le da un Lc de 63,1, que supera el umbral de Lc 60. Sobre negro, ese mismo gris invierte los papeles: 5,92:1, un AA aprobado sin discusión, pero APCA lo puntúa en Lc -38,6, que apenas alcanza el suelo absoluto de Lc 30 —el mínimo que APCA tolera para cualquier texto—. Mismo color, dos fondos, y los dos estándares cambian de veredicto en direcciones opuestas.

El patrón se repite a gran escala: de las 65.536 combinaciones posibles de gris sobre gris, 6.407 aprueban WCAG AA mientras quedan por debajo del Lc 60 de APCA. El caso más extremo es #757575 sobre #020202, casi negro: WCAG da un 4,50:1 impecable, pero APCA solo llega a Lc 29,6, ni siquiera el mínimo absoluto de Lc 30. Ese es justo el problema que APCA intenta corregir: WCAG 2 sobrevalora de forma sistemática el contraste sobre fondos casi negros, lo que lo convierte en una guía deficiente para diseñar un modo oscuro. El error contrario existe, pero es raro: solo 11 pares de grises reprueban AA mientras superan el nivel Lc 75 de APCA para texto de cuerpo; el caso más marcado es blanco sobre #777777, que reprueba AA con 4,47:1 pero llega a un Lc de 76,6.

La asimetría de APCA es intencional, y es otra cosa que WCAG 2 no puede ver: negro sobre blanco da Lc 106,04, pero blanco sobre negro da Lc -107,88 —no son el espejo exacto el uno del otro—. La proporción de WCAG 2, en cambio, es perfectamente simétrica: intercambiar el texto y el fondo nunca cambia el número, algo comprobado sobre más de 4.000 pares de colores. Por eso WCAG 2 no distingue entre texto claro sobre fondo oscuro y texto oscuro sobre fondo claro, y APCA sí.

Dicho esto, APCA sigue siendo un método candidato para WCAG 3, que hoy es solo un borrador de trabajo: no es una exigencia legal en ningún sitio. Lo que piden las normativas —en España la norma UNE-EN 301 549 y las obligaciones de accesibilidad de los sitios del sector público, y en el resto de Hispanoamérica las normativas nacionales equivalentes— sigue siendo WCAG 2 nivel AA, es decir, el 4,5:1 de siempre. Trata el panel de APCA como información adicional para tomar mejores decisiones de diseño, no como lo que se presenta en una auditoría: ahí, el número que cuenta sigue siendo AA.

Ninguno de los dos modelos entiende más allá de los números. Comparan dos colores planos, así que un texto sobre una foto, un degradado o una capa semitransparente tiene un contraste distinto en cada píxel y ningún número único lo describe. Tampoco conocen la tipografía: WCAG 2 no distingue pesos de fuente salvo su única regla de negrita para texto grande, así que un trazo fino de 300 y uno grueso de 900 en el mismo tamaño reciben idéntico veredicto. Los dos se definen en sRGB, de modo que un color Display P3 de gama amplia queda fuera de lo que cualquiera de los dos estándares describe. Y aprobar no es lo mismo que ser legible: la longitud de línea, el interlineado, el brillo de la pantalla y la luz ambiente son factores reales que ninguno de los dos modelos considera. Esta herramienta tampoco resuelve un fondo semitransparente —si el tuyo lo es, tienes que componerlo primero contra lo que haya detrás—; solo el color del texto se compone automáticamente cuando lleva opacidad.

Por qué es gratis

Todo el cálculo —la luminancia relativa, las cinco comprobaciones de WCAG y el algoritmo APCA completo— se ejecuta en tu navegador, con JavaScript normal y corriente. Ningún color ni ninguna captura sale de tu equipo, porque no hay nada que subir: no existe una versión de este comprobador que necesite un servidor para funcionar.

Por eso no hace falta crear una cuenta, no hay marca de agua que quitar y no existe un plan de pago con funciones escondidas detrás. Es la misma razón por la que el resto de herramientas de FreeToGenerate.com son gratis: si un cálculo puede correr en la pestaña del navegador, no hay motivo para cobrarlo ni para pedir un registro.