Comprobar el contraste de color WCAG en línea: AA, AAA y texto grande
Un contraste insuficiente entre texto y fondo es el error de accesibilidad más frecuente en la web. Comprueba AA/AAA pegando dos colores, sin plugin ni extensión.
El contraste, el error de accesibilidad más frecuente en la web
Cada año, la auditoría WebAIM Million sitúa el contraste de texto insuficiente como el fallo WCAG más detectado, por delante del texto alternativo ausente o los enlaces sin etiqueta. Esa auditoría analiza las páginas de inicio más visitadas de la web. El contraste es también uno de los pocos criterios de accesibilidad que se pueden verificar sin lector de pantalla ni auditoría completa. El comprobador de contraste de FastMinify calcula el ratio WCAG 2.2 entre dos colores CSS (HEX, RGB, HSL, OKLCH, color() o colores con nombre). Mientras escribes, muestra los veredictos AA y AAA para texto normal, texto grande y elementos no textuales. No se envía nada a un servidor. Va más allá de un simple par de colores: un modo matriz cruza toda una paleta de primer plano con toda una paleta de fondo en un solo paso. El resto de herramientas está en el hub de Color y CSS.
Los errores de contraste que se repiten una y otra vez
Un gris #999999 sobre blanco da un ratio de aproximadamente 2,85:1, muy por debajo del umbral AA de 4,5:1. Aun así, es una de las elecciones de diseño más comunes para texto secundario, placeholders y leyendas.
Los colores de marca "suaves" (azul pastel, verde menta, naranja claro) suelen elegirse por identidad visual sin probarlos nunca con texto blanco encima.
Un titular blanco funciona sobre la zona oscura del cielo de una foto de cabecera, pero se vuelve ilegible sobre la zona clara de una nube. El contraste varía según el punto de la imagen donde esté el texto.
outline: none sin sustituto rompe la navegación por teclado. El contraste no textual (SC 1.4.11) también se aplica a los indicadores de foco.
Qué ratio buscar en AA, AAA y texto grande
El criterio WCAG 1.4.3 (Contrast Minimum) exige un ratio de al menos 4,5:1 para el texto normal en nivel AA. El nivel AAA, más estricto (criterio 1.4.6), eleva la exigencia a 7:1. Casi toda la normativa legal de accesibilidad apunta al nivel AA (ADA en EE. UU., EN 301 549 en Europa, RGAA en Francia). El nivel AAA sigue siendo recomendable, pero rara vez es obligatorio para todo un sitio.
WCAG define el «texto grande» como texto de al menos 24 px, es decir, 18 pt. También lo es el texto de al menos 18,67 px, es decir, 14 pt, si está en negrita (grosor de 700 o más). Por debajo de esos umbrales, el texto se considera normal aunque parezca grande. FastMinify determina el umbral aplicable a partir del tamaño y el grosor indicados.
Desde WCAG 2.1, el criterio 1.4.11 (Non-text Contrast) exige un ratio de al menos 3:1 entre los componentes de interfaz y su color adyacente. Esto afecta a los bordes de campos de formulario, las casillas de verificación, los iconos con significado y los indicadores de foco.
Cómo se calcula realmente el ratio de contraste
El ratio WCAG 2.x compara la luminancia relativa de los dos colores. Es un valor de 0 a 1 derivado de los canales RGB en escala lineal, ponderados con 0.2126 para el rojo, 0.7152 para el verde y 0.0722 para el azul. El ojo humano percibe el verde con mucha más intensidad que el azul. El ratio final es (L1 + 0.05) / (L2 + 0.05), donde L1 es la luminancia del color más claro. Por eso dos colores «claramente diferentes» pueden dar un ratio parecido. En cambio, dos tonos que parecen similares pueden tener luminancias muy distintas.
Antes
Después
color() como entrada y los convierte a sRGB antes de calcular (vía colorjs.io)El ratio WCAG 2.x tiene una limitación conocida: trata «negro sobre blanco» y «blanco sobre negro» de forma simétrica, lo cual no siempre coincide con la percepción real. APCA (Advanced Perceptual Contrast Algorithm), candidato para WCAG 3, tiene en cuenta la polaridad, es decir, texto claro sobre fondo oscuro o al revés. También considera el tamaño de fuente, para un juicio más preciso. FastMinify ofrece una superposición APCA opcional además del ratio WCAG 2.2 oficial, no como sustituto, ya que WCAG 3 todavía no es un estándar publicado.
De un par de colores a una paleta completa con el comprobador de contraste
Abre el comprobador de contraste, pega tu color de primer plano y tu color de fondo en cualquier formato CSS (HEX, RGB, HSL, OKLCH, con nombre). El ratio y los niveles AA, AAA y no textual se recalculan en vivo. Ajusta el tamaño y el grosor del texto para ver cómo se aplica automáticamente el umbral de «texto grande».
Primero, pega ambos colores
Primer plano y fondo, en cualquier formato CSS válido. No se necesita conversión manual.
Después, ajusta tamaño y grosor del texto
Por defecto 16 px/400 (texto normal). Cambia a 24 px o a 18,67 px en negrita para probar un titular: el umbral de «texto grande» (3:1/4,5:1) se aplica automáticamente.
Por último, lee el veredicto
Ratio exacto, por ejemplo 4,87:1, nivel AA, AAA, AA grande o Fallo para el texto, y un veredicto separado para el contraste no textual (3:1, SC 1.4.11).
Un botón primario suele tener tres variantes de color (normal, hover, disabled) que a menudo no se prueban individualmente.
En lugar de probar una a una las combinaciones de un design system, pega tus colores de texto en Colores de filas y tus colores de fondo en Colores de columnas. Usa un color por línea, hasta 16 por eje. El resultado es una cuadrícula con el veredicto de cada cruce, que puedes filtrar por nivel (AAA, AA, AA grande o Fallos).
Cada comprobación (colores, tamaño del texto, modo matriz o par, opciones APCA) se codifica en la URL. Copia el enlace desde la barra de direcciones, o usa el botón Compartir estos ajustes. Después pégalo en un pull request, un ticket o un mensaje a tu diseñador. La página se reabre exactamente en el mismo estado.
Convertir el contraste en un criterio de CI en lugar de un vaivén de diseño
Un comprobador manual sirve para diseñar una paleta. Para evitar regresiones, el contraste también debe verificarse automáticamente en cada pull request. axe-core y Lighthouse CI detectan la mayoría de los fallos de contraste en texto estático. Les cuesta más con texto sobre imágenes o degradados.
Ejemplo básico
Comprobación manual rápida, sin instalación ni datos enviados. El modo matriz, único entre estas opciones, permite auditar un design system completo en un solo paso, y la URL compartible facilita la colaboración entre diseño y desarrollo. Límite: es una comprobación manual que no sustituye una auditoría automatizada en CI, y no detecta el contraste sobre una imagen o un degradado complejo.
El selector de color integrado muestra el ratio de contraste directamente sobre el elemento seleccionado en la página real, con los estilos calculados, sin ninguna herramienta externa. Límite: un elemento a la vez, lo que resulta tedioso en una paleta completa, sin modo matriz ni enlace compartible.
Una auditoría automatizada integrada en el pipeline de CI detecta sistemáticamente las regresiones de contraste en cada pull request, y cubre la accesibilidad más allá del contraste. Límite: no sustituye la fase previa de diseño de la paleta, y puede producir falsos negativos con texto superpuesto a una imagen.
Conclusión
El contraste de color sigue siendo el error de accesibilidad más frecuente en la web, y uno de los más fáciles de corregir una vez detectado. AA (4,5:1) para texto normal y 3:1 para texto grande y elementos no textuales son los dos umbrales que conviene recordar antes de dar por buena una paleta. El comprobador de contraste de FastMinify ofrece el veredicto mientras escribes, en modo par o en modo matriz para todo un design system. No envía nunca tus colores de marca a un servidor. Una auditoría axe-core en CI evita regresiones, y el resto del hub de Color y CSS ayuda a construir una paleta coherente de principio a fin.
Comprueba tu contraste ahora
Artículos relacionados
Pega un token y un JWKS para comprobar una firma RS256, ES256 o HS256 en el navegador. Elección de la clave por kid, errores medidos y claims que revisar.
HTTP/2 y HTTP/3 cambian el trayecto de los archivos, no su peso. Mediciones de tamaño, compilación y bundling muestran lo que la minificación aún aporta.
Convierte un epoch Unix en una fecha legible y al revés, distingue segundos de milisegundos y evita las trampas de zona horaria, JWT y cambio de hora.