• PASS
  • FAIL
  • WARN
  • HUMAN

Auditer vos palettes de design system avec votre IA

Connectez votre palette de couleurs à votre client IA pour effectuer des tests d'accessibilité instantanés. L'IA gère les calculs de ratios de contraste à votre place.

Demandez à l'IA à propos de cette page

Réponse rapide

Comment vérifier l'accessibilité de mes couleurs ?

Votre IA utilise Color Contrast Checker pour tester les combinaisons de couleurs selon les règles WCAG, en tenant compte de la taille et du format du texte. Vous obtiendrez un bilan précis des paires conformes ou non, des codes hexadécimaux aux composants d'interface spécifiques.

Le récapitulatif des résultats.

Les résultats de l'audit

L'IA analyse votre palette et organise les résultats selon ces catégories.

PASS

Paires conformes

L'IA identifie les combinaisons qui respectent les normes WCAG pour le texte normal et le texte large. Vous obtenez une liste de couleurs sûres à utiliser ensemble.

FAIL

Non-conformités

L'IA signale les combinaisons dont le ratio de contraste est insuffisant. Elle précise exactement quelles couleurs posent problème.

WARN

Alertes de cas limites

L'IA souligne les couleurs qui passent pour les grands titres, mais échouent pour le corps de texte plus petit. Cela vous aide à éviter des problèmes d'ergonomie subtils.

HUMAN

Décisions de design

L'IA repère les couleurs proches du seuil de conformité. C'est à vous de décider s'il faut ajuster les couleurs de la marque ou modifier l'épaisseur du texte.

Le flux

Ce que fait l'IA une fois la palette reçue.

L'IA traite vos données brutes en effectuant une série de vérifications mathématiques.

  1. Récupérer les couleurs

    Votre IA lit les codes hexadécimaux ou les tableaux de couleurs fournis dans votre prompt ou votre fichier de design.

    check_color_contrast

  2. Calculer les ratios

    L'IA calcule le contraste pour chaque combinaison premier plan et arrière-plan spécifiée.

    check_color_contrast

  3. Tester les tailles

    L'outil vérifie si les couleurs sont adaptées au texte standard ou aux titres plus larges.

    check_color_contrast

  4. Rapporter les résultats

    L'IA résume les paires conformes et non conformes dans une liste claire pour votre révision.

    check_color_contrast

Essayez

Copiez ces exemples pour commencer.

Utilisez ces prompts pour lancer un audit.

Points de départ

Remplacez le texte entre crochets par vos codes hexadécimaux ou vos chemins de fichiers réels.

colord Connector

Tout est prêt. Choisissez votre client MCP et suivez les instructions de configuration.

Lien du connecteurhttps://edge.vinkius.com/vk_preview_hc2RovnBSudbXvkpfLpH4ef2sc9X9Pt3zfhUEHq9/mcp

Claude Desktop

Suivez les étapes ci-dessous pour vous connecter en quelques secondes.

  1. 1In Claude Desktop, open Settings → Connectors.
  2. 2Click “Add custom connector” and paste the connector link above as the remote MCP server URL.
  3. 3Click Add and start a new chat — colord capabilities are ready to use.
Configuration · claude_desktop_config.jsonCopier
{
  "mcpServers": {
    "color-contrast-checker-alternative-mcp": {
      "url": "https://edge.vinkius.com/vk_preview_hc2RovnBSudbXvkpfLpH4ef2sc9X9Pt3zfhUEHq9/mcp"
    }
  }
}
Copiez dans le chat04

  • Vérifie le contraste pour ces codes hexadécimaux : #FFFFFF et #000000.

  • Audite la palette de ma marque à partir de ce fichier Figma pour la conformité WCAG AA.

  • Teste l'accessibilité de ces couleurs pour du texte large : #333333 et #F5F5F5.

  • Effectue un test de contraste sur mes couleurs de marque principales listées dans ce fichier JSON.

  • Claude
  • ChatGPT
  • Cursor
  • VS Code
  • Windsurf
  • Claude Code
  • JetBrains
  • Cline

Commencez ici

Connectez Color Contrast Checker une fois, puis posez vos questions.

Cliquez simplement pour connecter le MCP à votre client préféré. Vos identifiants restent cryptés et vous pouvez lancer l'audit immédiatement.

Connecter Color Contrast Checker à votre IA

FAQ

Fonctionnement de la tâche

  • 01

    L'IA peut-elle corriger mes couleurs ?

    Non. L'IA identifie les erreurs, mais vous devez choisir manuellement les nouvelles valeurs pour préserver l'identité de votre marque.

  • 02

    Vérifie-t-elle le daltonisme ?

    L'outil se concentre sur les ratios de contraste. Il ne simule pas de types spécifiques de déficiences de la vision des couleurs.

  • 03

    Puis-je envoyer un fichier de design système complet ?

    Oui, si votre client IA peut lire le fichier, l'IA pourra transmettre les données de couleur à l'outil.

  • 04

    L'IA va-t-elle modifier mes fichiers Figma ?

    Non. L'IA lit uniquement les données de couleur pour effectuer le test. Elle ne peut ni écrire ni modifier vos fichiers de design.

  • 05

    Prend-il en charge le RGB ou le HSL ?

    L'outil utilise les codes hexadécimaux, mais votre client IA peut convertir le RGB ou le HSL en hex avant de lancer le test.

  • D'autres questions sur Color Contrast Checker ? La page du connecteur y répond. Voir toutes les capacités du connecteur Color Contrast Checker

Connectez colord à Claude, Cursor, ChatGPT et d'autres