Verificador de contraste

Comprueba la relación de contraste WCAG y si pasa AA/AAA entre dos colores.

Los valores de color que ingresas se procesan localmente en tu navegador y nada se sube a un servidor.

¿Trabajas con códigos de color? Prueba el Conversor de Color CSS.

Acerca de Verificador de contraste

Este verificador de contraste mide la relación de contraste de color WCAG entre dos colores cualesquiera y te dice al instante si pasan los niveles de accesibilidad AA o AAA. Ingresa un color de primer plano (texto) y un color de fondo como hex o rgb/rgba, o elígelos con las muestras de color integradas, y la herramienta calcula la relación exacta más los veredictos de aprobado/no aprobado para texto normal y grande. Está pensado para desarrolladores, diseñadores e ingenieros de QA que necesitan una verificación rápida de la relación de contraste de color mientras crean interfaces accesibles, sistemas de diseño o páginas de marketing. Una vista previa en vivo muestra texto de ejemplo en los colores que elijas para que juzgues la legibilidad de un vistazo y detectes problemas de contraste de accesibilidad a tiempo. Todo se ejecuta localmente en tu navegador, así que tus valores de color se procesan en tu dispositivo y nada se sube a un servidor.

Características

Cómo usar Verificador de contraste

  1. Ingresa tu color de texto en el campo Primer plano (texto), o elígelo con la muestra de color.
  2. Ingresa tu color de fondo en el campo Fondo, o usa su muestra de color.
  3. Lee la relación de contraste que se muestra encima de las etiquetas de veredicto.
  4. Revisa las etiquetas de aprobado/no aprobado de AA y AAA para texto normal y grande.

Ejemplo

Entrada

Foreground (text): #777777
Background: #ffffff

Salida

contrast ratio: 4.48
AA · normal text (4.5:1): Fail
AA · large text (3:1): Pass
AAA · normal text (7:1): Fail
AAA · large text (4.5:1): Fail

El gris medio sobre blanco no pasa por poco el nivel AA para el texto de cuerpo de tamaño normal.

Errores comunes y solución de problemas

Preguntas frecuentes

¿Qué es un verificador de contraste y por qué importa la relación WCAG?
Un verificador de contraste compara dos colores y reporta la relación de contraste WCAG entre ellos, que predice qué tan legible será el texto. El Verificador de contraste de ArrayKit muestra la relación exacta más los veredictos AA y AAA para que confirmes que el texto es legible para usuarios con baja visión.
¿Qué relación de contraste necesito para pasar WCAG?
WCAG AA requiere al menos 4.5:1 para texto normal y 3:1 para texto grande, mientras que AAA requiere 7:1 para texto normal y 4.5:1 para texto grande. El Verificador de contraste muestra los cuatro veredictos a la vez.
¿Cómo verifico la relación de contraste de mi texto y fondo?
Ingresa tu color de texto en el campo Primer plano y tu color de fondo en el campo Fondo (hex, rgb o rgba), o usa las muestras de color. El Verificador de contraste actualiza la relación y las etiquetas AA/AAA en vivo mientras escribes.
¿Qué cuenta como texto grande para el umbral de 3:1?
El texto grande es por lo general de unos 18pt en adelante, o de 14pt en adelante cuando está en negrita. Cualquier cosa más pequeña se trata como texto normal y debe cumplir la relación más alta de 4.5:1.
¿La relación de contraste tiene en cuenta la opacidad?
No. La relación se basa en los valores RGB sólidos, así que aplana cualquier color semitransparente contra su fondo real antes de verificarlo en el Verificador de contraste.
¿Los colores que ingreso en el Verificador de contraste se envían a algún lugar?
No. El Verificador de contraste se ejecuta por completo en tu navegador, así que los colores que ingresas se quedan en tu dispositivo y nada se sube a un servidor.

Herramientas relacionadas

Todas las herramientas de ArrayKit