Verificador Gratuito de Contraste de Color

Prueba las combinaciones de color de texto y fondo para cumplimiento de accesibilidad WCAG 2.1. Obtén resultados instantáneos de aprobado/reprobado para estándares AA y AAA — sin registro.

94,217+ verificaciones de contraste realizadas

Índice de Contraste

17.06:1

Vista Previa de Texto Grande (24px)

Vista previa de texto corporal normal (16px). El rápido zorro marrón salta sobre el perro perezoso. Esta muestra muestra cómo se ve tu combinación de colores en el tamaño típico del cuerpo del texto.

Texto pequeño (14px) — a menudo usado para leyendas, notas al pie y metadatos.

Invertido: fondo sobre color de texto (17.06:1 — mismo índice)

AA Texto Normal

Requiere 4.5:1

APROBADO

AA Texto Grande

Requiere 3:1

APROBADO

AAA Texto Normal

Requiere 7:1

APROBADO

AAA Texto Grande

Requiere 4.5:1

APROBADO

¿Listo para construir un sitio web accesible con estos colores?

Construir con estos colores

¿Qué es un Verificador de Contraste de Color?

Un verificador de contraste de color es una herramienta que mide la diferencia de luminancia entre dos colores — típicamente texto de primer plano y su fondo — y calcula una relación de contraste según las Pautas de Accesibilidad al Contenido Web (WCAG). Esta relación determina si tu combinación de colores es legible para personas con discapacidades visuales.

El verificador de contraste de Kleap calcula instantáneamente la relación de contraste WCAG 2.1 y la prueba contra los cuatro niveles de cumplimiento: AA Texto Normal (4.5:1), AA Texto Grande (3:1), AAA Texto Normal (7:1) y AAA Texto Grande (4.5:1). Si tus colores fallan, la herramienta sugiere la alternativa accesible más cercana.

Niveles de Contraste WCAG Explicados

AA Texto Normal

Mínimo 4.5:1

Requiere un índice de contraste mínimo de 4.5:1. Este es el objetivo de cumplimiento más común y aplica al texto corporal de menos de 18pt (o 14pt en negrita).

AA Texto Grande

Mínimo 3:1

Requiere un índice de contraste mínimo de 3:1. Aplica al texto de al menos 18pt (24px) o 14pt en negrita (18.66px en negrita).

AAA Texto Normal

Mínimo 7:1

El estándar más alto, que requiere un índice de contraste de 7:1. Asegura legibilidad para usuarios con visión moderadamente baja (aproximadamente 20/80).

AAA Texto Grande

Mínimo 4.5:1

Requiere 4.5:1 para texto grande en el nivel AAA. Proporciona mayor legibilidad para encabezados y texto de visualización.

Consejos para el Diseño de Color Accesible

1

Empieza con el contraste

Elige tus colores de texto y fondo teniendo en cuenta el contraste desde el principio. Incorporar la accesibilidad en forma retroactiva es mucho más difícil que construirla desde el inicio.

2

No confíes solo en el color

Usa iconos, patrones, subrayados o etiquetas junto al color para transmitir significado. Aproximadamente el 8% de los hombres tiene algún tipo de daltonismo.

3

Prueba en dispositivos reales

Los colores se ven diferentes en monitores, teléfonos y bajo la luz del sol. Prueba los índices de contraste en dispositivos reales, no solo en tu herramienta de diseño.

4

Prueba también el modo oscuro

Si tu sitio soporta el modo oscuro, verifica los índices de contraste para ambos temas. Un par de colores que aprueba en el modo claro puede reprobar en el modo oscuro.

5

Cuida el peso tipográfico

Los pesos tipográficos delgados y ligeros reducen el contraste percibido. Si usas pesos inferiores a 400, apunta a un índice de contraste más alto que el mínimo.

6

Verifica los estados interactivos

Los estados hover, focus y active a menudo usan colores diferentes. Asegúrate de que todos los estados interactivos cumplan con los requisitos de contraste, no solo el estado predeterminado.

Comparación de Verificadores de Contraste

CaracterísticaKleapWebAIMCoolorsAdobe Color
PrecioGratisGratisFreemiumGratis (con cuenta Adobe)
Vista Previa en Tiempo RealSí, texto en vivo sobre fondoSí, básicoSíSí
Color Accesible Más CercanoSí, sugerido automáticamenteNoNoParcial
Niveles WCAG ProbadosAA + AAA (normal + grande)AA + AAASolo AAAA + AAA
Constructor de Sitios IntegradoSí, con IANoNoNo
Botón Intercambiar ColoresSíNoNoNo
Par Accesible AleatorioSíNoNoNo

Preguntas Frecuentes

¿Qué es un índice de contraste de color?+
Un índice de contraste de color es un valor numérico que representa la diferencia de luminancia (brillo percibido) entre dos colores. Va de 1:1 (sin contraste, colores idénticos) a 21:1 (contraste máximo, negro sobre blanco). El índice se calcula usando la fórmula de luminancia relativa de WCAG 2.1.
¿Qué índice de contraste WCAG necesito?+
Para el cumplimiento WCAG 2.1 Nivel AA (el estándar más ampliamente requerido), el texto corporal normal necesita al menos 4.5:1 de contraste, y el texto grande (18pt+ o 14pt+ en negrita) necesita al menos 3:1. Para el Nivel AAA (el estándar más alto), el texto normal necesita 7:1 y el texto grande necesita 4.5:1.
¿Qué cuenta como texto grande en WCAG?+
El texto grande en WCAG se define como texto de al menos 18 puntos (24 píxeles CSS) o 14 puntos en negrita (aproximadamente 18.66 píxeles CSS en negrita). Los requisitos de contraste son menores para el texto grande porque su mayor tamaño lo hace inherentemente más fácil de leer.
¿WCAG aplica a imágenes e iconos?+
Sí, el Criterio de Éxito 1.4.11 de WCAG 2.1 requiere que los componentes de interfaz (como iconos, bordes de formularios e indicadores de enfoque) y los objetos gráficos tengan al menos 3:1 de contraste contra los colores adyacentes.
¿Cómo se calcula el índice de contraste?+
El índice de contraste usa la fórmula de luminancia relativa: (L1 + 0.05) / (L2 + 0.05), donde L1 es la luminancia del color más claro y L2 es la del más oscuro. Los pesos reflejan la sensibilidad del ojo humano: percibimos el verde como el más brillante.
¿Es suficiente WCAG AA para mi sitio web?+
WCAG AA es el estándar referenciado por la mayoría de las leyes de accesibilidad en todo el mundo, incluyendo la ADA (EE.UU.), EAA (UE) y EN 301 549 (Europa). Para la mayoría de los sitios web y apps, el cumplimiento AA es tanto legalmente suficiente como bueno para la legibilidad.
¿Qué hago si los colores de mi marca no aprueban el contraste?+
Tienes varias opciones: ajusta ligeramente el tono de tu color de marca, usa tu color de marca solo para elementos decorativos y un color de alto contraste para el texto, aumenta el tamaño de fuente para calificar para el umbral de texto grande, o agrega un overlay semi-transparente detrás del texto. Nuestra herramienta sugiere automáticamente el color accesible más cercano.
¿El contraste importa para el modo oscuro?+
Absolutamente. Los mismos requisitos de contraste WCAG aplican independientemente del esquema de colores. Un blanco ligeramente apagado (#E0E0E0 a #F0F0F0) sobre un gris oscuro (#1A1A1A a #2D2D2D) a menudo proporciona mejor legibilidad mientras sigue cumpliendo con los estándares AA.
¿Los usuarios daltónicos pueden ver suficiente contraste?+
Los altos índices de contraste ayudan significativamente a los usuarios daltónicos, pero el contraste solo no es suficiente. WCAG también requiere que el color no sea el único medio para transmitir información (1.4.1). No uses solo rojo/verde para indicar error/éxito — agrega iconos o etiquetas de texto.
¿Cómo pruebo el contraste en mi sitio web existente?+
Puedes usar las DevTools del navegador (la auditoría Lighthouse de Chrome incluye verificaciones de contraste), extensiones del navegador como axe o WAVE, o pegar tus valores HEX/RGB exactos en esta herramienta. Para pruebas completas, usa herramientas automatizadas como Lighthouse para un escaneo de página completa.

Construye un Sitio Web Accesible con IA

Usa tus combinaciones de colores accesibles para construir un sitio web completo y compatible con WCAG usando el constructor de sitios con IA de Kleap.

Empieza a Construir Gratis

Related Free Tools

CSS Gradient Generator

Color Picker

Color Palette Generator

Button Generator

Verificador Gratuito de Contraste de Color | Herramienta de Accesibilidad WCAG 2026