Convertidor Gratuito

Contraste de Color Verificador (WCAG)

Verifica la relación de contraste entre dos colores para el cumplimiento de accesibilidad WCAG AA y AAA. Gratis, instantáneo y completamente en el navegador.

Texto de Muestra — Tamaño Normal

Texto pequeño de muestra — 14px

Relación de Contraste:21.00:1
WCAG AATexto NormalAprueba
WCAG AATexto GrandeAprueba
WCAG AAATexto NormalAprueba
WCAG AAATexto GrandeAprueba

Acerca de esta herramienta

Verifique las relaciones de contraste de color entre el texto de primer plano y los colores de fondo de acuerdo con las pautas de accesibilidad WCAG 2.1. Ingrese colores como códigos hexadecimales, valores RGB o valores HSL y vea instantáneamente la relación de contraste junto con los resultados de aprobación/rechazo para el cumplimiento de WCAG AA y AAA en tamaños de texto normales y grandes.

Cómo usarla

  1. Ingrese o elija su color de primer plano (texto) usando el selector de color o la entrada hexadecimal.
  2. Ingrese o elija su color de fondo.
  3. Vea la relación de contraste y los resultados de aprobación/rechazo WCAG 2.1 AA/AAA al instante.
  4. Ajuste los colores hasta alcanzar el nivel de cumplimiento deseado.

Preguntas frecuentes

¿Qué relación de contraste se requiere para cumplir con las WCAG?
WCAG AA requiere 4,5:1 para texto normal y 3:1 para texto grande (18 puntos+ o 14 puntos+ negrita). WCAG AAA requiere 7:1 para texto normal y 4,5:1 para texto grande. La relación máxima posible es 21:1 (negro sobre blanco).
¿Por qué es importante el contraste de color?
Un contraste suficiente garantiza que el texto sea legible para usuarios con baja visión, daltonismo o aquellos que ven pantallas a plena luz del sol. También es un requisito legal según las normas de accesibilidad de la ADA y la UE para muchos sitios web.
¿Qué se considera "texto grande" en las WCAG?
El texto grande se define como 18 puntos (24 px) y más para peso normal, o 14 puntos (18,66 px) y más para texto en negrita. El texto grande tiene menores requisitos de contraste porque es inherentemente más fácil de leer.
¿Esta herramienta comprueba el contraste de elementos que no son de texto?
WCAG 2.1 requiere una relación de contraste de 3:1 para los componentes de la interfaz de usuario y los objetos gráficos (botones, iconos, campos de formulario). También puede utilizar esta herramienta para verificarlos: simplemente ingrese el componente y los colores de fondo.