IQ
PayloadIQ
Utilidades de PayloadIQ

Comprobador de contraste de color

Comprueba si dos colores tienen suficiente contraste para leerse — según WCAG AA y AAA, para texto normal y grande — con una vista previa en vivo. Todo se ejecuta en tu navegador.

The quick brown fox — sample text
The quick brown fox — sample text
Contrast ratio15.85 : 1
AA · normal text
AA · large text
AAA · normal text
AAA · large text

Se ejecuta en tu navegador. Lo que introduces no se sube a PayloadIQ.

Esta herramienta calcula la relación de contraste entre un color de texto y un color de fondo, y te dice si pasa los umbrales de WCAG AA y AAA, todo dentro de tu navegador. Introduce los dos colores en HEX o elígelos con el selector, y verás al instante la ratio exacta junto a una vista previa sobre texto real. Comprueba los cuatro niveles a la vez: AA y AAA, para texto normal y grande. Nada se sube a ningún servidor.

Legible, y demostrable

Elige un color de texto y un fondo, y el comprobador muestra la relación de contraste exacta más un resultado de aprobado o fallo en los cuatro umbrales de WCAG: AA y AAA, para texto normal y grande. La vista previa en vivo aplica los colores a texto real, así puedes juzgarlo a ojo y por número al mismo tiempo. Con un clic intercambias los dos colores para probar ambas direcciones, y la ratio se recalcula a medida que escribes.

Local e instantáneo

El cálculo se basa en la luminancia relativa de cada color usando la fórmula oficial de WCAG, y se ejecuta por completo en tu navegador: los colores nunca salen de tu equipo. Es ideal para validar un sistema de diseño o una paleta antes de pasarla a producción. Combínalo con el Color Picker para tomar los colores directamente de un diseño y comprobarlos aquí.

Preguntas frecuentes

¿Qué relación de contraste necesito?
WCAG AA exige 4.5:1 para texto normal y 3:1 para texto grande (unos 18px en negrita o 24px normal). AAA es más estricto: 7:1 para texto normal y 4.5:1 para texto grande. La herramienta comprueba los cuatro a la vez.
¿Cómo se calcula la ratio?
A partir de la luminancia relativa de cada color con la fórmula oficial de WCAG, dentro de tu navegador. El resultado es un número entre 1:1 (sin contraste) y 21:1 (negro sobre blanco).
¿Se suben mis colores a algún servidor?
No. Todo el cálculo ocurre localmente en tu navegador con JavaScript; los valores HEX que introduces no se envían ni se almacenan en ningún sitio. Puedes usar la herramienta sin conexión una vez cargada la página.
¿Por qué importa el contraste?
El texto con poco contraste cuesta de leer para todo el mundo y no cumple los requisitos de accesibilidad de las personas con baja visión. Cumplir AA es la base que esperan la mayoría de sitios y muchas normativas.

Utilidades relacionadas

Selector de color
Abrir PayloadIQ Playground