Verificador de Contraste

Pega un color de primer plano y fondo (o elige de una captura de pantalla); obtén la relación de contraste y qué niveles WCAG cumple. WCAG 2.1 AA es la línea base legal de accesibilidad en la mayoría de jurisdicciones; AAA es el estándar más alto recomendado para contenido crítico.

Los umbrales

• WCAG AA, texto normal: mínimo 4.5:1.
• WCAG AA, texto grande (18pt+ o 14pt+ negrita): mínimo 3:1.
• WCAG AAA, texto normal: mínimo 7:1.
• WCAG AAA, texto grande: mínimo 4.5:1.
• Componentes de interfaz no textuales (botones, bordes de formularios): mínimo 3:1 (WCAG 2.1+).

Por qué importa el contraste

El texto con bajo contraste es ilegible para usuarios con baja visión (aproximadamente el 4% de la población), usuarios bajo luz solar intensa, usuarios con monitores económicos y ojos envejecidos (todos, eventualmente). Muchos sistemas de diseño optan por gris sobre gris porque se ve elegante en la pantalla calibrada 5K de un diseñador, pero es ilegible en otros lugares.

No cumplir con WCAG AA también es legalmente accionable en EE. UU. (ADA Título III), UE (EAA) y muchas otras jurisdicciones. Seguro barato: ejecuta cada par de texto/fondo a través de un verificador antes de publicar.

Qué reportamos

1. Relación de contraste como un número (ej. 4.71:1).
2. Aprobado/reprobado para cada nivel WCAG y tamaño de texto.
3. Correcciones sugeridas: el color de primer plano más oscuro o fondo más claro más cercano que aprobaría.
4. Vista previa en vivo con texto de muestra en el par de colores.

Combínalo con el simulador de daltonismo

El contraste y el daltonismo son ejes de accesibilidad diferentes. Ejecuta el Simulador de Daltonismo en la misma interfaz para verificar que también funcione para usuarios con CVD.