Catégories

← View All Tools

Verificateur de contraste de palette accessible

Controle les combinaisons de couleurs selon WCAG 2.1 AA et AAA avec suggestions dustement

Pratique pour palettes de marque et systemes de design avec recommandations automatiques.

Exemples de résultats

1 Exemples

Auditer une palette de marque pour WCAG AA

Controle toutes les combinaisons premier plan et arriere-plan et indique quelles couleurs doivent etre ajustees

{
  "summary": {
    "colorCount": 4,
    "combinationCount": 12,
    "failingCount": 4
  },
  "recommendations": [
    {
      "pair": "brand-secondary on surface"
    }
  ]
}
Voir paramètres d'entrée
{ "paletteInput": "brand-primary: #2563EB\nbrand-secondary: #F59E0B\nsurface: #FFFFFF\ntext: #111827", "minimumTarget": "aa", "includeSelfPairs": false }

Points clés

Catégorie
Design
Types d’entrée
textarea, select, checkbox
Type de sortie
json
Couverture des échantillons
4
API disponible
Yes

Vue d’ensemble

Le Vérificateur de contraste de palette accessible est un outil essentiel pour les designers et développeurs souhaitant garantir la conformité de leurs interfaces aux normes WCAG 2.1. En saisissant simplement les couleurs de votre marque ou de votre système de design, cet outil analyse automatiquement toutes les combinaisons possibles de premier plan et d'arrière-plan. Il identifie instantanément les paires qui ne respectent pas les critères AA ou AAA et fournit des recommandations d'ajustement pour améliorer l'accessibilité de vos projets web.

Quand l’utiliser

  • •Lors de la création ou de la mise à jour d'un système de design (Design System) pour valider l'accessibilité des couleurs de base.
  • •Avant le lancement d'un site web ou d'une application pour s'assurer que le texte est lisible pour tous les utilisateurs.
  • •Lors d'un audit d'accessibilité (WCAG) pour générer rapidement un rapport sur les contrastes d'une charte graphique existante.

Comment ça marche

  • •Saisissez les couleurs de votre palette dans le champ texte, en utilisant le format 'nom: #codeHexa' (par exemple, 'surface: #FFFFFF').
  • •Sélectionnez votre objectif de conformité WCAG (AA, AAA, texte normal ou grand texte) dans le menu déroulant.
  • •Cochez l'option pour inclure les paires identiques si vous souhaitez tester absolument toutes les combinaisons.
  • •L'outil génère un rapport JSON détaillant les combinaisons valides, les échecs de contraste et des recommandations d'ajustement.

Cas d’usage

Audit complet des couleurs d'une charte graphique d'entreprise pour la conformité légale en matière d'accessibilité numérique.
Intégration des vérifications de contraste lors de la définition des variables CSS d'un nouveau thème d'interface utilisateur (UI).
Génération de rapports de conformité WCAG pour les clients d'une agence web lors de la phase de conception visuelle.

Exemples

1. Audit d'une palette de marque pour WCAG AA

UI Designer
Contexte
Un designer crée un nouveau thème pour une application bancaire et doit s'assurer que les couleurs de la marque sont lisibles.
Problème
Vérifier manuellement chaque combinaison de couleurs de la charte graphique prend trop de temps et risque d'entraîner des oublis.
Comment l’utiliser
Collez la liste des couleurs dans le champ 'Couleurs de la palette' et sélectionnez l'objectif 'AA Normal Text (4.5:1)'.
Configuration d’exemple
brand-primary: #2563EB
brand-secondary: #F59E0B
surface: #FFFFFF
text: #111827
Résultat
L'outil génère un rapport JSON indiquant 12 combinaisons testées, dont 4 échecs, et recommande d'ajuster la couleur 'brand-secondary' sur le fond 'surface'.

2. Validation stricte pour l'accessibilité gouvernementale (AAA)

Expert en accessibilité
Contexte
Un site gouvernemental doit respecter le niveau d'accessibilité le plus strict (WCAG AAA) pour tous ses contenus textuels.
Problème
S'assurer que le texte principal et les liens offrent un contraste d'au moins 7:1 sur les fonds clairs et sombres.
Comment l’utiliser
Saisissez les couleurs du site, choisissez 'AAA Normal Text (7:1)' comme objectif et lancez l'analyse.
Configuration d’exemple
fond-clair: #F8FAFC
fond-sombre: #0F172A
texte-principal: #334155
lien: #1D4ED8
Résultat
Le rapport révèle que le texte principal sur fond clair n'atteint pas le ratio de 7:1, permettant à l'expert d'assombrir la couleur avant la mise en production.

Tester avec des échantillons

design
Exemples de codes couleur
Collection de codes de couleur dans différents formats (Hex, RGB, HSL, couleurs nommées) pour les tests de validation
title token color
sample
Exemples Storybook
Exemples complets de Storybook pour le développement de composants, le testing, la documentation et la gestion des systèmes de design
keywords design,system
sample
Échantillons d'Analyseur de Chemin
Collection complète de chemins de système de fichiers de Windows, Linux et macOS pour l'analyse et les tests de chemins
task analyze
sample
Exemples SVG
Exemples de graphiques vectoriels évolutifs (SVG) démontrant diverses fonctionnalités et techniques SVG
keywords design
sample

Hubs associés

Outils Design pour Convert
Découvrez 98 outils design pour des workflows de convert et comparez rapidement des utilitaires proches.
Outils Design pour Generate
Découvrez 19 outils design pour des workflows de generate et comparez rapidement des utilitaires proches.
Outils Validation pour Validate
Découvrez 16 outils validation pour des workflows de validate et comparez rapidement des utilitaires proches.

FAQ

Qu'est-ce que la norme WCAG 2.1 pour le contraste ?

Les règles WCAG 2.1 exigent un ratio de contraste minimum de 4.5:1 pour le texte normal (niveau AA) et de 7:1 pour le niveau AAA, afin de garantir une lisibilité optimale.

Comment dois-je formater ma liste de couleurs ?

Entrez une couleur par ligne avec son nom suivi de son code hexadécimal, par exemple : 'primaire: #2563EB'.

Quelle est la différence entre le texte normal et le grand texte ?

Le grand texte (généralement 18pt ou 14pt en gras) nécessite un ratio de contraste moins strict (3:1 pour AA) que le texte normal (4.5:1 pour AA).

L'outil propose-t-il des solutions pour les couleurs non conformes ?

Oui, le rapport JSON généré inclut des recommandations d'ajustement pour les combinaisons qui échouent aux tests de contraste.

Puis-je tester les couleurs d'arrière-plan avec elles-mêmes ?

Oui, en cochant l'option 'Inclure les paires identiques', l'outil testera chaque couleur contre elle-même (ce qui donnera un ratio de 1:1).

Documentation de l'API

Point de terminaison de la requête

POST /fr/api/tools/accessible-color-palette-contrast-checker

Paramètres de la requête

Nom du paramètre Type Requis Description
paletteInput textarea Oui -
minimumTarget select Non -
includeSelfPairs checkbox Non -

Format de réponse

{
  "key": {...},
  "metadata": {
    "key": "value"
  },
  "error": "Error message (optional)",
  "message": "Notification message (optional)"
}
Données JSON: Données JSON

Documentation de MCP

Ajoutez cet outil à votre configuration de serveur MCP: 

{
  "mcpServers": {
    "elysiatools-accessible-color-palette-contrast-checker": {
      "name": "accessible-color-palette-contrast-checker",
      "description": "Controle les combinaisons de couleurs selon WCAG 2.1 AA et AAA avec suggestions dustement",
      "baseUrl": "https://elysiatools.com/mcp/sse?toolId=accessible-color-palette-contrast-checker",
      "command": "",
      "args": [],
      "env": {},
      "isActive": true,
      "type": "sse"
    }
  }
}

Vous pouvez chaîner plusieurs outils, par ex.: `https://elysiatools.com/mcp/sse?toolId=png-to-webp,jpg-to-webp,gif-to-webp`, max 20 outils.

Si vous rencontrez des problèmes, veuillez nous contacter à [email protected]