← Volver a herramientas
Verificador de Contraste de Color
Comprueba el contraste entre texto y fondo según los estándares de accesibilidad WCAG 2.1 AA y AAA.
Texto de muestra grande El veloz murciélago hindú comía feliz cardillo y kiwi.
Relación de contraste 16.15 : 1
| AA - texto normal (4.5:1) | Cumple |
|---|---|
| AA - texto grande (3:1) | Cumple |
| AAA - texto normal (7:1) | Cumple |
| AAA - texto grande (4.5:1) | Cumple |
| Componentes de interfaz y gráficos (3:1) | Cumple |
¿Qué es el contraste de color?
La relación de contraste mide la diferencia de luminosidad entre el color del texto y su fondo, desde 1:1 (idénticos) hasta 21:1 (negro sobre blanco). Las Pautas de Accesibilidad para el Contenido Web (WCAG) fijan relaciones mínimas para que personas con baja visión o daltonismo, y cualquiera que lea bajo el sol, pueda leer tu contenido.
El nivel AA exige 4.5:1 para texto normal y 3:1 para texto grande (18 pt o 14 pt en negrita) y para componentes de interfaz. El nivel AAA sube a 7:1 y 4.5:1. Este verificador calcula la relación con la fórmula de luminancia relativa de WCAG y muestra exactamente qué niveles se cumplen.
Cómo comprobar el contraste
- Elige o escribe el color del texto y el color de fondo como valores hexadecimales.
- Mira la vista previa en vivo y lee la relación de contraste.
- Revisa qué niveles WCAG se cumplen y ajusta los colores hasta que el nivel que necesitas quede en verde.
Casos de uso comunes
- Diseño accesible - valida una paleta de marca o un tema de interfaz antes de publicarlo.
- Cumplimiento normativo - cumple requisitos de accesibilidad que hacen referencia a WCAG AA.
- Modo oscuro - confirma que el texto se mantiene legible sobre fondos claros y oscuros.