Vérifier le Contraste de Couleur (WCAG)

Vérifiez le rapport de contraste entre deux couleurs selon les normes WCAG 2.1 avec aperçu en direct et résultats AA/AAA.

Le vérificateur de contraste de couleur WCAG analyse le rapport de contraste entre les couleurs de premier plan et d'arrière-plan selon les critères WCAG 2.1. Entrez vos couleurs au format hexadécimal, obtenez le rapport de contraste instantanément, vérifiez la conformité aux niveaux AA et AAA pour le texte normal et grand, prévisualisez le résultat en direct et échangez les couleurs en un clic. Fonctionne entièrement dans votre navigateur sans envoi de données.

Loading...
Vos données restent dans votre navigateur
Cet outil vous a-t-il été utile ?
Tutoriel

Comment utiliser

1
1

Sélectionnez vos couleurs

Entrez les couleurs de premier plan et d'arrière-plan au format hexadécimal ou utilisez les sélecteurs de couleur intégrés.

2
2

Consultez le rapport de contraste

Le rapport de contraste est calculé automatiquement et affiché avec les résultats de conformité AA et AAA.

3
3

Échangez ou ajustez les couleurs

Utilisez le bouton Échanger pour inverser les couleurs ou modifiez-les jusqu'à atteindre le niveau de conformité souhaité.

Guide

Guide complet du contraste de couleur WCAG

Comprendre le rapport de contraste

Le rapport de contraste mesure la différence de luminosité entre deux couleurs sur une échelle de 1:1 à 21:1. Un rapport élevé indique un meilleur contraste. Les normes WCAG 2.1 définissent des seuils minimaux pour garantir que le texte reste lisible par tous les utilisateurs; y compris ceux souffrant de déficiences visuelles ou utilisant des écrans en pleine lumière.

Niveaux de conformité AA et AAA

Le niveau AA est le standard minimum recommandé; il exige un rapport de 4.5:1 pour le texte normal et 3:1 pour le texte grand. Le niveau AAA offre une accessibilité optimale avec un rapport de 7:1 pour le texte normal et 4.5:1 pour le texte grand. Visez le niveau AAA pour les contenus critiques et les interfaces médicales.

Couleur et daltonisme

Environ 8% des hommes présentent une forme de daltonisme. Le contraste de luminosité reste perceptible même quand les couleurs ne sont pas distinguées. Vérifiez vos combinaisons non seulement pour le rapport de contraste; mais aussi pour leur lisibilité en simulant différentes formes de daltonisme avec des outils complémentaires.

Bonnes pratiques de design accessible

Ne comptez jamais uniquement sur la couleur pour transmettre une information; ajoutez des icônes ou du texte. Testez vos couleurs sur différents écrans et conditions de luminosité. Documentez votre palette de couleurs avec les rapports de contraste validés. Intégrez la vérification du contraste dans votre processus de design dès le début.

Examples

Exemples Résolus

Exemple : Texte noir sur fond blanc

Objectif : Vérifier le contraste entre un texte noir (#000000) et un fond blanc (#FFFFFF).

1

Étape 1 : Entrez #000000 comme couleur de premier plan.

2

Étape 2 : Entrez #FFFFFF comme couleur d'arrière-plan.

3

Étape 3 : Consultez le rapport de contraste affiché.

Résultat : Le rapport de contraste est 21:1; conforme aux niveaux AA et AAA pour le texte normal et grand.

Exemple : Texte gris sur fond clair

Objectif : Vérifier si un texte gris (#767676) sur fond blanc (#FFFFFF) est conforme.

1

Étape 1 : Entrez #767676 comme couleur de premier plan.

2

Étape 2 : Entrez #FFFFFF comme couleur d'arrière-plan.

3

Étape 3 : Vérifiez les indicateurs de conformité AA et AAA.

Résultat : Le rapport est 4.54:1; conforme AA pour le texte normal mais échoue AAA. Assombrissez le gris pour améliorer.

Cas d'utilisation

Cas d'utilisation

Validation de la palette d'un site web

Lors de la conception d'un site web, vérifiez que chaque combinaison de texte et d'arrière-plan respecte les normes WCAG 2.1 AA. Testez les couleurs principales, secondaires et d'accentuation pour garantir que tous les utilisateurs puissent lire le contenu confortablement.

Conformité WCAG pour applications mobiles

Les applications mobiles doivent respecter les mêmes critères d'accessibilité que les sites web. Utilisez cet outil pour vérifier que les boutons, les textes et les icônes offrent un contraste suffisant sur les écrans de toutes tailles; surtout pour les utilisateurs en extérieur.

Audit d'accessibilité de documents PDF

Les documents PDF destinés au public doivent être accessibles à tous. Vérifiez le contraste entre le texte et le fond de vos documents pour vous assurer qu'ils respectent les normes d'accessibilité avant publication et distribution aux utilisateurs.

Questions Fréquentes

?Quel est le rapport de contraste minimum pour WCAG AA ?

Le niveau AA exige un rapport de 4.5:1 pour le texte normal et de 3:1 pour le texte grand (18px gras ou 24px).

?Quelle est la différence entre AA et AAA ?

Le niveau AAA est plus strict avec un rapport de 7:1 pour le texte normal. Il offre une meilleure lisibilité pour les personnes malvoyantes.

?Quels formats de couleur sont acceptés ?

L'outil accepte les couleurs au format hexadécimal. Utilisez le sélecteur de couleur intégré pour choisir visuellement vos couleurs.

?Cet outil est-il gratuit ?

Oui, cet outil est entièrement gratuit sans limites d'utilisation, sans inscription et sans niveaux premium. Utilisez-le autant que nécessaire.

?Mes données sont-elles envoyées à un serveur ?

Non, tout le traitement se fait localement dans votre navigateur. Aucune couleur ni donnée n'est transmise à un serveur externe.

?Comment améliorer un contraste insuffisant ?

Assombrissez la couleur de texte ou éclaircissez l'arrière-plan. Utilisez le bouton Échanger pour tester l'inversion et ajustez progressivement.

?Cet outil prend-il en charge le texte grand ?

Oui, l'outil affiche les résultats séparément pour le texte normal et le texte grand selon les seuils WCAG 2.1 définis.

Aidez-nous à améliorer

Aimez-vous cet outil ?

Chaque outil Kitmul est construit à partir de vraies demandes d'utilisateurs. Votre note et vos suggestions nous aident à corriger des bugs, ajouter des fonctionnalités manquantes et créer les outils dont vous avez vraiment besoin.

Notez cet outil

Cliquez sur une étoile pour nous dire si cet outil vous a été utile.

Suggérez une amélioration ou signalez un bug

Une fonctionnalité manque ? Vous avez trouvé un bug ? Une idée ? Dites-le-nous et nous l'examinerons.

Outils associés

Lectures Recommandées

Livres Recommandés sur l'Accessibilité Web et le Design

En tant que partenaire Amazon, nous percevons une commission sur les achats qualifiés.

Boostez vos Compétences

Produits Recommandés pour les Designers Accessibilité

En tant que partenaire Amazon, nous percevons une commission sur les achats qualifiés.

Newsletter

Recevez des Conseils Productivité et les Nouveaux Outils en Premier

Rejoignez les créateurs et développeurs qui valorisent la confidentialité. Chaque édition : nouveaux outils, astuces productivité et mises à jour — sans spam.

Accès prioritaire aux nouveaux outils
Désabonnez-vous à tout moment, sans questions