Verificador de Contraste (WCAG)
Verifica si tus colores de texto y fondo cumplen los estándares WCAG AA y AAA.
100% en tu navegador — no se sube nadaVerifica el ratio de contraste de colores WCAG para accesibilidad
El veloz zorro marrón salta sobre el perro perezoso
El veloz zorro marrón salta sobre el perro perezoso
mín. 4.5:1
mín. 3:1
mín. 7:1
mín. 4.5:1
Cómo funcionan los ratios de contraste WCAG y por qué importan
Las Pautas de Accesibilidad para el Contenido Web (WCAG 2.1) definen ratios de contraste mínimos entre el texto y su fondo para que personas con baja visión o deficiencias de color puedan leer el contenido. Un ratio de 1:1 significa sin diferencia (mismo color), y 21:1 es el máximo (negro sobre blanco). La mayoría del texto necesita al menos 4.5:1 para pasar WCAG AA, el estándar requerido por la mayoría de las leyes de accesibilidad.
Esta herramienta calcula el ratio de contraste exacto entre dos colores y lo verifica contra los cuatro umbrales WCAG: AA para texto normal (4.5:1), AA para texto grande (3:1), AAA para texto normal (7:1) y AAA para texto grande (4.5:1). Texto grande se define como 18pt (24px) o 14pt negrita (18.5px negrita). La vista previa muestra tus colores elegidos sobre texto real para que veas el resultado visualmente, no solo como un número.
La matemática detrás del ratio usa luminancia relativa — una medida de cuán brillante se ve un color al ojo humano, ponderada por cómo nuestros ojos perciben el rojo, verde y azul de manera diferente. El azul contribuye solo 7.2% al brillo percibido, mientras que el verde contribuye 71.5%. Por eso el texto azul oscuro sobre fondo negro falla aunque los valores hex parezcan "suficientemente diferentes." La fórmula aplica una corrección gamma (exponente 2.4) para convertir valores sRGB a luz lineal antes de ponderar.
Todos los cálculos corren en tu navegador. Ningún color ni dato de diseño se envía a ningún lado. Diseñadores, desarrolladores y creadores de contenido usan verificadores de contraste durante el proceso de diseño para asegurar que sus colores sean accesibles antes de publicar. Hacerlo bien en la etapa de diseño evita correcciones costosas después de una auditoría de accesibilidad o queja legal.
Umbrales de contraste WCAG — la referencia completa
| Nivel | Tamaño de texto | Ratio mínimo | Caso de uso |
|---|---|---|---|
| AA | Normal (< 18pt) | 4.5 : 1 | Texto de cuerpo, etiquetas de formulario, botones — lo básico para la mayoría de los sitios |
| AA | Grande (≥ 18pt o ≥ 14pt negrita) | 3 : 1 | Títulos, elementos de UI grandes |
| AAA | Normal (< 18pt) | 7 : 1 | Mejorado — recomendado para lectura larga |
| AAA | Grande (≥ 18pt o ≥ 14pt negrita) | 4.5 : 1 | Mejorado — recomendado para títulos importantes |
WCAG AA es el estándar requerido por la ADA (Ley de Estadounidenses con Discapacidades), Sección 508, la Ley Europea de Accesibilidad y la mayoría de las leyes de accesibilidad. WCAG AAA es una recomendación, no un requisito — lograrlo en todas partes es frecuentemente impráctico, pero vale la pena apuntar a ello para texto de cuerpo en páginas con mucho contenido.
Preguntas frecuentes
¿Qué ratio de contraste necesito?
Para cumplir WCAG AA (el requisito legal más común): 4.5:1 para texto normal y 3:1 para texto grande (18pt / 14pt negrita). Para WCAG AAA (mejorado): 7:1 para texto normal y 4.5:1 para texto grande.
¿Qué cuenta como "texto grande"?
Texto de al menos 18pt (24px) o al menos 14pt negrita (aproximadamente 18.5px negrita). El texto grande tiene un requisito de contraste más bajo porque su tamaño lo hace inherentemente más legible.
¿Mis datos de diseño son privados?
Sí. El cálculo de contraste corre completamente en tu navegador. Ningún color se envía a ningún servidor.