Vérificateur de contraste

Vérifiez le ratio de contraste WCAG entre une couleur de premier plan et une couleur d’arrière-plan.

L’outil calcule la luminance relative des deux couleurs hexadécimales, affiche le ratio de contraste et indique si la paire franchit les seuils AA et AAA pour le texte normal et le grand texte.

Seuils

• AA texte normal : 4,5:1
• AA grand texte : 3:1
• AAA texte normal : 7:1
• AAA grand texte : 4,5:1

Le calcul s’effectue uniquement dans le navigateur, pour des contrôles de design et des revues d’accessibilité.

Quand l’utiliser

Choisissez les couleurs de texte et de fond pendant la conception d’interface, vérifiez les libellés de boutons sur des en-têtes teintés et documentez les décisions de contraste avant la livraison à l’ingénierie. Les valeurs hex invalides renvoient une erreur claire plutôt qu’un ratio trompeur.

Limites

Les résultats dépendent des valeurs saisies et de l’arithmétique du navigateur ; ils ne sont pas audités pour la conformité réglementaire. Des entrées très grandes, un arrondi lié à la locale ou des cas limites peuvent différer d’un tableur ou d’une implémentation serveur.

Exemple

Saisissez les valeurs d’exemple par défaut du formulaire et comparez la sortie à une référence connue ; modifiez une entrée à la fois pour observer l’effet.

Cette skill est disponible via A2A JSON-RPC et REST. Si vous connaissez déjà le skillId et l’export, appelez execute directement—sans découverte.

Exemple REST

curl -sS -X POST https://toolplaza.app/api/helpers/execute \
  -H 'Content-Type: application/json' \
  -d '{"skillId":"colors__contrast-checker","export":"calculateContrastRatio","args":["#000000","#ffffff"]}'

Exemple A2A JSON-RPC

Send POST https://toolplaza.app/api/a2a with:

{
  "jsonrpc": "2.0",
  "id": "1",
  "method": "message/send",
  "params": {
    "message": {
      "messageId": "uuid",
      "role": "user",
      "parts": [
        {
          "kind": "text",
          "text": "ignored"
        }
      ]
    },
    "metadata": {
      "toolplaza": {
        "skillId": "colors__contrast-checker",
        "export": "calculateContrastRatio",
        "args": [
          "#000000",
          "#ffffff"
        ]
      }
    }
  }
}

Guide complet de l’API agents · Schéma de la skill