Note lettre du ratio de contraste
Cet outil de note lettre du ratio de contraste prend deux couleurs hexadécimales —premier plan et arrière-plan—, calcule le ratio de contraste officiel WCAG 2.x et le place sur une échelle fixe de lettres de A à E jusqu'à fail.
Lancer gratuitement
Les designers, développeurs et relecteurs d'accessibilité veulent souvent une seule lettre pour une revue de design, une feuille de tokens ou le résumé d'une pull request, pas seulement le ratio brut et les booléens AA/AAA. Le moteur suit la luminance relative : chaque canal sRGB est linéarisé, la luminance est pondérée avec les coefficients 0.2126, 0.7152 et 0.0722, et le ratio vaut (plus clair plus 0.05) sur (plus sombre plus 0.05). Les bandes sont déterministes : A commence à douze pour un, B à sept (AAA texte normal), C à quatre virgule cinq (AA texte normal), D à trois (AA grand texte), E à deux, et tout plus faible est fail. Les résultats ne dépendent ni du réseau, ni d'un tirage aléatoire, ni de l'horloge. Utilisez le parcours gratuit du navigateur pour les ateliers de palette et les tokens, ou l'API à $0.002 par requête réussie lorsque la CI et les design systems ont besoin de la même matrice de notes à chaque fois.
Comment l’utiliser
Saisissez vos données dans le formulaire ci-dessus. L’outil les vérifie avant le calcul et affiche le résultat sur la même page.
Vérifiez vos données
Suivez les libellés et les unités de chaque champ. Si une valeur manque ou sort de la plage autorisée, la page indique quoi corriger.
Relancez le calcul ou automatisez-le
Utilisez l’outil web pour les vérifications ponctuelles et l’API pour intégrer la même capacité à un flux automatisé.
Cas d’usage
Obtenez une réponse maintenant
Saisissez un jeu de valeurs et consultez le résultat sans créer de feuille de calcul ni de script.
Comparez des scénarios
Modifiez une valeur à la fois et relancez le calcul pour voir ce qui influence le résultat.
Automatisez les tâches répétées
Utilisez l’API lorsque le même calcul doit s’exécuter dans votre produit ou votre flux.
Questions fréquentes
Comment utiliser cette capacité ?
Remplissez les champs ci-dessus et lancez-la sur cette page. Le formulaire signale les données à corriger.
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/contrast-grade \
-H "Authorization: Bearer $KIT_KEY" \
-H "Content-Type: application/json" \
-d '{"foreground":"#111827","background":"#ffffff"}'const res = await fetch("https://api.kit.forhosting.com/color/contrast-grade", {
method: "POST",
headers: {
"Authorization": `Bearer ${process.env.KIT_KEY}`,
"Content-Type": "application/json"
},
body: JSON.stringify({
"foreground": "#111827",
"background": "#ffffff"
})
});
const { task_id } = await res.json();import os, requests
res = requests.post(
"https://api.kit.forhosting.com/color/contrast-grade",
headers={"Authorization": f"Bearer {os.environ['KIT_KEY']}"},
json={
"foreground": "#111827",
"background": "#ffffff"
},
)
task_id = res.json()["task_id"]<?php
$res = file_get_contents("https://api.kit.forhosting.com/color/contrast-grade", false, stream_context_create([
"http" => [
"method" => "POST",
"header" => "Authorization: Bearer " . getenv("KIT_KEY") . "\r\nContent-Type: application/json",
"content" => '{"foreground":"#111827","background":"#ffffff"}',
],
]));
$task = json_decode($res, true);body := bytes.NewBufferString(`{"foreground":"#111827","background":"#ffffff"}`)
req, _ := http.NewRequest("POST", "https://api.kit.forhosting.com/color/contrast-grade", 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
{
"foreground": "#111827",
"background": "#ffffff"
}Exemple de réponse
{
"task_id": "tsk_a1b2c3d4e5f6a1b2c3d4e5f6",
"type": "color.contrast_grade",
"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. |