Herramienta Gratuita

Verificador de Contraste de Color

Verifica las proporciones de contraste entre colores de primer plano y fondo. Consulta instantáneamente el cumplimiento de WCAG 2.1 AA y AAA para texto normal y grande.

Verificador de Contraste de Color

El rápido zorro marrón

Texto normal

Contrast ratio: 14.10:1

Proporción de Contraste

14.10:1

WCAG AA

Texto normal

Aprobado

WCAG AAA

Texto normal

Aprobado

WCAG AA Grande

Texto grande

Aprobado

WCAG AAA Grande

Texto grande

Aprobado

Por qué importa la proporción de contraste

Un contraste de color suficiente asegura que el texto siga siendo legible para usuarios con baja visión o daltonismo. WCAG 2.1 Nivel AA (el estándar requerido por la mayoría de las leyes de accesibilidad) requiere una proporción de 4.5:1 para texto normal y 3:1 para texto grande (18px+ o 14px+ en negrita).

Cómo usar

  1. Elige tu color de texto usando el selector de color o ingresa un valor hexadecimal.
  2. Elige tu color de fondo de la misma manera.
  3. Lee la proporción de contraste y los insignias de aprobado/no aprobado de WCAG al instante.
  4. Usa los presets para pares de referencia rápida.
  5. Haz clic en Copiar CSS para obtener el par de colores como propiedades CSS.

Todos los cálculos ocurren en tu navegador — ningún dato de color se envía a ningún servidor.

Del blog de Skybin

Free developer tools from Skybin

Lee la guía en Skybin

Preguntas Frecuentes

¿Qué es WCAG AA versus AAA?
WCAG AA requiere 4.5:1 para texto normal y 3:1 para texto grande. AAA (el nivel mejorado) requiere 7:1 y 4.5:1. La mayoría de los estándares de accesibilidad y requisitos legales hacen referencia a AA.
¿Qué cuenta como texto grande?
WCAG define texto grande como 18pt (24px) o más, o 14pt (aproximadamente 18.67px) en negrita o más.