ForHosting KIT · Vérification et validation

Vérifier le contraste des couleurs

Deux couleurs peuvent sembler lisibles sur un écran tout en restant sous le contraste nécessaire à un texte accessible. Saisissez le premier plan et l’arrière-plan pour connaître leur rapport exact et les verdicts WCAG selon la taille du texte.

● BetaGratuit · dans votre navigateur

Lancer gratuitement Voir l’API

Utilisez-le depuis WebAPIE-mailApp bientôtTelegram bientôt

Remplacer une impression visuelle par une mesure

La luminosité de l’écran, la graisse de la police, l’éclairage de la pièce et les teintes voisines modifient la perception d’une même paire. Une validation à l’œil dépend donc trop du poste de la personne qui regarde. Le vérificateur convertit les deux couleurs en sRGB, calcule leur luminance relative puis applique la formule de contraste WCAG entre la valeur la plus claire et la plus sombre. Vous obtenez un rapport numérique et quatre verdicts distincts : AA et AAA pour le texte courant, puis AA et AAA pour le grand texte. Un titre peut ainsi réussir là où un paragraphe plus petit échoue.

Des notations prêtes à coller depuis vos outils

Vous pouvez saisir un HEX de trois ou six chiffres, une fonction rgb() avec trois canaux, ou une couleur hsl() dont la saturation et la luminosité sont exprimées en pourcentage. La réponse normalise chaque valeur en HEX sur six chiffres et en RVB, ce qui facilite la comparaison entre une variable CSS, un jeton de design et une maquette. Le canal alpha est volontairement refusé : une couleur translucide ne possède pas de contraste propre sans connaître toutes les couches situées dessous. Composez-la d’abord sur son fond définitif, puis contrôlez les deux couleurs opaques réellement affichées.

Lire la matrice sans lui faire dire davantage

Un verdict favorable décrit uniquement cette paire de couleurs unies. Il ne vérifie ni la taille et la graisse réelles de la police, ni les dégradés, les images, les états de survol, le focus au clavier ou la structure accessible de la page. Contrôlez séparément chaque état significatif d’un composant dès que sa couleur change. Sur cette page, le calcul reste dans votre navigateur et convient à une revue rapide de charte. Pour surveiller des jetons dans une chaîne d’intégration, envoyez les mêmes deux champs à l’API : elle renvoie exactement le même objet structuré, prêt à être comparé à votre règle de qualité.

Cas d’usage

Relecture d’une charte graphique

Vérifiez les couples texte et surface avant diffusion, avec une décision propre au corps de texte et aux grands titres.

Contrôle des états d’un composant

Testez l’état normal, sélectionné, en erreur et au survol sans dépendre du rendu d’un seul écran.

Règle automatique avant mise en ligne

Appelez l’API depuis l’intégration continue pour refuser une paire sous le seuil WCAG exigé par votre produit.

Questions fréquentes

Quelles notations de couleur sont acceptées ?

Le HEX sur trois ou six chiffres, rgb() avec trois canaux et hsl() avec saturation et luminosité en pourcentage. Les couleurs nommées et l’alpha sont refusés.

Que représentent AA et AAA dans la réponse ?

Ce sont des niveaux de conformité WCAG. Ils sont indiqués séparément pour le texte courant et le grand texte, car le contraste requis diffère.

Le vérificateur de contraste est-il gratuit ?

L’outil de cette page fonctionne gratuitement dans votre navigateur, sur ordinateur ou mobile. L’API coûte $0.002 par requête réussie et utilise votre solde KIT prépayé.

L’application mobile native exécute-t-elle l’outil gratuit ?

Non. L’application native appelle l’API et affiche le prix de cette tâche. Ouvrez cette page dans le navigateur mobile pour utiliser le calcul local.

Ce résultat prouve-t-il que toute ma page respecte WCAG ?

Non. Il vérifie une seule paire opaque. Un audit complet couvre aussi la typographie, le clavier, les libellés, les images, les états et les autres critères.

Pourquoi les couleurs transparentes sont-elles refusées ?

Leur teinte visible dépend des couches inférieures. Composez d’abord la transparence sur le fond final, puis contrôlez la paire opaque obtenue.

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/verify/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/verify/color-contrast \
  -H "Authorization: Bearer $KIT_KEY" \
  -H "Content-Type: application/json" \
  -d &#39;{"items":["valor-1","valor-2"]}'

const res = await fetch("https://api.kit.forhosting.com/verify/color-contrast", {
  method: "POST",
  headers: {
    "Authorization": `Bearer ${process.env.KIT_KEY}`,
    "Content-Type": "application/json"
  },
  body: JSON.stringify({
    "items": [
      "valor-1",
      "valor-2"
    ]
  })
});
const { task_id } = await res.json();

import os, requests

res = requests.post(
    "https://api.kit.forhosting.com/verify/color-contrast",
    headers={"Authorization": f"Bearer {os.environ[&#39;KIT_KEY']}"},
    json={
    "items": [
        "valor-1",
        "valor-2"
    ]
},
)
task_id = res.json()["task_id"]

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

body := bytes.NewBufferString(`{"items":["valor-1","valor-2"]}`)
req, _ := http.NewRequest("POST", "https://api.kit.forhosting.com/verify/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

{
  "items": [
    "valor-1",
    "valor-2"
  ]
}

Exemple de réponse

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

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 →

Lancer gratuitement