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)

Ceci est un aperçu du style de texte de grand 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 ratios de contraste WCAG pour les couleurs de premier plan et d'arrière-plan et affichez des résultats courants de taille de texte.

Entrée
Deux couleurs CSS valides et un texte d’aperçu facultatif.
Sortie
Un rapport de contraste avec les indicateurs de réussite ou d'échec WCAG AA et AAA.
Limitations réelles
Le calcul couvre uniquement le contraste de luminance ; il ne certifie pas une interface ni ne tient compte du rendu des polices, du mouvement, du focus ou des indices 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. Convertr 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 un texte de prévisualisation facultatif dans les contrôles de l'outil.
  2. Choisissez les paramètres qui affectent un rapport de contraste avec les indicateurs de réussite ou d'échec WCAG AA et AAA, puis exécutez l'outil.
  3. Vérifiez un rapport de contraste avec les indicateurs de réussite ou d'échec WCAG AA et AAA avant de le copier ou de le télécharger.

Modes d’échec courants

Les couleurs invalides ne peuvent pas être mesurées, et la transparence sans un arrière-plan résolu peut rendre un rapport inutile.

Exemple utile

Comparez le texte #1f2937 sur #ffffff pour vérifier son rapport pour le texte normal et grand.