Calculateur de luminance relative
Mesurez la quantité de lumière d’une couleur selon la formule WCAG : le gris moyen #808080 donne 0.215860500114, sur une échelle de 0 pour le noir à 1 pour le blanc. Les canaux RVB et leurs valeurs linéaires sont affichés pour vérifier le chiffre. Gratuit dans votre navigateur.
- Gratuit
- Fonctionne dans votre navigateur
- Sans inscription
- Vos données restent sur votre appareil
Lancer gratuitement
Exemple résolu
- Couleur
- #808080
- Luminance relative
- 0,2158605001
Le calculateur de luminance relative convertit une couleur hexadécimale sRGB en mesure lumineuse utilisée pour le contraste WCAG. Il développe au besoin la notation hexadécimale courte, valide chaque chiffre, normalise les canaux rouge, vert et bleu, retire le gamma sRGB avec la formule standard par morceaux, puis combine les valeurs linéaires avec les coefficients officiels. Le résultat va de 0 pour le noir à 1 pour le blanc. La réponse fournit aussi la valeur hexadécimale normalisée, les canaux RGB entiers et les trois canaux linéarisés afin que chaque étape soit visible et reproductible.
Saisissez une couleur sRGB précise
Indiquez une couleur sous la forme de trois ou six chiffres hexadécimaux, avec ou sans dièse initial. Par exemple, #09C devient #0099CC avant le calcul, tandis que 4A90D9 est accepté et normalisé en #4A90D9. Le calculateur n’accepte volontairement que ces formes hexadécimales sRGB sans ambiguïté.
Il ne devine pas les couleurs nommées, n’interprète pas les fonctions CSS, ne supprime pas la composante alpha et ne ramène pas silencieusement les canaux incorrects dans une plage valide. Cette limite stricte rend la validation fiable dans les systèmes de design automatisés, contrôles d’accessibilité, scripts de compilation et jeux de test : une donnée erronée produit une erreur plutôt qu’un nombre crédible mais faux.
La casse ne change pas le calcul et les espaces extérieurs sont retirés, mais les espaces intérieurs, chiffres supplémentaires, signes incompatibles et valeurs vides sont refusés. L’objet RGB renvoyé contient des canaux entiers de 0 à 255, ce qui vous permet de confirmer rapidement l’interprétation du texte source. Cette normalisation est utile lorsque vous mélangez les notations courtes et longues tout en exigeant une représentation canonique pour les journaux, instantanés ou calculs suivants.
Comprenez le calcul WCAG
La luminance relative n’est ni la moyenne simple du rouge, du vert et du bleu, ni la luminosité du modèle HSL. Chaque canal sRGB sur 8 bits est d’abord divisé par 255. Un canal normalisé inférieur ou égal à 0.04045 est divisé par 12.92 ; au-dessus, il est transformé en élevant ((canal + 0.055) / 1.055) à la puissance 2.4.
Cette opération retire la courbe de transfert sRGB et donne des valeurs lumineuses linéaires. Le calculateur applique ensuite les coefficients standard : 0.2126 pour le rouge, 0.7152 pour le vert et 0.0722 pour le bleu. Le vert pèse davantage car la vision humaine y est plus sensible, et le bleu moins.
La somme pondérée constitue la luminance relative indiquée, entre 0 pour le noir et 1 pour le blanc. Toutes les opérations et tous les coefficients étant fixes, une même entrée valide produit toujours la même sortie, sans réseau, état conservé ni inférence par modèle.
Intégrez la luminance à vos contrôles d’accessibilité
Une luminance relative isolée décrit une seule couleur ; elle ne suffit pas à déclarer un texte accessible. Pour évaluer le contraste, calculez la luminance du premier plan et celle de l’arrière-plan, prenez la valeur la plus claire L1 et la plus sombre L2, puis appliquez (L1 + 0.05) / (L2 + 0.05). Comparez ce rapport au seuil WCAG correspondant au contenu, à la taille du texte et au niveau de conformité visé.
Une capacité de luminance indépendante convient lorsqu’un pipeline possède déjà sa politique de contraste, doit mémoriser des mesures normalisées ou souhaite examiner les valeurs intermédiaires pendant un diagnostic. Ce calcul suppose des couleurs sRGB opaques. En présence de transparence, composez d’abord la couleur sur son arrière-plan réel ; une notation hexadécimale avec alpha est refusée, car la luminance resterait indéfinie sans ce fond.
Cas d’usage
Examiner les jetons de design
Calculez et conservez la luminance relative de chaque jeton de couleur sRGB opaque avant d’appliquer la politique de contraste du projet.
Diagnostiquer un calcul de contraste
Inspectez les canaux RGB normalisés et linéaires pour repérer une erreur d’interprétation ou de correction gamma dans une autre implémentation.
Créer des tests d’accessibilité
Produisez des luminances déterministes pour les couleurs de premier plan et d’arrière-plan employées dans les assertions automatiques WCAG.
Questions fréquentes
Dans quelle plage se situe la luminance relative ?
Le résultat va de 0 pour le noir sRGB à 1 pour le blanc sRGB, bornes comprises.
Quels formats de couleur sont acceptés ?
Les couleurs hexadécimales sRGB de trois ou six chiffres sont acceptées, avec ou sans # initial. Les noms, fonctions RGB et valeurs alpha sont refusés.
La luminance relative correspond-elle à la luminosité HSL ?
Non. La luminance relative WCAG linéarise les canaux sRGB et applique des coefficients pondérés ; la luminosité HSL repose sur une autre définition géométrique.
Cette valeur suffit-elle à prouver la conformité WCAG ?
Non. La conformité exige un rapport de contraste entre deux couleurs et le seuil adapté au contenu et au niveau recherché.
Pourquoi le gris moyen #808080 reste-t-il loin sous la moitié ?
Parce que la courbe gamma sRGB est d’abord retirée. Chaque canal à 128 devient 0.215860500114 en lumière linéaire et, comme rouge, vert et bleu sont égaux, c’est aussi la luminance.
Outils associés
Pour les développeurs — accès API
Tout sur cette page est disponible par programmation. Cette section s'adresse aux équipes qui veulent l'intégrer à leurs systèmes ; les autres peuvent simplement utiliser l'outil ci-dessus.
Endpoint
Authentification par jeton Bearer : un seul POST met la tâche en file d’attente, et le résultat vous parvient par webhook ou lien signé.
Appeler depuis votre 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)Exemple de requête
{
"color": "#4A90D9"
}Exemple de réponse
{
"task_id": "tsk_a1b2c3d4e5f6a1b2c3d4e5f6",
"type": "color.relative_luminance",
"status": "queued",
"_links": {
"result": "/tasks/tsk_…/result"
}
}L’API est asynchrone : chaque appel renvoie un task_id immédiatement, puis vous interrogez l’état à raison d’une requête par seconde.
Tarifs
Le prix est publié, sans tokens ni crédits. Une tâche qui échoue n’est pas facturée.
Erreurs
| HTTP | Code | Signification |
|---|---|---|
401 | unauthorized | Clé API absente ou invalide : vérifiez l’en-tête Authorization. |
402 | insufficient_balance | Solde insuffisant : rechargez votre compte pour lancer cette tâche. |
404 | unknown_type | Type de tâche inconnu : vérifiez le champ type de votre requête. |
429 | rate_limited | Trop de requêtes : ralentissez la cadence, puis réessayez. |
Notes techniques
Comprenez le calcul WCAG
Les canaux linéaires et le résultat sont arrondis à douze décimales afin de stabiliser le JSON sans modifier la décision pratique d’accessibilité.
Intégrez la luminance à vos contrôles d’accessibilité
L’API coûte $0.002 par élément et l’exécution dans le navigateur reprend le même calcul déterministe pour un contrôle immédiat.
Questions techniques
Quel est le prix de l’API ?
Chaque élément coûte $0.002. Vous pouvez également effectuer gratuitement le calcul dans le navigateur.