Verificador de contraste de color (WCAG)

¿Qué es el Verificador de Contraste de Color?

El contraste de color es la diferencia en brillo entre el texto y su fondo. Si esa diferencia es demasiado pequeña, el texto se vuelve difícil o imposible de leer, especialmente para los millones de personas con baja visión o daltonismo. Las Pautas de Accesibilidad para el Contenido Web (WCAG) convierten esto en un índice de contraste medible con mínimos específicos que los sitios web deben cumplir.

El Verificador de Contraste de Color de ASAPUtils.com mide ese índice al instante. Elige un color de texto y un color de fondo y muestra el índice exacto, además de un claro aprobado/reprobado frente a cada umbral de la WCAG — AA y AAA, para texto normal, texto grande y componentes de la interfaz de usuario — con una vista previa en vivo para que puedas ver el resultado, no solo el número.

Cómo Usar

1. Establece el color del texto (primer plano) y el color de fondo usando los selectores de color o escribiendo un valor hexadecimal como #1a1a1a. 2. Lea la relación de contraste (por ejemplo 12.6:1) que se muestra junto a una vista previa en vivo del texto real sobre ese fondo.
2. Verifique las insignias WCAG: AA y AAA para texto normal y grande, además del requisito de 3:1 para componentes de UI y gráficos.
3. Use el botón de intercambio para invertir el primer plano y el fondo, útil al revisar tanto variantes claras como oscuras de un diseño.

Casos de uso

Los diseñadores y desarrolladores front-end lo utilizan al elegir colores de marca y UI para garantizar que el resultado sea legible y cumpla con la ley. La accesibilidad (a11y) es un requisito bajo estándares como la ADA, la Sección 508 y la Ley Europea de Accesibilidad, y el fallo en el contraste de color es uno de los hallazgos de auditoría más comunes —y más fáciles de corregir—. Verificar un par texto/fondo antes de su lanzamiento evita costosos retrabajos posteriores. También es una herramienta de depuración rápida durante el desarrollo. Cuando una auditoría automatizada (Lighthouse, axe, WAVE) detecta un elemento de bajo contraste, coloca los dos colores aquí para encontrar exactamente cuánto estás por debajo del umbral y repite el proceso hasta que la insignia se ponga verde. Combínalo con nuestra Herramienta de Selección de Color para explorar alternativas accesibles y HEX a RGB para convertir valores para tu hoja de estilos.

Por Qué Usarlo

Cada cálculo se realiza en tu navegador usando la fórmula de luminancia relativa oficial de WCAG 2.1, por lo que los números coinciden con lo que informan los auditores de accesibilidad. No se transmiten valores de color, lo que significa que puedes revisar paletas de marca no publicadas de manera libre. En lugar de un solo número, la herramienta asigna la proporción a los umbrales que realmente aparecen en los requisitos de accesibilidad, para que sepas de un vistazo si una combinación es segura para el texto del cuerpo, solo aceptable para títulos grandes o si falla por completo. La vista previa en vivo cierra el ciclo al permitirte confirmar la experiencia de lectura con tus propios ojos.