Qu'est-ce que le ratio de contraste ?

Il mesure la différence de luminosité entre deux couleurs, de 1:1 (identiques) à 21:1 (noir sur blanc). Plus il est élevé, plus c'est facile à lire.

Quelle est la différence entre AA et AAA ?

AA est le niveau d'accessibilité standard (4.5:1 pour le texte normal) ; AAA est plus strict (7:1) pour une meilleure lisibilité.

Qu'est-ce qui compte comme grand texte ?

Environ 18 pt régulier ou 14 pt gras et plus. Le grand texte a des exigences de contraste plus faibles (3:1 pour AA).

Qu'est-ce que la couleur suggérée ?

Si votre couleur de texte échoue au niveau AA, l'outil l'éclaircit ou l'assombrit jusqu'à atteindre 4.5:1 par rapport à votre fond, et vous propose cette couleur.

Quelque chose est-il téléversé ?

Non. La vérification s'exécute entièrement dans votre navigateur. Rien n'est envoyé à un serveur.

Vérificateur de contraste de couleur

Couleur du texte

Couleur de fond

Exemple de grand texte

Voici à quoi ressemble le texte de corps normal à ce niveau de contraste.

Ratio de contraste

4,48:1

AA · texte normal✕

AAA · texte normal✕

AA · grand texte✓

AAA · grand texte✕

Couleur de texte suggérée :#717171

Outils externes associés

Certains liens sont des liens d'affiliation.

Adobe ColorUn outil en ligne gratuit pour créer et explorer des palettes de couleurs et des thèmes. Utilisez la roue chromatique pour créer des harmonies, ou extrayez des couleurs d'une image. Les palettes se synchronisent directement avec Creative Cloud.CanvaUne plateforme de design populaire en glisser-déposer pour créer des publications sur les réseaux sociaux, des présentations, des affiches et plus encore. Propose une immense bibliothèque de modèles, photos et graphiques gratuits et premium. Aucune expérience en design requise.

Outils associés

Convertisseur de CouleurConvertissez n'importe quelle couleur entre HEX, RGB, HSL, HSV et RGBA à la fois. Modifiez une valeur, copiez en un clic, avec alpha et contraste WCAG.Générateur de Palette de CouleursGénérez des palettes de couleurs harmonieuses à partir d'un HEX de base avec des schémas complémentaire, analogue, triadique et plus. Verrouillez des couleurs, régénérez le reste et exportez en CSS, Tailwind ou JSON.Générateur de DégradéCréez des dégradés CSS linéaires, radiaux et coniques avec plusieurs points de couleur. Ajustez l'angle, la forme et le centre, puis copiez le CSS background ou la valeur Tailwind en un clic.Extracteur de Couleurs d'ImageExtrayez la palette de couleurs dominantes de n'importe quelle image dans votre navigateur, sans rien envoyer. Obtenez HEX, RGB et pourcentage (%) de chaque couleur, choisissez le nombre et exportez en CSS/JSON.

Vérifiez si votre texte est lisible sur son fond. Entrez une couleur de texte et une couleur de fond pour voir le ratio de contraste WCAG et si cela passe les niveaux AA et AAA pour le texte normal et grand, avec un aperçu en direct. En cas d'échec, l'outil suggère une couleur similaire qui passe. Tout fonctionne dans votre navigateur.

Comment l'utiliser

Choisissez la couleur du texte.
Choisissez la couleur de fond.
Lisez le ratio de contraste et les résultats AA / AAA.
En cas d'échec, appliquez la couleur suggérée qui passe.

Ce que signifient les niveaux WCAG

Le ratio de contraste va de 1:1 (sans contraste) à 21:1 (noir sur blanc). Pour le texte normal, AA exige au moins 4.5:1 et AAA exige 7:1. Pour le grand texte, AA exige 3:1 et AAA exige 4.5:1. Atteindre au moins AA aide les personnes malvoyantes à lire votre contenu confortablement.

Fonctionnalités

Ratio de contraste exact

Consultez le ratio WCAG précis entre vos deux couleurs.

Résultats AA et AAA

Vérifiez en une fois si le texte normal et grand passe ou échoue.

Aperçu en direct

Voyez du texte réel dans vos couleurs pour juger directement la lisibilité.

Couleur de passage suggérée

Si le contraste est trop faible, obtenez une couleur proche qui satisfait le niveau AA.

Confidentialité par conception

Tout est calculé dans votre navigateur. Rien n'est téléversé.

Cas d'utilisation courants

Interface accessible

Assurez-vous que le texte d'interface répond aux exigences d'accessibilité.

Couleurs de marque

Vérifiez si les paires de couleurs de marque sont lisibles en texte.

Boutons et liens

Vérifiez que les étiquettes des boutons et liens colorés sont lisibles.

Documents et présentations

Confirmez que le texte ressort suffisamment sur les fonds colorés.

Notes et conseils

Grand texte signifie environ 18 pt, ou 14 pt gras et plus, qui a des exigences de contraste plus faibles.
Ne vous fiez pas uniquement à la couleur pour transmettre le sens ; associez-la à du texte ou des icônes.
Le contraste est un facteur de lisibilité, avec la taille de police et l'espacement.
Tout fonctionne sur votre appareil — rien n'est envoyé à un serveur.

Questions fréquentes

Qu'est-ce que le ratio de contraste ?: Il mesure la différence de luminosité entre deux couleurs, de 1:1 (identiques) à 21:1 (noir sur blanc). Plus il est élevé, plus c'est facile à lire.
Quelle est la différence entre AA et AAA ?: AA est le niveau d'accessibilité standard (4.5:1 pour le texte normal) ; AAA est plus strict (7:1) pour une meilleure lisibilité.
Qu'est-ce qui compte comme grand texte ?: Environ 18 pt régulier ou 14 pt gras et plus. Le grand texte a des exigences de contraste plus faibles (3:1 pour AA).
Qu'est-ce que la couleur suggérée ?: Si votre couleur de texte échoue au niveau AA, l'outil l'éclaircit ou l'assombrit jusqu'à atteindre 4.5:1 par rapport à votre fond, et vous propose cette couleur.
Quelque chose est-il téléversé ?: Non. La vérification s'exécute entièrement dans votre navigateur. Rien n'est envoyé à un serveur.