Vérificateur de contraste de couleurs WCAG

Évaluez le rapport de contraste des couleurs de texte et d'arrière-plan selon les directives WCAG 2.1. Générez instantanément des ajustements de couleurs accessibles.

HEX/RGB/HSL
HEX/RGB/HSL
Tout s’exécute localement dans votre navigateur.

Aperçu du texte en direct

Grand titre (18pt Gras / 24pt Normal)

C’est une prévision du grand style de texte de titre.

Texte normal (moins de 18pt)

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Rapport de contraste

18.6:1

Statut de conformité WCAG 2.1

Exigences WCAG AA
Texte normal (4.5:1) PASS
Grand texte (3.0:1) PASS
Exigences WCAG AAA
Texte normal (7.0:1) PASS
Grand texte (4.5:1) PASS

Directives WCAG 2.1

Vérifiez facilement les normes de contraste pour créer des interfaces accessibles conformes aux directives de la Section 508, de l'ADA et de WCAG AA ou AAA.

Moteur de suggestions

Ajustez automatiquement les couleurs de manière incrédulée le long des coordonnées HSL pour trouver les alternatives les plus proches qui répondent aux critères de ratio de contraste.

Entièrement côté client

Les calculs sont exécutés localement dans le contexte de votre navigateur. Aucune couleur, aucun fichier ou aucune coordonnée de télémétrie n'est transmis à nos serveurs.

Outils de couleurs associés

Convertisseur de couleurs HEX RGB HSL
Convertissez les couleurs et ajustez les coordonnées de luminosité.
Sélecteur de couleurs d'image
Extrayez des palettes de couleurs à partir de maquettes de conception.
Convertisseur de couleurs CSS
Convertir entre les formats CMYK, HSV, RGB, HSL et HEX.

Vérificateur de contraste de couleurs

Calculez les ratio de contraste WCAG pour les couleurs avant et arrière-plan et affichez des résultats courants de la taille du texte.

Entrée
2 couleurs CSS valables et texte prévisionnel facultatif.
Sortie
Un rapport de contraste avec les indicateurs WCAG AA et AAA passent ou échouent.
Les limites réelles
Le calcul couvre uniquement le contraste de luminosité ; il ne certifie pas une interface ou un compte pour la rendue des fonctions, le mouvement, le focus ou les coeurs non colorés.
Confidentialité et traitement des données
deux couleurs CSS valides et le texte de prévision facultatif sont traitées dans cette rubrique du navigateur. Converter ne reçoit pas ou ne le stockera pas; fermer ou récharger la page nette l'état de travail sauf si l'outil offre explicitement un téléchargement local.

Comment utiliser cet outil

  1. Fournir deux couleurs CSS valides et le texte de prévision facultatif dans les contrôles d'outils.
  2. Choisissez les paramètres qui affectent un rapport de contraste avec les indicateurs WCAG AA et AAA passent ou échouent, puis exécutez l'outil.
  3. Vérifiez un rapport de contraste avec les indicateurs WCAG AA et AAA passent ou échouent avant de le copier ou de le télécharger.

Modes communs d'échec

Les couleurs invalides ne peuvent pas être mesurées, et la transparence sans un fond résolu peut rendre une proportion inutile.

Exemple utile

Comparez le texte #f2107 sur #fff pour vérifier sa proportion de texte normal et grand.