ImageColorPicker.com

Vérificateur de contraste des couleurs

Teste le ratio de contraste entre les couleurs de premier plan et d'arrière-plan pour garantir l'accessibilité.

Vérifie tes couleurs

Teste les combinaisons de couleurs pour t'assurer qu'elles respectent les normes d'accessibilité WCAG pour la lisibilité du texte.

5.80 pour 1
Contraste
AA
Résultat du texte
Bon

Comparés : #000000 sur #CF6291

Texte

16px, Regular (400)

Compte comme texte normal.

  • AA (WCAG 1.4.3) : au moins 4.5:1

    Réussi

  • AAA (WCAG 1.4.6) : au moins 7:1

    Il manque 1.20

    Échec

Composants d'interface et éléments graphiques

Icônes, bordures de champs, indicateurs de focus et autres éléments que tu dois voir pour utiliser l'interface.

  • AA (WCAG 1.4.11) : au moins 3:1

    Réussi
5.80 pour 1. Texte : répond à AA, ne répond pas à AAA. Composants UI : répond.
Comment c'est vérifié
Couleurs comparées (après mélange)
Texte #000000 sur fond #CF6291
Luminance relative
Texte 0.0000, fond 0.2404
Formule
(L1 + 0.05) / (L2 + 0.05) où L1 est la luminance de la couleur la plus claire et L2 de la couleur la plus foncée.
Rapport exact
5.8090 pour 1, affiché comme 5.80 pour 1. La valeur affichée est tronquée, pas arrondie, elle ne paraît donc jamais meilleure qu'elle ne l'est. La valeur exacte est celle comparée à l'exigence.

Taille du texte : 16px, Regular (400)

Compte comme texte normal. Le texte large fait au moins 24px (18pt), ou au moins 18,67px (14pt) lorsqu'il est en gras (poids 700 ou plus). Les tailles sont affichées tronquées, pas arrondies.

Compte comme texte normal. Le texte large fait au moins 24px (18pt), ou au moins 18,67px (14pt) lorsqu'il est en gras (poids 700 ou plus). Les tailles sont affichées tronquées, pas arrondies.

Aa
Titre de l'aperçu

Le vif renard brun saute par-dessus le chien paresseux

Exemple de petit texte (12px)

Texte
#000000
Fond
#cf6291

Normes WCAG

Niveau AA

Ratio de contraste minimal de 4.5:1 pour le texte normal et 3:1 pour le texte large. Requis pour la plupart des sites web.

Niveau AAA

Ratio de contraste amélioré de 7:1 pour le texte normal et 4.5:1 pour le texte large. Recommandé pour une accessibilité optimale.

Vérificateur de contraste des couleurs

Calcule le ratio de contraste entre les couleurs du texte et de l'arrière-plan.

Choisissez une couleur à l'aide du sélecteur de couleur pour la couleur du texte et de l'arrière-plan ou saisissez une couleur au format hexadécimal RGB (par exemple, #259 ou #2596BE). Vous pouvez ajuster le curseur pour sélectionner la couleur. Les Web Content Accessibility Guidelines (WCAG) ont une directive spécifique pour déterminer si le texte est lisible pour les utilisateurs voyants. Ce critère utilise un algorithme particulier pour mapper les combinaisons de couleurs en ratios comparables. Selon cette formule, les WCAG indiquent qu'un ratio de contraste de couleur de 4.5:1 entre le texte et son arrière-plan est adéquat pour le texte normal, et le texte large (18+ pts normal, ou 14+ pts gras) doit avoir au moins un ratio de contraste de 3:1.

Caractéristiques principales

  • Calcul du ratio de contraste en temps réel
  • Vérification de la conformité WCAG AA & AAA
  • Curseurs HSL pour un réglage précis
  • Formats d'aperçu multiples

Outils avancés

  • Correction automatique des couleurs
  • Échantillons de texte et de fond
  • Détection du nom de la couleur
  • Exporter les résultats

Questions fréquemment posées

Pour la conformité WCAG AA, le texte normal exige un ratio de contraste minimum de 4,5:1, tandis que le grand texte (18pt ou 14pt en gras) exige 3:1.

La norme WCAG AAA exige des ratios de contraste plus élevés : 7:1 pour le texte normal et 4,5:1 pour le grand texte, contre 4,5:1 et 3:1 pour AA.

Utilise notre correction automatique pour ajuster le texte ou l'arrière-plan tout en respectant ton intention graphique, ou règle manuellement les couleurs avec les curseurs HSL et leurs indicateurs visuels qui montrent les zones optimales pour la conformité AA/AAA.

Les zones vertes et les repères AA/AAA indiquent les plages optimales pour atteindre la conformité WCAG. Les indications de direction (Plus clair/Plus foncé) t'aident à obtenir un meilleur contraste en fonction de ta combinaison de couleurs actuelle.

Oui, tu peux saisir n'importe quel code couleur hexadécimal ou utiliser le sélecteur de couleurs pour choisir tes propres couleurs. L'URL se met à jour automatiquement pour que tu puisses partager des combinaisons précises.