Esta herramienta interactiva de Contrast Checker está diseñada para ayudarte a crear interfaces web accesibles y legibles para todos los usuarios, cumpliendo rigurosamente con las normativas de accesibilidad.
¿Cómo se utiliza?
- Ingreso de colores: Introduce los códigos en formato hexadecimal RGB para el primer plano (texto) y el fondo, o selecciónalos visualmente mediante el selector de color integrado.
- Ajustes avanzados: Utiliza el valor Alfa para configurar la transparencia del texto y el control de Luminosidad para ajustar con precisión el brillo percibido del color.
- Cuentagotas: Aprovecha la función de cuentagotas para tomar muestras de color directamente de cualquier elemento visible en tu pantalla.
Criterios y niveles WCAG soportados
La herramienta calcula el índice de contraste en tiempo real y lo contrasta frente a los estándares oficiales:
- Nivel AA (WCAG 2.0): Requiere una relación de contraste mínima de 4.5:1 para texto normal y 3:1 para texto grande.
- Nivel AA (WCAG 2.1): Exige un mínimo de 3:1 para gráficos y componentes de interfaz interactivos (como bordes de campos de formulario).
- Nivel AAA: El estándar más exigente, que requiere al menos 7:1 para texto normal y 4.5:1 para texto grande.
Nota sobre texto grande: Se considera texto grande aquel de 14 pt (aproximadamente 18.66 px) o superior en negrita, así como cualquier texto de 18 pt (aproximadamente 24 px) o más en peso normal.