Verificador de contraste de color

Comprueba el contraste de color WCAG en tu navegador

Este verificador de contraste de color mide el ratio de contraste WCAG entre un color de texto y uno de fondo, indicándote al instante si la combinación supera los niveles AA y AAA para texto normal, texto grande y componentes de interfaz. Escribe un valor hexadecimal, edita los campos RGB o HSL, arrastra el control deslizante de luminosidad o usa el cuentagotas para tomar cualquier color de tu pantalla — el ratio, la matriz de resultados y la vista previa se actualizan al momento.

Funciona como las herramientas en las que ya confían los diseñadores — la misma fórmula WCAG de WebAIM y Adobe Color — pero añade una vista previa legible en tiempo real, una puntuación APCA (WCAG 3) y una corrección automática para combinaciones que no superan el umbral. Todo funciona localmente en JavaScript: tus colores nunca abandonan tu dispositivo y no se necesita cuenta.

Niveles AA y AAA de WCAG explicados

El ratio de contraste WCAG va de 1:1 (dos colores idénticos) a 21:1 (negro sobre blanco). El nivel AA — el estándar que exigen la mayoría de leyes como la ADA y la Sección 508 — requiere 4,5:1 para texto normal y 3:1 para texto grande. El nivel AAA eleva esos valores a 7:1 y 4,5:1. Texto grande se define como 18pt (24px) o más, o 14pt (aprox. 18,66px) o más en negrita.

La matriz de resultados desglosa cada umbral por separado, para que veas de un vistazo que un gris como #767676 sobre blanco supera AA para texto normal con 4,54:1 pero no alcanza los 7:1 necesarios para AAA. Si tu equipo necesita cumplir normativas legales (ADA, EN 301 549, Sección 508), AA es el listón a superar. AAA vale la pena buscarlo en interfaces de lectura intensa donde los usuarios con baja visión son prioritarios.

Previsualiza, corrige y lanza pares de color accesibles

Los números solo cuentan la mitad de la historia, por lo que la vista previa en vivo renderiza encabezados reales, texto del cuerpo, texto pequeño y un botón y chip de muestra con tus colores exactos — comprueba la legibilidad en lugar de solo leer el ratio. Cuando un par falla, el sugeridor 'Haz que pase' mantiene tu tono y saturación y ajusta la luminosidad al color más cercano que supere el nivel elegido (AA, AA texto grande o AAA), aplicándolo con un solo clic. Puedes ajustar el texto o el fondo, según prefieras.

La cuadrícula de pares acepta una paleta completa y muestra qué combinaciones de color pasan de un vistazo — útil cuando construyes un sistema de diseño donde cada combinación de primer plano y fondo debe ser segura. En lugar de probar docenas de pares uno por uno, pegas tu paleta una vez y ves la matriz completa al instante.

APCA: una vista previa del contraste de WCAG 3

Junto al ratio clásico, este verificador muestra una puntuación APCA Lc — la métrica de contraste perceptual propuesta para WCAG 3. APCA modela cómo el ojo lee realmente texto claro sobre oscuro y oscuro sobre claro, y tiene en cuenta el peso tipográfico, por lo que detecta problemas de legibilidad que el ratio de WCAG 2 a veces pasa por alto. Valores de referencia: Lc 75+ para texto del cuerpo, Lc 60+ para texto grande, Lc 45+ para encabezados grandes.

WCAG 3 sigue en borrador y no ha reemplazado a WCAG 2.2, por lo que el cumplimiento hoy significa alcanzar los umbrales de 4,5:1 y 3:1. Mostrar APCA junto a los ratios actuales te permite preparar tu paleta para el futuro sin esperar a que se finalice la especificación. Si tu puntuación Lc ya está en el rango recomendado, es probable que cumplas las normas cuando WCAG 3 se convierta en el estándar de referencia.

Contraste no textual para iconos y componentes de interfaz

El contraste no es solo para el texto. WCAG 2.1 SC 1.4.11 requiere 3:1 de contraste para los límites de los componentes interactivos — bordes de inputs, indicadores de foco, estados de toggle — y para iconos y gráficos significativos. La matriz incluye una verificación dedicada de interfaz y gráficos a 3:1 para que confirmes que el contorno de un botón o icono es visible, no solo la etiqueta interior.

Esta es una área donde muchos equipos fallan auditorías sin darse cuenta. Un borde de input gris claro (#D1D1D1 sobre blanco es 1,4:1) es una infracción común de WCAG 2.1 incluso cuando todo el texto de la página supera el umbral. Verificar tus componentes de interfaz aquí lleva segundos y previene sorpresas en una auditoría formal.

Cómo se compara con WebAIM, Adobe Color y Chrome DevTools

El verificador de contraste de WebAIM en webaim.org es la herramienta de accesibilidad gratuita más citada y usa la misma fórmula WCAG 2 que esta. No muestra APCA, no tiene vista previa de texto en vivo, no puede corregir automáticamente pares que fallan y no tiene cuadrícula de paleta por pares para probar múltiples combinaciones de color a la vez.

Las Herramientas de Accesibilidad de Adobe Color muestran los resultados AA/AAA e incluyen un simulador de daltonismo, pero requieren una cuenta gratuita de Adobe para guardar tu trabajo y no pueden sugerir automáticamente un color que pase. La interfaz móvil puede ser complicada.

Chrome DevTools tiene una insignia de ratio de contraste en el selector de color del panel Elementos que funciona para comprobaciones en el navegador — pero solo dentro de DevTools, por lo que no puedes compartir un enlace a un par de colores específico ni usarlo fuera de una sesión de navegador.

Este verificador funciona sin inicio de sesión, muestra tanto los ratios WCAG 2 como la puntuación APCA Lc, renderiza una vista previa en vivo con tus colores y te permite probar una cuadrícula de paleta completa en una sola vista. Todos los cálculos se ejecutan localmente en JavaScript — tus colores nunca abandonan tu dispositivo.