Note lettre du ratio de contraste
Transformez le contraste d’une paire de couleurs en une lettre à glisser dans une revue : #111827 sur blanc atteint 17.74 pour 1 et obtient un A, car la note A commence à 12 pour 1. Les notes vont de A à E, puis échec. Gratuit dans votre navigateur.
- Gratuit
- Fonctionne dans votre navigateur
- Sans inscription
- Vos données restent sur votre appareil
Lancer gratuitement
Exemple résolu
- Premier plan
- #111827
- Arrière-plan
- #ffffff
- Rapport de contraste
- 17,74
- Note
- A
- Libellé du niveau
- Excellent
- Seuil minimal
- 12
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. 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.
Ce qu'une note lettre de contraste signifie et ce que la réponse contient
Une note lettre de contraste comprime le ratio WCAG continu en une étiquette ordinale courte que les parties prenantes peuvent lire sans mémoriser les tableaux de seuils. La note A signifie que la paire atteint au moins douze pour un —largement au-dessus de AAA pour le texte normal et proche du plafond pratique des paires sRGB lisibles, hors noir pur sur blanc pur—. La note B signifie au moins sept pour un, le seuil AAA du texte normal.
La note C signifie au moins quatre virgule cinq pour un, le seuil AA familier du corps de texte. La note D signifie au moins trois pour un, ce qui passe encore l'AA pour le grand texte mais reste trop faible pour une petite typographie de corps selon les mêmes lignes directrices. La note E signifie au moins deux pour un : un écart de luminance subsiste, mais la paire échoue à tous les critères WCAG de contraste de texte.
La note fail signifie un ratio inférieur à deux pour un —y compris des couleurs identiques à un pour un—, donc la paire ne doit pas servir pour un texte ou une icône utiles sur cette surface. Il n'y a ni crawl de page, ni mélange d'opacité, ni échantillonnage de dégradés : vous fournissez deux hex explicites et recevez une note reproductible adaptée aux tickets, aux tokens de design et aux garde-fous automatisés.
Contrat d'entrée, analyse hex et logique de bandes reproductible
Les deux valeurs doivent être en hex : dièse optionnel, trois chiffres qui s'étendent à six (#abc devient #aabbcc) ou six chiffres complets, sans distinction de casse. Les suffixes alpha, les fonctions rgb(), hsl(), les couleurs CSS nommées et les entiers nus sont rejetés avec un message qui nomme le champ et montre ce qui a été reçu. Chaque couleur est plafonnée à trente-deux caractères pour une validation légère et pour bloquer le collage accidentel de longs extraits CSS.
Après analyse, les canaux sont linéarisés avec la courbe sRGB par morceaux de WCAG —diviser par 12.92 sous le seuil 0.04045, sinon élever ((c plus 0.055) sur 1.055) à la puissance 2.4— puis combinés en luminance relative. La note est choisie à partir du ratio flottant non arrondi, de sorte qu'un 6.99 affiché ne puisse pas revendiquer la bande B si le vrai ratio reste sous sept.
Où les notes lettres s'intègrent dans les design systems, revues et CI
Les équipes produit ont souvent besoin d'un score d'un caractère pour les tableaux de bord et les listes de revue de design lorsqu'une matrice AA/AAA complète est trop large pour une colonne de tableur ou un badge d'état. Les ingénieurs branchent le même contrat sur des contrôles de pull request qui bloquent un changement de token si le texte principal du corps tombe sous la note C, ou qui avertissent lorsque de grands titres descendent en D.
Les spécialistes QA et accessibilité joignent la note plus le ratio numérique aux rapports de bug pour corriger la paire exacte plutôt que de deviner depuis une capture. Les équipes contenu et marketing vérifient que les hex de campagne obtiennent encore au moins C sur fonds clairs ou sombres du site. Associez-le à un contrôleur complet de matrice AA/AAA lorsque vous avez besoin de drapeaux booléens de conformité, et à des utilitaires de conversion de couleur lorsque vous devez dériver des hex depuis RGB ou HSL avant de noter.
Cas d’usage
Tableaux de score des tokens de design
Notez d'une seule lettre chaque paire premier plan/arrière-plan d'une palette de marque pour thèmes clairs et sombres avant de figer les tokens.
Questions fréquentes
Combien coûte l'outil de note lettre du ratio de contraste ?
Il est gratuit dans votre navigateur sur cette page.
Comment les notes lettres sont-elles mappées à partir du ratio de contraste ?
A ≥ 12, B ≥ 7 (AAA normal), C ≥ 4.5 (AA normal), D ≥ 3 (AA grand), E ≥ 2, fail sous 2. Les bandes utilisent le ratio WCAG non arrondi ; le ratio affiché est arrondi à deux décimales.
En quoi cela diffère-t-il d'un contrôleur de contraste WCAG AA/AAA ?
Un contrôleur AA/AAA renvoie des booléens réussi/échoué pour texte normal et grand. Cet outil mappe le même ratio WCAG sur une échelle de lettres A–E/fail pour tableaux de score et badges.
Cet outil analyse-t-il mon site pour des problèmes de contraste ?
Non. Il ne note que deux couleurs hex que vous fournissez. Pour des audits de pages en direct, utilisez un scanner d'accessibilité dédié ; ce point d'accès répond à la question de la note lettre sur deux couleurs.
Quels formats de couleur l’outil de note de contraste accepte-t-il ?
Uniquement les couleurs hexadécimales à trois ou six chiffres, avec ou sans dièse initial, en majuscules ou minuscules. Les noms de couleur, les notations RGB ou HSL et la transparence sont refusés : une valeur erronée ne reçoit jamais de note.
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/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. |
Notes techniques
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.
Ce qu'une note lettre de contraste signifie et ce que la réponse contient
La réponse renvoie chaque couleur en hex #rrggbb minuscule normalisé et en chaîne rgb(r, g, b), rapporte contrast_ratio arrondi à deux décimales, renvoie les chaînes grade et grade_label, expose band_min comme plancher numérique de la bande gagnante, et marque method comme wcag_contrast_letter_grade pour que les routeurs distinguent cette page d'un simple contrôleur AA/AAA. Hex invalide, champs manquants, valeurs non chaînes et chaînes trop longues lèvent invalid_input et ne sont jamais facturés.
Contrat d'entrée, analyse hex et logique de bandes reproductible
Envoyez un objet JSON avec foreground pour la couleur du texte ou de l'icône et background pour la surface derrière. Les alias fg, color1, text et hex1 mappent vers la première couleur ; bg, color2 et hex2 vers la seconde, afin que formulaires et tableurs gardent leurs noms de colonnes. Les bandes sont des constantes fixes dans le code ; aucun interrupteur de configuration ne change l'échelle par requête, ce qui garde goldens, assertions CI et grilles de notation stables bit à bit.
Où les notes lettres s'intègrent dans les design systems, revues et CI
Les designers collent des paires hex depuis Figma ou un JSON de tokens et lisent de A à fail avant de figer une échelle pour thèmes clairs et sombres. Sur cette page le travail s'exécute entièrement dans votre navigateur ; via l'API chaque consultation réussie coûte $0.002, une validation en échec n'est pas facturée, et rien n'est stocké après la réponse. Cette séparation —exploration interactive gratuite et API payante identique— rejoint le catalogue tier A du KIT.
Cas d'intégration
Badges de contraste sur les pull requests
Appelez l'API depuis la CI pour faire échouer les builds lorsque les paires hex du corps principal tombent sous la note C (bande AA texte normal).
Synthèses de revue d'accessibilité
Joignez grade, grade_label et contrast_ratio aux tickets pour que relecteurs et ingénieurs partagent une note courte plus le ratio numérique.
Questions techniques
Quels formats de couleur sont acceptés ?
Hex uniquement : #RGB ou #RRGGBB, avec ou sans dièse initial, sans distinction de casse. rgb(), hsl(), couleurs nommées et hex alpha sont rejetés avec invalid_input.