Respuesta directa
La relación de contraste de color WCAG 2.2 mide la diferencia de luminancia relativa entre el texto de primer plano y el color de fondo en una escala numérica que abarca desde 1:1 (contraste nulo) hasta 21:1 (contraste máximo absoluto).
Cómo usar esta herramienta
Elige los colores de texto y fondo
Escribe los códigos cromáticos en formato HEX, RGB o HSL, o usa el selector visual de color.
Comprueba la conformidad con WCAG 2.2 AA y AAA
Consulta de inmediato si la combinación cumple los umbrales para texto normal (4,5:1 AA / 7,0:1 AAA), texto grande (3,0:1 AA / 4,5:1 AAA) y componentes de interfaz (3,0:1 AA).
Aplica sugerencias de corrección inteligente
Haz clic en las alternativas cromáticas recomendadas más cercanas dentro del espacio de color para alcanzar la conformidad minimizando el cambio perceptivo.
Cómo funciona el contraste de color y la luminancia relativa según WCAG 2.2
La luminancia relativa (L) se determina linealizando los componentes del espacio sRGB (R, G, B) y ponderándolos según la sensibilidad espectral del ojo humano: L = 0,2126 * R_linear + 0,7152 * G_linear + 0,0722 * B_linear. La relación divide la luminancia más clara L1 entre la más oscura L2 sumando un factor de corrección por luz ambiental (+0,05).
- Texto normal de cuerpo: Requiere al menos 4,5:1 para el Nivel AA y 7,0:1 para el Nivel avanzado AAA.
- Texto de gran tamaño (18 pt / 24 px o 14 pt en negrita): Requiere un mínimo de 3,0:1 para el Nivel AA y 4,5:1 para el Nivel AAA.
- Componentes interactivos de interfaz (botones, campos de formulario): Exigen al menos 3,0:1 conforme al criterio WCAG 1.4.11.
Ejemplos prácticos
Auditoría de azul corporativo sobre fondo blanco puro
Entrada: Color de texto: #2563eb (Azul real), Color de fondo: #ffffff (Blanco puro)
Salida: Relación de contraste: 4,87:1 — APROBADO Nivel AA (Texto normal), APROBADO Nivel AAA (Texto grande)
Satisface con holgura los requerimientos legales y normativos de accesibilidad para lectura de textos.
Limitaciones
- Analiza combinaciones de colores planos; en degradados o fondos con imágenes es necesario auditar el punto con menor contraste relativo.
- La evaluación matemática del contraste no sustituye una auditoría integral de accesibilidad que verifique tipografías, estados de foco y lectores de pantalla.
Preguntas frecuentes
¿Qué diferencia hay entre los niveles de conformidad WCAG AA y AAA?
El Nivel AA es el estándar de obligado cumplimiento legal y comercial en administraciones públicas y empresas en Europa y EE. UU. (4,5:1 para texto normal). El Nivel AAA es una norma más exigente (7,0:1) orientada a usuarios con discapacidad visual severa.
¿Se almacena la paleta de colores de mi marca en algún servidor?
No. Todos los cálculos matemáticos de luminancia, verificación de umbrales y sugerencias de corrección se procesan íntegramente en tu navegador.
Referencias y normas autorizadas
- Pautas de Accesibilidad para el Contenido Web (WCAG) 2.2 del W3C ↗ — Estándar oficial internacional que define las relaciones de contraste y criterios de conformidad de accesibilidad digital.
- Definición y Fórmula Matemática de Luminancia Relativa del W3C ↗ — Fórmula matemática estandarizada para determinar la luminancia relativa en el espacio de color sRGB.