ForHosting KIT · Images

Vérificateur de ratio de contraste WCAG

Sachez si un texte reste lisible sur son fond selon les WCAG : #111827 sur blanc atteint 17.74 pour 1 et réussit AA et AAA, en texte normal comme en grand texte. Un chiffre que vos tickets d’accessibilité peuvent citer. Gratuit dans votre navigateur.

Gratuit
Fonctionne dans votre navigateur
Sans inscription
Vos données restent sur votre appareil

Lancer gratuitement Voir l’API

Utilisez-le depuis WebAPIE-mailTelegramApp bientôt

Exemple résolu

Si vous saisissez

Premier plan: #111827
Arrière-plan: #ffffff

Vous obtenez

Ratio de contraste: 17,74

Ce vérificateur de ratio de contraste WCAG prend deux couleurs hexadécimales — premier plan et arrière-plan — et renvoie le ratio de contraste officiel utilisé par les Web Content Accessibility Guidelines, ainsi que des indicateurs clairs de réussite ou d'échec AA et AAA pour le texte normal et le grand texte. Les concepteurs, développeurs et auditeurs utilisent ce ratio pour décider si le corps de texte, les boutons, les étiquettes et les éléments d'interface restent lisibles pour les personnes malvoyantes ou ayant une perception des couleurs différente. Le moteur suit la formule de luminance relative WCAG 2.x : chaque canal hexadécimal est linéarisé depuis le sRGB, la luminance est pondérée avec les coefficients standard 0,2126, 0,7152 et 0,0722, et le ratio de contraste est (L plus clair plus 0,05) divisé par (L plus foncé plus 0,05). Les seuils ne sont pas arrondis : le texte normal nécessite au moins 4,5 pour AA et 7 pour AAA ; le grand texte nécessite au moins 3 pour AA et 4,5 pour AAA. Les résultats sont déterministes, sans appel réseau, échantillonnage ou raccourci dépendant de la date.

Ce que mesure le ratio de contraste WCAG et ce que contient la réponse

Le ratio de contraste est le nombre unique que le WCAG utilise pour décrire à quel point un texte se détache de son arrière-plan, en tenant compte de la perception humaine de la luminance plutôt que d'une simple distance RVB. Une paire noir pur sur blanc pur atteint vingt et un pour un, le maximum théorique pour des couleurs sRGB opaques, tandis que des couleurs identiques donnent un pour un et échouent à tous les critères de texte.

Le grand texte au sens WCAG signifie au moins dix-huit points normal ou l'équivalent quatorze points gras ; l'outil ne mesure pas lui-même la taille de police — il applique seulement les seuils de grand texte, afin que vous puissiez faire correspondre la matrice à votre échelle typographique.

Il n'y a aucune exploration de page, aucune analyse CSS, aucun mélange d'opacité, et aucun échantillonnage de dégradé : vous fournissez deux couleurs hexadécimales explicites et recevez une matrice reproductible adaptée à l'intégration continue de tokens de design, aux backends de plugins Figma, et aux commentaires de tickets qui doivent citer un ratio numérique plutôt qu'une opinion sur capture d'écran.

Comment les entrées hexadécimales sont lues et comment AA et AAA restent reproductibles

Les deux valeurs doivent être hexadécimales : dièse initial optionnel, soit trois chiffres qui se développent en six (#abc devient #aabbcc), soit six chiffres complets, insensible à la casse. Les suffixes alpha, les fonctions rgb(), les fonctions hsl(), les couleurs CSS nommées, et les entiers nus sont rejetés avec un message nommant le champ et montrant ce qui a été reçu, pour qu'un mauvais jeton ne devienne jamais un échec silencieux.

Chaque couleur est plafonnée à trente-deux caractères, afin de garder la validation économique et de bloquer les accidents de collage. Après l'analyse, les canaux sont linéarisés avec la courbe sRGB par morceaux du WCAG — diviser par 12,92 en dessous du seuil de 0,04045, sinon élever ((c plus 0,055) sur 1,055) à la puissance 2,4 — puis combinés en luminance relative.

Le ratio utilise la luminance la plus claire au numérateur ; les indicateurs de réussite comparent le ratio en virgule flottante non arrondi à 4,5, 7,0 et 3,0, afin qu'un 4,50 affiché ne puisse pas cacher un véritable 4,499 qui devrait échouer à AA.

Où les vérifications de contraste interviennent dans les systèmes de design, les revues d'interface et l'intégration continue

Les équipes produit rencontrent les exigences de contraste lorsqu'une palette de marque paraît élégante sur une diapositive marketing mais échoue pour le corps de texte sur une carte blanche, lorsqu'un thème sombre est généré à partir de tokens clairs, ou lorsque les parties prenantes juridiques et de conformité demandent une preuve AA documentée avant le lancement.

Les ingénieurs intègrent le même contrat dans des vérifications de pull request qui bloquent un changement de token si l'AA du texte normal descend sous 4,5 pour les couleurs de corps principales, ou consignent le statut AAA du grand texte pour les titres héros qui se rapprochent intentionnellement de la surface. Les spécialistes QA et accessibilité utilisent le ratio numérique dans les rapports de bogues, afin que les développeurs puissent corriger la paire exacte plutôt que de deviner à partir d'une capture d'écran.

Les équipes de contenu et de marketing vérifient que les codes hexadécimaux de campagne réussissent toujours une fois placés sur des arrière-plans de site clairs ou sombres. Associez-le aux outils de conversion de couleurs lorsque vous avez besoin d'intermédiaires RVB ou HSL, et aux audits d'accessibilité de page complète lorsque vous devez analyser du balisage en direct plutôt que deux valeurs hexadécimales explicites.

Cas d’usage

Revue de tokens de design et de palette

Vérifiez chaque paire premier plan/arrière-plan d'une palette de marque par rapport à AA et AAA avant de figer les tokens pour les thèmes clair et sombre.

Rapports de bogues d'accessibilité

Joignez un ratio de contraste numérique et la matrice AA/AAA aux tickets, afin que les ingénieurs puissent corriger la paire hexadécimale exacte, et non une vague capture d'écran.

Questions fréquentes

Combien coûte le vérificateur de ratio de contraste WCAG ?

Il est gratuit dans votre navigateur sur cette page.

Quels sont les seuils AA et AAA utilisés ici ?

Texte normal : AA ≥ 4,5 et AAA ≥ 7. Grand texte : AA ≥ 3 et AAA ≥ 4,5. Les indicateurs utilisent le ratio non arrondi ; le ratio affiché est arrondi à deux décimales.

Cet outil analyse-t-il mon site web pour des problèmes de contraste ?

Non. Il ne compare que deux couleurs hexadécimales que vous fournissez. Pour des audits de pages en direct, utilisez un scanner d'accessibilité dédié ; ce point de terminaison répond à la question du ratio WCAG à deux couleurs.

Pourquoi une paire a-t-elle échoué à AA alors qu'elle me paraît correcte ?

La perception humaine varie et la lumière ambiante diffère. Le WCAG utilise la luminance relative sur sRGB linéarisé, et non la vivacité perçue. Fiez-vous au ratio numérique pour les vérifications de conformité, puis ajustez les valeurs hexadécimales jusqu'à ce que la matrice réussisse.

Quels formats de couleur le vérificateur WCAG 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 passe jamais pour conforme.

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

POSThttps://api.kit.forhosting.com/color/contrast

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 \
  -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", {
  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",
    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", 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", 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",
  "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

par requête$0.002

Le prix est publié, sans tokens ni crédits. Une tâche qui échoue n’est pas facturée.

Limites

max_color_chars 32

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 gratuitement dans le navigateur pour vos revues de palette et vos tokens de design, ou appelez l'API à $0.002 par requête réussie lorsque vous avez besoin de la même matrice en intégration continue, dans des systèmes de design, ou des portes d'accessibilité automatisées.

Ce que mesure le ratio de contraste WCAG et ce que contient la réponse

Ce vérificateur normalise chaque hexadécimal d'entrée en une forme canonique en minuscules #rrggbb et un écho rgb(r, g, b), puis renvoie contrast_ratio arrondi à deux décimales pour l'affichage, plus un objet wcag avec des branches normal_text et large_text exposant chacune des champs booléens aa et aaa. L'étiquette de méthode wcag_relative_luminance documente que le chemin est la formule publiée de luminance relative, et non une expérience perceptuelle delta-E ou APCA. Les codes hexadécimaux invalides, les champs manquants, les valeurs non-chaîne, et les chaînes trop longues sont rejetés avec invalid_input et ne sont jamais facturés. Si vous avez besoin d'un audit complet de site, associez ce point de terminaison à un scanner d'accessibilité plus large ; cette page ne répond qu'à la question à deux couleurs, avec un JSON stable pour les humains comme pour les machines.

Comment les entrées hexadécimales sont lues et comment AA et AAA restent reproductibles

Les champs privilégiés sont foreground pour la couleur du texte ou de l'icône et background pour la surface derrière elle, mais les alias fg, color1, text et hex1 pour la première couleur, et bg, color2 et hex2 pour la seconde, sont acceptés, afin que les formulaires, les chaînes de requête et les feuilles de calcul puissent réutiliser le même contrat sans renommer de colonnes. Associez la vérification gratuite dans le navigateur sur cette page à l'API payante lorsque les pipelines de systèmes de design ont besoin du même résultat mathématique sans réimplémenter les calculs de luminance dans chaque langage.

Où les vérifications de contraste interviennent dans les systèmes de design, les revues d'interface et l'intégration continue

Les concepteurs peuvent coller des paires hexadécimales depuis Figma ou un fichier JSON de tokens et lire la matrice AA et AAA avant de valider une échelle de couleurs. Sur cette page, le travail s'exécute entièrement dans votre navigateur ; via l'API, chaque recherche réussie coûte $0.002, la validation échouée n'est pas facturée, et rien n'est conservé après le renvoi de la réponse. Cette séparation — exploration interactive gratuite et API payante identique — correspond au reste du catalogue de niveau A de KIT, et vous permet de passer d'un atelier de palette à un pipeline automatisé sans changer le résultat mathématique.

Cas d'intégration

Portes d'intégration continue pour les couleurs d'interface

Appelez l'API depuis les pull requests pour faire échouer les builds lorsque les paires hexadécimales de corps ou de bouton descendent sous l'AA du texte normal (4,5:1).

Questions techniques

Quels formats de couleur sont acceptés ?

Hexadécimal uniquement : #RGB ou #RRGGBB, avec ou sans le dièse initial, insensible à la casse. rgb(), hsl(), les couleurs nommées et l'hexadécimal alpha sont rejetés avec invalid_input.

Consulter la documentation complète du KIT →

Lancer gratuitement

Exemple résolu

Ce que mesure le ratio de contraste WCAG et ce que contient la réponse

Comment les entrées hexadécimales sont lues et comment AA et AAA restent reproductibles

Où les vérifications de contraste interviennent dans les systèmes de design, les revues d'interface et l'intégration continue

Cas d’usage

Revue de tokens de design et de palette

Rapports de bogues d'accessibilité

Questions fréquentes

Outils associés

Pour les développeurs — accès API

Endpoint

Appeler depuis votre stack

Exemple de requête

Exemple de réponse

Tarifs

Limites

Erreurs

Notes techniques

Ce que mesure le ratio de contraste WCAG et ce que contient la réponse

Comment les entrées hexadécimales sont lues et comment AA et AAA restent reproductibles

Où les vérifications de contraste interviennent dans les systèmes de design, les revues d'interface et l'intégration continue

Cas d'intégration

Portes d'intégration continue pour les couleurs d'interface

Questions techniques

merci