A11y Colors Check A11y Colors Check

Verifica el Contraste de Color WCAG y Genera Paletas Accesibles

Selector de Color

Vista Previa en Vivo

Texto de Encabezado de Muestra

El rápido zorro marrón salta sobre el perro perezoso

Ratio de Contraste

0:1
1:1 21:1
Cumplimiento WCAG
AA
AAA
Texto Normal
-
-
Texto Grande
-
-

Muestras de Texto

Normal
El rápido zorro marrón salta sobre el perro perezoso
16px
Grande
El rápido zorro marrón salta sobre el perro perezoso
24px
Negrita
El rápido zorro marrón salta sobre el perro perezoso
16px

Paleta de Colores

Exportar CSS

¿Por qué es importante la Accesibilidad?

¿Por qué es importante la Accesibilidad?

Al hacer que la accesibilidad forme parte de tu flujo de diseño web, mejorará la usabilidad de tu sitio web y tus usuarios tendrán una mejor experiencia, lo que puede resultar en ampliar tu audiencia, tus usuarios serán tus embajadores y eso puede llever a aumentar tu tráfico. Más que cuestiones legales, nuestro objetivo es fomentar la accesibilidad y la inclusión para todos, y ayudarte a que el diseño de tu sitio web sea consciente y compatible.

Estas pautas se basan en los estándares (niveles A y AA) de las Web Content Accessibility Guidelines (WCAG) (link externo), y aquí tienes una forma de verificar el cumplimiento hasta el nivel más alto de requisitos AAA.

¿Qué es el Contraste de Color?

¿Qué es el Contraste de Color?

El contraste de color es la diferencia de brillo entre los colores de primer plano y fondo. Se mide como una relación de 1:1 (sin contraste) a 21:1 (contraste máximo).

Un contraste mayor hace que el texto sea más fácil de leer, especialmente para usuarios con discapacidades visuales.

¿Por qué importa el Contraste?

¿Por qué importa el Contraste?

Un contraste de color adecuado garantiza que todos puedan leer tu contenido, incluidas las personas con baja visión, daltonismo o que estén viendo contenido bajo la luz solar intensa.

Las WCAG requieren ratios mínimos de contraste: 4.5:1 para texto normal (nivel AA) y 7:1 para accesibilidad mejorada (nivel AAA).

¿Por qué son importantes los Tamaños de Texto?

¿Por qué son importantes los Tamaños de Texto?

El texto más grande es más fácil de leer y requiere menos contraste. WCAG define "texto grande" como 18pt (24px) o más grande para peso regular, y 14pt (18.5px) o más grande para texto en negrita.

El texto grande solo necesita una relación de contraste de 3:1 para cumplimiento AA, en comparación con 4.5:1 para texto normal.