Calculadora de Luminancia
Calcula la luminancia relativa de cualquier color según el estándar WCAG
Compara la luminancia relativa entre dos colores, calcula el ratio de contraste WCAG y obtén sugerencias automáticas para mejorar la accesibilidad.
Comparación de Luminancia
Ratio de Contraste
Aceptable
Texto de Ejemplo
Texto pequeño de muestra
Niveles WCAG 2.1
Sugerencia para alcanzar AA
Ajustar a #1E6FF5
Nuevo ratio: 4.52:1
Equivalente en Escala de Grises
El equivalente en escala de grises muestra cómo se percibe la luminosidad del color sin el matiz.
Fórmula W3C
L = 0.2126 × R + 0.7152 × G + 0.0722 × BContrast = (L1 + 0.05) / (L2 + 0.05)Basado en el espacio de color sRGB estándar.
Cómo funciona
La luminancia relativa mide el brillo percibido de un color, de 0 (negro) a 1 (blanco).
¿Por qué es importante?
La luminancia es la base para calcular el ratio de contraste WCAG. Dos colores con luminancia similar tendrán bajo contraste.
Fórmula
L = 0.2126 × R + 0.7152 × G + 0.0722 × BDonde R, G, B son valores linearizados (gamma corregidos).
💡 Ejemplos de uso prácticos
Caso 1: Elegir color de texto
Tu fondo es #F3F4F6 (gris claro). ¿Qué color de texto usar?
→ Luminancia fondo: 0.92 (muy claro)
→ Necesitas texto con L < 0.18 para buen contraste
Caso 2: Comparar colores "brillantes"
¿Por qué el amarillo parece más brillante que el azul puro?
→ Amarillo #FFFF00: L = 0.93
→ Azul #0000FF: L = 0.07
→ El verde en amarillo aporta mucha luminancia
Caso 3: Depurar problemas de contraste
Dos colores parecen diferentes pero tienen bajo contraste.
→ Compara sus luminancias
→ Si son similares, necesitas ajustar uno de ellos