🎨 Comprobador de Contraste de Color

Valida el contraste entre texto y fondo según los estándares WCAG 2.1 AA y AAA

Color de Fondo

Color de Texto

Vista Previa

Texto normal (16px)

Texto grande (18px bold o 24px)

Enlace de ejemplo

Resultados de Contraste

Ratio de Contraste --:--

Luminancia relativa fondo: -- Luminancia relativa texto: --

Texto Normal (AA) ⏳ Calculando...

Requisito: Ratio ≥ 4.5:1

Texto Normal (AAA) ⏳ Calculando...

Requisito: Ratio ≥ 7:1

Texto Grande (AA) ⏳ Calculando...

Requisito: Ratio ≥ 3:1

Texto Grande (AAA) ⏳ Calculando...

Requisito: Ratio ≥ 4.5:1

Componentes UI (AA) ⏳ Calculando...

Requisito: Ratio ≥ 3:1

Simulador de Daltonismo

Texto normal (16px)

Texto grande (18px bold o 24px)

Enlace de ejemplo

Ratio de contraste simulado: --:--

Casos de Uso Específicos

Enlace de Ejemplo

Campo de texto de ejemplo

Título de la Card

Contenido de ejemplo de una tarjeta con texto.

Exportar Resultados

📚 ¿Qué es el Contraste de Color?

¿Por qué es importante?

El contraste de color es fundamental para que las personas con discapacidad visual puedan leer y entender el contenido de tu sitio web. Un contraste insuficiente hace que el texto sea difícil o imposible de leer.

Niveles WCAG 2.1

Nivel A (Mínimo): Requiere contraste básico
Nivel AA (Recomendado):
- Texto normal: Ratio ≥ 4.5:1
- Texto grande (18px bold o 24px): Ratio ≥ 3:1
- Componentes UI: Ratio ≥ 3:1
Nivel AAA (Óptimo):
- Texto normal: Ratio ≥ 7:1
- Texto grande: Ratio ≥ 4.5:1

Mejores Prácticas

Prueba siempre el contraste durante el diseño
Considera diferentes tipos de daltonismo
No confíes solo en el color para transmitir información
Valida estados hover, focus y active
Prueba con usuarios reales cuando sea posible

Recursos Adicionales

¿Quieres análisis completos de accesibilidad WCAG 2.1 para tu sitio web?

Regístrate Gratis →