Calculadora de luminancia relativa
Mida cuánta luz aporta un color según la fórmula WCAG: el gris medio #808080 da 0.215860500114, en una escala que va de 0 para el negro a 1 para el blanco. Los canales RGB y sus valores lineales se muestran para poder comprobar la cifra. Gratis en su navegador.
- Gratis
- Funciona en su navegador
- Sin registro
- Sus datos no salen de su equipo
Ejecutar — gratis
Ejemplo resuelto
- Color
- #808080
- Luminancia relativa
- 0,2158605001
La calculadora de luminancia relativa convierte un color hexadecimal sRGB en la medida de luz utilizada por los cálculos de contraste WCAG. Expande el formato hexadecimal abreviado cuando es necesario, valida cada dígito, normaliza los canales rojo, verde y azul, elimina la gamma sRGB mediante la fórmula estándar por tramos y combina los valores lineales con los coeficientes oficiales. El resultado va de 0 para negro a 1 para blanco. La respuesta también incluye el hexadecimal normalizado, los canales RGB enteros y los tres canales linealizados para que cada etapa sea visible y reproducible.
Introduzca un color sRGB preciso
Proporcione un color como tres o seis dígitos hexadecimales, con o sin el signo de número inicial. Por ejemplo, #09C se expande a #0099CC antes del cálculo, mientras que 4A90D9 se acepta y normaliza como #4A90D9. La calculadora solo admite estas formas hexadecimales sRGB inequívocas.
No intenta adivinar colores con nombre, interpretar funciones CSS, descartar el canal alfa ni limitar silenciosamente valores de canal incorrectos. Este límite estricto permite una validación fiable en sistemas de diseño automatizados, comprobaciones de accesibilidad, scripts de compilación y datos de prueba: una entrada errónea produce un error en lugar de un número verosímil pero incorrecto. Las mayúsculas no afectan al cálculo y se elimina el espacio exterior, pero se rechazan los espacios internos, dígitos adicionales, signos incompatibles y valores vacíos.
El objeto RGB devuelto contiene canales enteros de 0 a 255, lo que permite confirmar rápidamente cómo se interpretó el texto original. La normalización resulta útil cuando se mezclan notaciones abreviadas y completas y se necesita una representación canónica para registros, instantáneas o cálculos posteriores.
Comprenda el cálculo de WCAG
La luminancia relativa no es el promedio simple de rojo, verde y azul, ni el componente de luminosidad de HSL. Primero se divide cada canal sRGB de 8 bits entre 255. Un canal normalizado igual o inferior a 0.04045 se divide entre 12.92; uno superior se transforma elevando ((canal + 0.055) / 1.055) a 2.4.
Así se elimina la curva de transferencia sRGB y se obtienen valores de luz lineal. Después se aplican los coeficientes estándar: 0.2126 para rojo, 0.7152 para verde y 0.0722 para azul. El verde recibe el mayor peso porque la visión humana es más sensible a él, mientras que el azul recibe el menor.
La suma ponderada es la luminancia relativa indicada, limitada por 0 para negro y 1 para blanco. Como todas las operaciones y coeficientes son fijos, una entrada válida idéntica siempre genera la misma salida, sin red, estado almacenado ni inferencia de modelos.
Aplique la luminancia en flujos de accesibilidad
Un valor de luminancia relativa describe un solo color; por sí mismo no declara que un texto sea accesible. Para evaluar el contraste, calcule la luminancia del primer plano y del fondo, identifique el valor más claro L1 y el más oscuro L2, y utilice (L1 + 0.05) / (L2 + 0.05). Compare esa razón con el umbral WCAG correspondiente al contenido, tamaño del texto y nivel de conformidad buscado.
Mantener la luminancia como capacidad independiente resulta útil cuando un proceso ya posee su propia política de contraste, necesita almacenar mediciones normalizadas o desea examinar valores intermedios al depurar. Recuerde que el cálculo supone colores sRGB opacos. Si un diseño usa transparencia, componga primero el color sobre su fondo real; un hexadecimal con alfa se rechaza porque la luminancia no estaría definida sin ese fondo.
Qué puede hacer con ella
Inspeccionar tokens de diseño
Calcule y almacene la luminancia relativa de cada token de color sRGB opaco antes de aplicar la política de contraste del proyecto.
Depurar cálculos de contraste
Revise los canales RGB normalizados y de luz lineal para localizar errores de interpretación o corrección gamma en otra implementación.
Crear pruebas de accesibilidad
Genere luminancias deterministas para los colores de primer plano y fondo utilizados en aserciones automáticas de contraste WCAG.
Preguntas frecuentes
¿Qué intervalo puede tener la luminancia relativa?
El resultado va de 0 para el negro sRGB a 1 para el blanco sRGB, ambos inclusive.
¿Qué formatos de color se aceptan?
Se aceptan colores hexadecimales sRGB de tres o seis dígitos, con o sin # inicial. Se rechazan nombres, funciones RGB y valores alfa.
¿La luminancia relativa equivale a la luminosidad HSL?
No. La luminancia relativa WCAG linealiza los canales sRGB y aplica coeficientes ponderados; la luminosidad HSL utiliza otra definición geométrica.
¿Este valor demuestra por sí solo la conformidad WCAG?
No. La conformidad exige una razón de contraste entre dos colores y el umbral adecuado para el contenido y nivel objetivo.
¿Por qué el gris medio #808080 queda muy por debajo de la mitad?
Porque antes se elimina la curva gamma de sRGB. Cada canal de 128 pasa a 0.215860500114 en luz lineal y, como rojo, verde y azul son iguales, esa es también la luminancia.
Herramientas relacionadas
Para desarrolladores — acceso por API
Todo lo de esta página está disponible por programación. Esta sección es para equipos que quieren integrarlo en sus sistemas; el resto puede usar la herramienta de arriba sin más.
Endpoint de API
¿Prefiere automatizarlo? Un POST autenticado crea la tarea; el resultado llega por webhook o enlace firmado. La misma capacidad también se ejecuta aquí en la web, por email y desde Telegram — y pronto también desde nuestra app.
Llámela desde su stack
curl -X POST https://api.kit.forhosting.com/color/relative-luminance \
-H "Authorization: Bearer $KIT_KEY" \
-H "Content-Type: application/json" \
-d '{"color":"#4A90D9"}'const res = await fetch("https://api.kit.forhosting.com/color/relative-luminance", {
method: "POST",
headers: {
"Authorization": `Bearer ${process.env.KIT_KEY}`,
"Content-Type": "application/json"
},
body: JSON.stringify({
"color": "#4A90D9"
})
});
const { task_id } = await res.json();import os, requests
res = requests.post(
"https://api.kit.forhosting.com/color/relative-luminance",
headers={"Authorization": f"Bearer {os.environ['KIT_KEY']}"},
json={
"color": "#4A90D9"
},
)
task_id = res.json()["task_id"]<?php
$res = file_get_contents("https://api.kit.forhosting.com/color/relative-luminance", false, stream_context_create([
"http" => [
"method" => "POST",
"header" => "Authorization: Bearer " . getenv("KIT_KEY") . "\r\nContent-Type: application/json",
"content" => '{"color":"#4A90D9"}',
],
]));
$task = json_decode($res, true);body := bytes.NewBufferString(`{"color":"#4A90D9"}`)
req, _ := http.NewRequest("POST", "https://api.kit.forhosting.com/color/relative-luminance", body)
req.Header.Set("Authorization", "Bearer "+os.Getenv("KIT_KEY"))
req.Header.Set("Content-Type", "application/json")
res, _ := http.DefaultClient.Do(req)Ejemplo de solicitud
{
"color": "#4A90D9"
}Ejemplo de respuesta
{
"task_id": "tsk_a1b2c3d4e5f6a1b2c3d4e5f6",
"type": "color.relative_luminance",
"status": "queued",
"_links": {
"result": "/tasks/tsk_…/result"
}
}La API es asíncrona: la llamada devuelve un task_id al instante y el resultado llega por webhook. El polling está limitado a 1 req/s por tarea.
Precio
Precio publicado — sin tokens ni créditos inventados. Una tarea fallida no se cobra.
Errores
| HTTP | Código | Significado |
|---|---|---|
401 | unauthorized | API key ausente o inválida. |
402 | insufficient_balance | El saldo no cubre el precio de la tarea. |
404 | unknown_type | El tipo de tarea no existe. |
429 | rate_limited | Demasiadas peticiones. Use el webhook en vez de sondear. |
Notas técnicas
Comprenda el cálculo de WCAG
Los canales lineales y el valor final se redondean a doce decimales para ofrecer JSON estable sin alterar el resultado práctico de accesibilidad.
Aplique la luminancia en flujos de accesibilidad
La API cuesta $0.002 por elemento y la ejecución en el navegador utiliza el mismo cálculo determinista para comprobaciones inmediatas.
Preguntas técnicas
¿Cuánto cuesta la API?
Cada elemento cuesta $0.002. El cálculo también puede ejecutarse gratis en el navegador.