Comprobador de contraste de color

Cómo funciona nuestro comprobador de contraste de color

Introduce tus colores de primer plano y fondo usando valores hexadecimales RGB, o elijalos directamente con el selector de colores.

 Puedes:

• Ajusta Alpha para cambiar lo transparente que es el color del primer plano.
• Usa el control deslizante de Claridad para que el color parezca más claro o más oscuro.

Nuestra herramienta calcula entonces la relación de contraste y la compara con las directrices WCAG:

• WCAG 2.0 Nivel AA
• Al menos 4,5:1 para texto corporal normal
• Al menos 3:1 para texto grande
• WCAG 2.1 (UI y gráficos)
• Al menos 3:1 para iconos, bordes y otros componentes de la interfaz
• WCAG Nivel AAA
• Al menos 7:1 para texto normal
• Al menos 4,5:1 para texto grande

Texto grande significa o bien:

• 14 puntos (unos 18,66 px) y negrita, o
• 18 pt (aproximadamente px) o más

Puedes usar el cuentagotas del selector de colores para captar colores exactos de cualquier cosa que veas en tu pantalla. Facilita probar diseños reales, botones o fondos.

Para que los enlaces que dependan únicamente del color destaquen, utiliza nuestro comprobador de contraste de color para asegurarte de que cumplen con los estándares de accesibilidad y sean fáciles de leer para todos.