Diferencia de brillo W3C
Compare dos colores con la prueba histórica de brillo del W3C: el negro frente al blanco difiere en 255, muy por encima del 125 necesario para aprobar. Útil para repetir auditorías antiguas; para decisiones actuales de accesibilidad, use una comprobación de contraste WCAG. Gratis en su navegador.
- Gratis
- Funciona en su navegador
- Sin registro
- Sus datos no salen de su equipo
Ejecutar — gratis
Ejemplo resuelto
- Color 1
- #000
- Color 2
- #fff
- Color 1
- #000000
- Color 2
- #FFFFFF
- Brillo 1
- 0
- Brillo 2
- 255
Esta calculadora compara dos colores hexadecimales mediante la fórmula histórica de brillo percibido vinculada al borrador AERT del W3C. Convierte cada color en un valor ponderado, obtiene la diferencia absoluta e indica si supera 125. El resultado determinista incluye los colores normalizados, ambos valores de brillo, la diferencia, el umbral y la decisión. Sirve para reproducir auditorías antiguas, pero no sustituye el contraste WCAG moderno.
Qué mide la prueba histórica de brillo
La prueba estima cuánto de claro u oscuro parece cada color ponderando de forma distinta sus canales rojo, verde y azul. La visión humana es más sensible al verde, después al rojo y por último al azul; por eso el cálculo usa 299 para rojo, 587 para verde y 114 para azul, y divide la suma entre 1000. La capacidad calcula ambos brillos y toma su diferencia absoluta.
Solo aprueba si el resultado es mayor que 125; un valor exactamente igual a 125 no aprueba. El orden de los colores no altera la decisión. Esta operación mide únicamente la separación de brillo: no aplica la otra fórmula histórica de diferencia de color ni calcula la relación de contraste exigida por las WCAG actuales.
Úsela cuando deba reproducir una regla antigua, contrastar resultados de herramientas heredadas o mantener un sistema que cite expresamente esta fórmula. Para accesibilidad nueva, considérela información complementaria y no una declaración completa de conformidad.
Cómo introducir los colores e interpretar la respuesta
Introduzca cada color en notación RGB hexadecimal con almohadilla inicial. Se admiten tanto la forma abreviada de tres dígitos, como #0AF, como la forma completa de seis, como #00AAFF. Los valores abreviados se expanden repitiendo cada dígito y la respuesta normaliza los colores a seis dígitos en mayúsculas.
Se rechazan canales alfa, nombres CSS, funciones rgb(), espacios y valores sin almohadilla, en lugar de adivinar su intención. Así, el formato mostrado nunca cambia un caso próximo al límite.
Cómo usar el resultado en auditorías y automatizaciones
Guarde los colores normalizados y la diferencia devuelta junto al registro de auditoría para que otra persona pueda reproducir la decisión sin depender de una captura de pantalla ni del analizador de colores de un navegador. En automatizaciones, consulte passes y utilice los números detallados para informes y diagnósticos. Un fallo solo significa que la pareja no supera el umbral histórico; una aprobación solo significa que sí lo supera.
Ninguno de los dos resultados demuestra por sí solo un nivel WCAG moderno, pues las reglas actuales usan luminancia relativa, una relación de contraste y umbrales distintos según el texto. Si su proyecto necesita ambas comprobaciones, ejecute esta como prueba heredada y una prueba WCAG por separado.
Qué puede hacer con ella
Reproducir una auditoría de accesibilidad antigua
Vuelva a calcular un resultado histórico con la fórmula ponderada exacta y el umbral estrictamente mayor.
Revisar sistemas de diseño archivados
Documente cómo funcionaban paletas antiguas según la prueba de brillo usada cuando se crearon.
Preguntas frecuentes
¿Qué fórmula utiliza esta calculadora?
Calcula (299 × rojo + 587 × verde + 114 × azul) / 1000 para cada color y obtiene después la diferencia absoluta.
¿Qué valor aprueba la prueba heredada?
La diferencia de brillo debe ser mayor que 125. Si es exactamente 125, no aprueba.
¿Una aprobación garantiza el contraste WCAG actual?
No. Las WCAG modernas usan luminancia relativa y una relación de contraste; esta es otra prueba, de carácter histórico.
¿Qué formatos de color se admiten?
Use notación hexadecimal #RGB o #RRGGBB. No se admiten alfa, nombres CSS, sintaxis rgb() ni espacios externos.
¿Importa el orden de los colores?
No. Como se usa una diferencia absoluta, invertir los colores conserva la diferencia y la decisión.
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/brightness-diff-w3c \
-H "Authorization: Bearer $KIT_KEY" \
-H "Content-Type: application/json" \
-d '{"color_1":"#000000","color_2":"#FFFFFF"}'const res = await fetch("https://api.kit.forhosting.com/color/brightness-diff-w3c", {
method: "POST",
headers: {
"Authorization": `Bearer ${process.env.KIT_KEY}`,
"Content-Type": "application/json"
},
body: JSON.stringify({
"color_1": "#000000",
"color_2": "#FFFFFF"
})
});
const { task_id } = await res.json();import os, requests
res = requests.post(
"https://api.kit.forhosting.com/color/brightness-diff-w3c",
headers={"Authorization": f"Bearer {os.environ['KIT_KEY']}"},
json={
"color_1": "#000000",
"color_2": "#FFFFFF"
},
)
task_id = res.json()["task_id"]<?php
$res = file_get_contents("https://api.kit.forhosting.com/color/brightness-diff-w3c", false, stream_context_create([
"http" => [
"method" => "POST",
"header" => "Authorization: Bearer " . getenv("KIT_KEY") . "\r\nContent-Type: application/json",
"content" => '{"color_1":"#000000","color_2":"#FFFFFF"}',
],
]));
$task = json_decode($res, true);body := bytes.NewBufferString(`{"color_1":"#000000","color_2":"#FFFFFF"}`)
req, _ := http.NewRequest("POST", "https://api.kit.forhosting.com/color/brightness-diff-w3c", 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_1": "#000000",
"color_2": "#FFFFFF"
}Ejemplo de respuesta
{
"task_id": "tsk_a1b2c3d4e5f6a1b2c3d4e5f6",
"type": "color.brightness_diff_w3c",
"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.
Límites
max_color_chars | 7 |
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
Cómo introducir los colores e interpretar la respuesta
La respuesta presenta brightness_1 y brightness_2 en la escala habitual de 0 a 255, brightness_difference como distancia absoluta, threshold con 125 y passes como valor booleano. Los resultados numéricos se redondean a tres decimales para estabilizar el JSON, pero la decisión utiliza el cálculo sin redondear. Si intercambia color_1 y color_2, se intercambian los brillos individuales, mientras que la diferencia y la decisión permanecen iguales.
Cómo usar el resultado en auditorías y automatizaciones
Cada solicitud API cuesta $0.002; el navegador usa el mismo solucionador determinista, sin red, azar, marcas de tiempo ni estado oculto.
Casos de integración
Proteger pruebas de regresión
Compare parejas de colores establecidas y detecte cambios en una regla heredada de aceptación.
Preguntas técnicas
¿Cuánto cuesta una solicitud API?
Cada solicitud API cuesta $0.002. El cálculo del navegador se ejecuta localmente con la misma lógica determinista.