ToolPronto

Comprueba el contraste y crea una paleta

Comprueba el contraste según WCAG, busca alternativas y copia los colores listos para CSS.

Los valores se calculan localmente en el navegador.

Los favoritos se guardan solo en este navegador.

Verificar colores

Comprobador de contraste de texto

Comprueba un par de texto y fondo con los umbrales de WCAG 2.x.

Color del textoColor de fondo

La legibilidad del color depende del contexto real.La legibilidad del color depende del contexto real.

Relación de contraste: 16.68:1
Texto normal AA: ✓ Cumple
Texto grande AA: ✓ Cumple

Formatos del color

#17201Brgb(23 32 27)hsl(147 16% 11%)

Verificar colores

Paleta de cinco colores

Genera, bloquea, audita, simula y exporta una paleta reutilizable de cinco colores.

Vista previa de la paleta

Esta vista determinista es una aproximación, no un diagnóstico ni una prueba de conformidad. Los colores exportados no cambian.

Auditoría de contraste de la paleta original

En cada fila, el primer color es el texto y el segundo es el fondo.

Color 1 sobre color 2#096447 / #E2F3EC
6.24:1Texto normal AA: CumpleTexto normal AAA: No cumpleTexto grande AA: CumpleTexto grande AAA: Cumple
Color 1 sobre color 3#096447 / #17201B
2.32:1Texto normal AA: No cumpleTexto normal AAA: No cumpleTexto grande AA: No cumpleTexto grande AAA: No cumple
Color 1 sobre color 4#096447 / #F4F6F3
6.61:1Texto normal AA: CumpleTexto normal AAA: No cumpleTexto grande AA: CumpleTexto grande AAA: Cumple
Color 1 sobre color 5#096447 / #6D46D9
1.21:1Texto normal AA: No cumpleTexto normal AAA: No cumpleTexto grande AA: No cumpleTexto grande AAA: No cumple
Color 2 sobre color 1#E2F3EC / #096447
6.24:1Texto normal AA: CumpleTexto normal AAA: No cumpleTexto grande AA: CumpleTexto grande AAA: Cumple
Color 2 sobre color 3#E2F3EC / #17201B
14.51:1Texto normal AA: CumpleTexto normal AAA: CumpleTexto grande AA: CumpleTexto grande AAA: Cumple
Color 2 sobre color 4#E2F3EC / #F4F6F3
1.06:1Texto normal AA: No cumpleTexto normal AAA: No cumpleTexto grande AA: No cumpleTexto grande AAA: No cumple
Color 2 sobre color 5#E2F3EC / #6D46D9
5.18:1Texto normal AA: CumpleTexto normal AAA: No cumpleTexto grande AA: CumpleTexto grande AAA: Cumple
Color 3 sobre color 1#17201B / #096447
2.32:1Texto normal AA: No cumpleTexto normal AAA: No cumpleTexto grande AA: No cumpleTexto grande AAA: No cumple
Color 3 sobre color 2#17201B / #E2F3EC
14.51:1Texto normal AA: CumpleTexto normal AAA: CumpleTexto grande AA: CumpleTexto grande AAA: Cumple
Color 3 sobre color 4#17201B / #F4F6F3
15.35:1Texto normal AA: CumpleTexto normal AAA: CumpleTexto grande AA: CumpleTexto grande AAA: Cumple
Color 3 sobre color 5#17201B / #6D46D9
2.80:1Texto normal AA: No cumpleTexto normal AAA: No cumpleTexto grande AA: No cumpleTexto grande AAA: No cumple
Color 4 sobre color 1#F4F6F3 / #096447
6.61:1Texto normal AA: CumpleTexto normal AAA: No cumpleTexto grande AA: CumpleTexto grande AAA: Cumple
Color 4 sobre color 2#F4F6F3 / #E2F3EC
1.06:1Texto normal AA: No cumpleTexto normal AAA: No cumpleTexto grande AA: No cumpleTexto grande AAA: No cumple
Color 4 sobre color 3#F4F6F3 / #17201B
15.35:1Texto normal AA: CumpleTexto normal AAA: CumpleTexto grande AA: CumpleTexto grande AAA: Cumple
Color 4 sobre color 5#F4F6F3 / #6D46D9
5.48:1Texto normal AA: CumpleTexto normal AAA: No cumpleTexto grande AA: CumpleTexto grande AAA: Cumple
Color 5 sobre color 1#6D46D9 / #096447
1.21:1Texto normal AA: No cumpleTexto normal AAA: No cumpleTexto grande AA: No cumpleTexto grande AAA: No cumple
Color 5 sobre color 2#6D46D9 / #E2F3EC
5.18:1Texto normal AA: CumpleTexto normal AAA: No cumpleTexto grande AA: CumpleTexto grande AAA: Cumple
Color 5 sobre color 3#6D46D9 / #17201B
2.80:1Texto normal AA: No cumpleTexto normal AAA: No cumpleTexto grande AA: No cumpleTexto grande AAA: No cumple
Color 5 sobre color 4#6D46D9 / #F4F6F3
5.48:1Texto normal AA: CumpleTexto normal AAA: No cumpleTexto grande AA: CumpleTexto grande AAA: Cumple

Comprobador de contraste y herramientas de paleta

El comprobador mide un par de texto y fondo según los umbrales de contraste de texto de WCAG 2.x. En una tarjeta aparte puedes generar una paleta, bloquear colores, auditar todas las combinaciones, ver simulaciones y copiar variables CSS.

Para qué sirve cada herramienta de color

Contraste: comprobar texto normal y grande antes de combinar dos colores.
Paleta: explorar cinco colores sin perder los que ya elegiste.
Auditoría: encontrar pares válidos y entender los límites de las simulaciones.

Cómo comprobar el contraste

Indica los colores del texto y del fondo.
Consulta la relación y los resultados para cada tamaño de texto.
Ajusta un color o copia un valor válido para CSS.