Différence de luminosité W3C
Comparez deux couleurs avec l’ancien test de luminosité du W3C : le noir face au blanc présente un écart de 255, bien au-delà des 125 requis. Pratique pour refaire d’anciens audits ; pour l’accessibilité actuelle, utilisez un contrôle de contraste WCAG. Gratuit dans votre navigateur.
- Gratuit
- Fonctionne dans votre navigateur
- Sans inscription
- Vos données restent sur votre appareil
Lancer gratuitement
Exemple résolu
- Couleur 1
- #000
- Couleur 2
- #fff
- Couleur 1
- #000000
- Couleur 2
- #FFFFFF
- Luminosité 1
- 0
- Luminosité 2
- 255
Ce calculateur compare deux couleurs hexadécimales selon la formule historique de luminosité perçue liée au projet AERT du W3C. Il convertit chaque couleur en valeur pondérée, calcule l’écart absolu et indique s’il dépasse 125. Le résultat déterministe fournit les couleurs normalisées, les deux luminosités, l’écart, le seuil et le verdict. Il permet de reproduire d’anciens audits, mais ne remplace pas le rapport de contraste des WCAG actuelles.
Ce que mesure l’ancien test de luminosité
Le test estime si chaque couleur paraît claire ou sombre en pondérant différemment ses canaux rouge, vert et bleu. La vision humaine étant plus sensible au vert, puis au rouge et enfin au bleu, le calcul emploie 299 pour le rouge, 587 pour le vert et 114 pour le bleu, avant de diviser la somme par 1000. La capacité calcule les deux luminosités et retient leur différence absolue.
Le résultat n’est validé que s’il est supérieur à 125 ; une valeur exactement égale à 125 échoue. L’ordre des couleurs ne change donc pas le verdict. Cette opération mesure uniquement l’écart de luminosité : elle n’applique ni l’autre formule historique de différence chromatique ni le rapport de contraste exigé par les WCAG modernes.
Utilisez-la pour reproduire une règle ancienne, confronter les résultats d’un outil historique ou maintenir un système qui cite précisément cette formule. Pour un nouveau projet d’accessibilité, considérez-la comme une information complémentaire, jamais comme une preuve complète de conformité.
Saisir les couleurs et comprendre la réponse
Saisissez chaque couleur en notation RGB hexadécimale précédée du signe dièse. La forme courte à trois chiffres, telle que #0AF, et la forme complète à six chiffres, telle que #00AAFF, sont acceptées. Chaque chiffre court est doublé et les couleurs renvoyées sont normalisées sur six chiffres majuscules.
Les canaux alpha, noms CSS, fonctions rgb(), espaces et valeurs sans dièse sont refusés plutôt que devinés. L’affichage ne peut donc pas modifier un cas proche du seuil.
Exploiter le résultat dans un audit automatisé
Conservez les couleurs normalisées et l’écart retourné dans le dossier d’audit afin qu’une autre personne puisse reproduire le verdict sans capture d’écran ni interprétation du navigateur. Dans une automatisation, lisez passes et utilisez les valeurs détaillées pour les rapports et diagnostics. Un échec signifie seulement que la paire ne dépasse pas le seuil historique ; une réussite signifie uniquement qu’elle le dépasse.
Aucun verdict ne démontre un niveau WCAG moderne, car les règles actuelles reposent sur la luminance relative, un rapport de contraste et des seuils adaptés au texte. Si votre projet exige les deux méthodes, exécutez ce test historique et un contrôle WCAG séparé.
Cas d’usage
Reproduire un ancien audit d’accessibilité
Recalculez un résultat historique avec la pondération exacte et le seuil strictement supérieur.
Examiner des systèmes graphiques archivés
Documentez les performances d’anciennes palettes selon le test utilisé lors de leur création.
Questions fréquentes
Quelle formule ce calculateur applique-t-il ?
Il calcule (299 × rouge + 587 × vert + 114 × bleu) / 1000 pour chaque couleur, puis prend la différence absolue.
Quelle valeur valide l’ancien test ?
La différence doit être supérieure à 125. Une valeur exactement égale à 125 échoue.
Une réussite garantit-elle le contraste WCAG actuel ?
Non. Les WCAG modernes utilisent la luminance relative et un rapport de contraste ; il s’agit ici d’un autre test, historique.
Quels formats de couleur sont acceptés ?
Utilisez la notation #RGB ou #RRGGBB. Alpha, noms CSS, syntaxe rgb() et espaces extérieurs sont refusés.
L’ordre des couleurs a-t-il une importance ?
Non. La différence étant absolue, inverser les couleurs conserve l’écart et le verdict.
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/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)Exemple de requête
{
"color_1": "#000000",
"color_2": "#FFFFFF"
}Exemple de réponse
{
"task_id": "tsk_a1b2c3d4e5f6a1b2c3d4e5f6",
"type": "color.brightness_diff_w3c",
"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.
Limites
max_color_chars | 7 |
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
Saisir les couleurs et comprendre la réponse
La réponse présente brightness_1 et brightness_2 sur l’échelle de 0 à 255, brightness_difference comme écart absolu, threshold à 125 et passes comme booléen. Les valeurs affichées sont arrondies à trois décimales pour stabiliser le JSON, mais le verdict repose sur le calcul non arrondi. Inverser color_1 et color_2 échange seulement les deux luminosités individuelles ; l’écart et le verdict restent identiques.
Exploiter le résultat dans un audit automatisé
Chaque requête API coûte $0.002 ; le navigateur utilise le même solveur déterministe, sans réseau, hasard, horodatage ni état caché.
Cas d'intégration
Sécuriser des tests de régression
Comparez des paires établies et détectez toute modification d’une ancienne règle d’acceptation.
Questions techniques
Combien coûte une requête API ?
Chaque requête API coûte $0.002. Le calcul dans le navigateur s’exécute localement avec la même logique déterministe.