Verificador de Contraste

Verifica las relaciones de contraste de color contra las directrices WCAG 2.1 al instante. Asegúrate de que tu texto sea legible y tu diseño sea accesible para todos. Gratuito y fácil de usar.

Advertisement
Advertisement

How to Use

  1. 1
    Ingresa los Colores Introduce los códigos HEX para los colores de texto y fondo.
  2. 2
    Ve la Vista Previa Mira cómo se ve tu texto en tiempo real.
  3. 3
    Verifica la Relación Revisa la relación de contraste calculada.
  4. 4
    Verifica el Cumplimiento Comprueba si pasa los estándares WCAG AA/AAA.

Por Qué Importa la Accesibilidad

Alcanza a una Audiencia Más Amplia

Haz que tu contenido sea usable para 1 de cada 12 hombres y 1 de cada 200 mujeres con deficiencia de visión de color, así como para aquellos con baja visión.

Mejora la Experiencia de Usuario para Todos

Un buen contraste mejora la legibilidad para todos, especialmente en pantallas con poco brillo o bajo la luz solar intensa.

Entendiendo las Calificaciones de WCAG

Nivel AA (Estándar)

Requiere 4.5:1 para texto normal, 3:1 para texto grande. El objetivo estándar para la mayoría de los sitios web.

Nivel AAA (Mejorado)

Requiere 7:1 para texto normal, 4.5:1 para texto grande. Accesibilidad mejorada para usuarios con pérdida de visión significativa.

100% Privado y Seguro

Este verificador de contraste se ejecuta completamente en tu navegador. Ningún dato, color o información se envía a nuestros servidores.

FAQ

¿Qué es el contraste de color y por qué es importante?

El contraste de color es la diferencia de brillo entre un color de primer plano y su fondo. Un alto contraste asegura que las personas con discapacidades visuales puedan percibir tu contenido eficazmente.

¿Se requiere que los logos cumplan con estos estándares?

No, las directrices de WCAG proporcionan excepciones para el texto que es parte de un logo o nombre de marca, así como para el texto que es puramente decorativo o parte de un componente de interfaz de usuario inactivo.

¿Cómo puedo arreglar una baja relación de contraste?

Aumenta la diferencia de luminancia. Haz el color claro más claro o el color oscuro más oscuro. Usa nuestra vista previa en vivo para experimentar.