UUUP Tools

Outils de design

Vérificateur de contraste de couleur — WCAG AA/AAA

Calculez le contraste de premier plan/arrière-plan avec les règles WCAG 2.0 et vérifiez AA/AAA pour les textes normaux et de grande taille. Utile pour les palettes accessibles et la vérification de la lisibilité du frontend.

Accès rapide→Convertisseur de couleurs
ContrasteWCAGAccessibilité
Accès rapide:Convertisseur de couleursVérificateur de contraste par lotsHarmoniseur de couleurs

Ajouter cet outil aux favoris

Aucun mode de stockage des favoris n’a été sélectionné.

Actions rapides

Retour à Outils de design Parcourir tous les outils

Copiez l’URL de cet outil ou ouvrez la feuille de partage du système sur un appareil compatible.

Cas d’usage

  • Vérifier la lisibilité du corps et du texte des boutons
  • Vérifier un brouillon de conception par rapport aux WCAG
  • Ajuster les couleurs de la marque jusqu'à ce que AA ou AAA passe

Mode d’emploi

  1. Définir le premier plan et l'arrière-plan (sélecteur ou HEX)
  2. Vérifier le rapport de contraste et AA/AAA résultats
  3. Échangez les couleurs si nécessaire, puis copiez le résultat du contraste

Exemples d’entrée et de sortie

Entrée

Premier plan #000000 / arrière-plan #ffffff

Sortie

Contraste 21:1, conforme AA/AAA

FAQ

Quelle est la différence entre AA et AAA ?

AA nécessite au moins 4,5:1 pour un texte normal et 3:1 pour un texte de grande taille. AAA est plus strict : 7:1 pour le texte normal et 4,5:1 pour le texte volumineux.

Quelles entrées de couleurs sont prises en charge ?

Le calcul utilise des valeurs HEX. Utilisez le sélecteur ou collez #RRGGBB.

Outils

Outils associés

Poursuivez avec un autre outil traduit pour une tâche proche.

Convertisseur de couleurs

Convertisseur de couleurs – HEX, RVB, HSL en ligne

Disponible

Convertissez les couleurs parmi les variables HEX, RVB, HSL, HWB, CMJN et CSS dans votre navigateur. Comprend un sélecteur de couleurs et un assistant de couleurs aléatoires pour le transfert de conception, le travail sur les feuilles de style et l'alignement des couleurs de la marque.

Couleur HEX RVB
Ouvrir l’outil

Vérificateur de contraste par lots

Vérificateur de contraste par lots — Vérifications WCAG multi-paires

Disponible

Vérifiez le contraste WCAG pour plusieurs paires premier plan/arrière-plan à la fois. Consultez les niveaux AA/AAA et les aperçus de texte, utiles pour les audits du système de conception, les lots de couleurs de marque et les examens d'accessibilité.

Contraste WCAG Accessibilité
Ouvrir l’outil

Harmoniseur de couleurs

Harmoniseur de couleurs — Règles d'harmonie classiques

Disponible

Choisissez une couleur de base et générez des schémas avec des règles complémentaires, analogues, triadiques, tétradiques, complémentaires ou monochromatiques. Prévisualisez l'utilisation de l'interface utilisateur et exportez les variables CSS pour le travail de la marque et des composants.

Palette Couleur Harmonie
Ouvrir l’outil