Fórmula de relación de contraste WCAG
Formula
Contraste = (L1 + 0,05) / (L2 + 0,05) donde L1 es una luminancia más clara.
Variables
- R, G, B
- Canales sRGB (0–255 o 0–1 normalizados)
- H, S, L
- Tono (grados), saturación y luminosidad (0–1) en HSL
- l
- Luminancia relativa (WCAG) o luminosidad en HSL/OKLCH
FAQ
- ¿La fórmula de relación de contraste WCAG es precisa para los flujos de trabajo de impresión?
- La pantalla RGB y la impresión CMYK utilizan diferentes gamas. Trate las conversiones como pruebas aproximadas; calibre con perfiles ICC para impresión comercial.
- ¿Puedo usar esta fórmula en CSS?
- El CSS moderno admite color-mix(), oklch() y lab() para muchas operaciones. Para canalizaciones complejas, calcule en JavaScript y exporte variables CSS.
- ¿Color DevByte carga mis colores?
- No. Las páginas de referencia de fórmulas son documentación estática; Las herramientas interactivas se ejecutan 100% del lado del cliente en su navegador.
Descripción general
Calcule el contraste de luminancia relativo entre los colores de primer plano y de fondo.
Color DevByte documenta esta fórmula para desarrolladores, diseñadores y revisores de accesibilidad que necesitan matemáticas de color reproducibles sin enviar datos a un servidor.
Utilice las herramientas de color vinculadas para aplicar esta fórmula de forma interactiva con vista previa en vivo y exportación multiformato.
Cuándo utilizar esta fórmula
Aplique la fórmula de relación de contraste wcag al crear tokens de diseño, validar el contraste WCAG o automatizar canalizaciones de color en CSS, Tailwind o JSON del sistema de diseño.
Para la interfaz de usuario de producción, verifique siempre los resultados con un verificador de contraste o una vista previa visual: los casos extremos en la corrección gamma y el mapeo de gama pueden cambiar los resultados.
Notas de implementación
Las herramientas basadas en navegador deben linealizar sRGB antes de los cálculos de luminancia o ΔE.
Prefiera la interpolación OKLCH o LAB para degradados y temas para evitar puntos medios grisáceos comunes en las mezclas RGB.