Visual Hierarchy
The quick brown fox jumps over the lazy dog. Legibility is critical for universal accessibility and rigorous design systems.
Comprueba las relaciones de contraste de color al instante y verifica el cumplimiento de WCAG 2.1. Pega dos colores cualesquiera para ver si cumplen los estándares AA o AAA para texto normal, texto grande y componentes de interfaz. Obtén sugerencias de corrección automática cuando tus colores no cumplan los requisitos de accesibilidad.
Prueba contra los estándares AA (4.5:1 para texto normal, 3:1 para texto grande) y AAA (7:1 / 4.5:1). Ve el estado de aprobado/no aprobado de un vistazo.
Cuando el contraste falle, obtén ajustes de color sugeridos que mantengan tu intención de diseño mientras cumplen los estándares de accesibilidad.
Ve cómo se ve tu texto realmente sobre el color de fondo. Previsualiza texto normal, texto grande y elementos de interfaz en tiempo real.
Introduce colores como HEX, RGB o HSL. El comprobador maneja la conversión automáticamente para que puedas trabajar en tu formato preferido.
Para WCAG AA: el texto normal necesita al menos 4.5:1, el texto grande (18pt o 14pt negrita) necesita al menos 3:1, y los componentes de interfaz no textuales necesitan al menos 3:1.
AAA es un estándar más estricto: 7:1 para texto normal y 4.5:1 para texto grande. La mayoría de los sistemas de diseño apuntan a AA como mínimo, con AAA como objetivo aspiracional.
No. WCAG 2.1 también requiere un contraste de 3:1 para componentes de interfaz (botones, bordes de entrada, iconos) y objetos gráficos que transmitan significado.
Alrededor del 8% de los hombres y el 0,5% de las mujeres tienen algún tipo de deficiencia en la visión del color. Un buen contraste garantiza que tu contenido sea legible para todos, incluyendo personas con baja visión, bajo luz solar intensa o en pantallas de baja calidad.