ForHosting KIT · Veille et lecture de sites web

Vérifier le contraste des couleurs

Ce vérificateur compare une couleur de premier plan à une couleur d’arrière-plan selon la formule de luminance relative des WCAG.

● BetaGratuit · dans votre navigateur

Lancer gratuitement Voir l’API

Utilisez-le depuis WebAPIE-mailTelegramApp bientôt

Saisissez des couleurs hexadécimales à trois ou six chiffres pour obtenir le rapport de contraste et un verdict clair pour les niveaux AA et AAA, en texte courant comme en grand texte. Vous pouvez ainsi contrôler des composants, consigner vos décisions d’accessibilité et repérer les associations illisibles avant leur publication.

Interprétez correctement le résultat

Le rapport renvoyé mesure l’écart de luminance relative entre la couleur la plus claire et la plus sombre. Un résultat de 1:1 correspond à des luminances identiques, tandis que 21:1 est le maximum, obtenu avec le noir et le blanc. Les WCAG fixent plusieurs seuils, car un texte grand ou épais reste lisible avec un contraste moindre. Le niveau AA demande 4.5:1 pour le texte courant et 3:1 pour le grand texte ; le niveau AAA demande 7:1 et 4.5:1. Chaque critère est évalué séparément. Est considéré comme grand un texte d’au moins 18 points, ou 14 points en gras. Pour statuer sur la conformité, ne forcez aucun arrondi : l’affichage comporte deux décimales, mais les verdicts reposent sur la valeur complète.

Choisissez les couleurs réellement affichées

Testez ce que la personne voit, et non deux échantillons simplement voisins dans une palette. Pour un paragraphe, le premier plan est la couleur rendue du texte et l’arrière-plan est la couleur unie finale placée derrière. Contrôlez aussi les liens dans leurs états normal, visité, survolé, ciblé et désactivé lorsqu’ils transmettent encore une information. Pensez aux boutons, badges, alertes, formulaires, graphiques et menus. Cet outil accepte les couleurs opaques #RGB et #RRGGBB. En présence de transparence, dégradé, image, ombre ou fusion, déterminez d’abord les couleurs rendues au point étudié. Sur un fond variable, retenez la zone au contraste minimal. La visibilité du focus, le contraste non textuel et les alternatives à la couleur seule restent à examiner séparément.

Intégrez le contrôle dans votre méthode

Vérifiez le contraste dès la conception, lorsque modifier un jeton ou un composant reste peu coûteux, puis recommencez après chaque changement de thème ou de couleurs de marque. Les designers peuvent comparer les variantes avant livraison ; les développeurs peuvent appeler le même calcul déterministe dans les tests et conserver les indicateurs avec les captures du composant. Un audit sérieux confronte chaque couleur sémantique de premier plan à tous les fonds autorisés, pas uniquement à une composition de démonstration. Notez la taille et la graisse prévues : une paire conforme pour un grand texte peut échouer sur un libellé courant. L’API coûte $0.002 par requête et l’exécuteur du navigateur convient aux contrôles ponctuels. Toute couleur mal formée est refusée afin de révéler les erreurs avant leur arrivée dans un rapport.

Cas d’usage

Contrôler une livraison graphique

Confirmez avant l’intégration que les couleurs proposées pour le texte et les surfaces respectent le niveau WCAG visé.

Auditer les jetons de conception

Testez chaque jeton sémantique de premier plan sur tous les arrière-plans permis par le système de composants.

Sécuriser une mise en production

Appelez le vérificateur déterministe dans les tests et bloquez toute modification qui abaisse un contraste requis.

Questions fréquentes

Quels formats de couleur sont acceptés ?

Utilisez la notation hexadécimale opaque #RGB ou #RRGGBB. Les noms CSS, canaux alpha, fonctions rgb(), dégradés et valeurs incorrectes sont refusés.

Quels sont les seuils WCAG AA ?

Le niveau AA exige au moins 4.5:1 pour le texte courant et 3:1 pour le grand texte.

Quels sont les seuils WCAG AAA ?

Le niveau AAA exige au moins 7:1 pour le texte courant et 4.5:1 pour le grand texte.

Pourquoi un rapport affiché au seuil peut-il échouer ?

L’affichage est limité à deux décimales, mais le verdict conserve toute la précision et ne relève pas une valeur insuffisante.

L’inversion des couleurs modifie-t-elle le rapport ?

Non. La formule compare les luminances claire et sombre ; inverser deux couleurs opaques conserve donc le rapport et les verdicts.

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/web/color-contrast-check

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/web/color-contrast-check \
  -H "Authorization: Bearer $KIT_KEY" \
  -H "Content-Type: application/json" \
  -d '{"foreground":"#1a1a1a","background":"#ffffff"}'

const res = await fetch("https://api.kit.forhosting.com/web/color-contrast-check", {
  method: "POST",
  headers: {
    "Authorization": `Bearer ${process.env.KIT_KEY}`,
    "Content-Type": "application/json"
  },
  body: JSON.stringify({
    "foreground": "#1a1a1a",
    "background": "#ffffff"
  })
});
const { task_id } = await res.json();

import os, requests

res = requests.post(
    "https://api.kit.forhosting.com/web/color-contrast-check",
    headers={"Authorization": f"Bearer {os.environ['KIT_KEY']}"},
    json={
    "foreground": "#1a1a1a",
    "background": "#ffffff"
},
)
task_id = res.json()["task_id"]

<?php
$res = file_get_contents("https://api.kit.forhosting.com/web/color-contrast-check", false, stream_context_create([
  "http" => [
    "method"  => "POST",
    "header"  => "Authorization: Bearer " . getenv("KIT_KEY") . "\r\nContent-Type: application/json",
    "content" => '{"foreground":"#1a1a1a","background":"#ffffff"}',
  ],
]));
$task = json_decode($res, true);

body := bytes.NewBufferString(`{"foreground":"#1a1a1a","background":"#ffffff"}`)
req, _ := http.NewRequest("POST", "https://api.kit.forhosting.com/web/color-contrast-check", 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": "#1a1a1a",
  "background": "#ffffff"
}

Exemple de réponse

{
  "task_id": "tsk_a1b2c3d4e5f6a1b2c3d4e5f6",
  "type": "web.color_contrast_check",
  "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

`timeout_sec`	30
`max_crawl_pages`	25

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.

Consulter la documentation complète du KIT →