Aller au contenu principal

Vous êtes responsable de la gestion des clés et de la validation des résultats.

Convertisseur de couleurs et vérificateur de contraste

Convertissez des couleurs entre HEX, RGB et HSL et vérifiez les ratios de contraste WCAG pour un texte accessible. Toute la conversion s'effectue dans votre navigateur.

Charger un exemple:

Aperçu

Conversions

HEX
#3b82f6
RGB
rgb(59, 130, 246)
HSL
hsl(217.2, 91.2%, 59.8%)

Vérificateur de contraste

Ratio de contraste : 3.68:1Sous AA

Comment convertir une couleur et vérifier le contraste en ligne

Apprenez à convertir des couleurs entre HEX, RGB et HSL et à vérifier les ratios de contraste WCAG localement dans votre navigateur.

  1. 1

    Saisissez une couleur

    Saisissez une valeur HEX, rgb() ou hsl() ou choisissez un échantillon.

  2. 2

    Lisez les conversions

    Copiez les valeurs HEX, RGB et HSL équivalentes depuis les résultats.

  3. 3

    Vérifiez le contraste

    Définissez les couleurs de premier plan et d'arrière-plan, puis lisez le ratio et son étiquette AA/AAA.

  4. 4

    Appliquez la paire accessible

    Utilisez la paire vérifiée dans votre CSS ou vos design tokens.

Cas d'usage courants

  • 1Convertir des design tokens entre HEX, RGB et HSL pour le CSS et les outils de design
  • 2Vérifier le contraste texte/arrière-plan par rapport aux cibles WCAG AA ou AAA
  • 3Choisir des couleurs de marque accessibles avant de figer une palette
  • 4Normaliser des couleurs issues de maquettes en valeurs CSS cohérentes

Conseils de sécurité

  • La conversion s'effectue localement — vous pouvez vérifier les couleurs d'actifs de marque propriétaires sans les téléverser
  • Ne vous fiez pas uniquement à la couleur pour transmettre un sens ; associez-la à des icônes ou des libellés
  • Vérifiez le contraste sur les écrans et les conditions d'éclairage réels de vos utilisateurs
  • Privilégiez des palettes adaptées au daltonisme pour les visualisations de données et les indicateurs d'état

Questions fréquentes

Quels formats de couleurs sont pris en charge ?

HEX (#rgb, #rrggbb, #rrggbbaa), rgb()/rgba() avec canaux de 0 à 255 ou en pourcentage, et hsl()/hsla() avec degrés et pourcentages. Les valeurs alpha sont conservées.

Mes couleurs quittent-elles le navigateur ?

Non. Tous les calculs de conversion et de contraste s'effectuent localement dans votre navigateur. Rien n'est téléversé ni stocké.

Quel ratio de contraste viser ?

WCAG 2.x recommande au moins 4,5:1 pour le texte normal et 3:1 pour le grand texte (AA), et 7:1 pour le texte normal au niveau AAA. Le vérificateur étiquette chaque paire AA ou AAA.

Guides associés

Convertisseur de couleurs : HEX, RGB, HSL

HEX, RGB et HSL sont trois vues de la même couleur. Sachez ce que chaque format représente, quand l'alpha…

Déchiffrer AES-256-GCM localement

Déchiffrer AES-256-GCM est simple lorsque vous disposez du mot de passe et des bonnes métadonnées. Voici…

Chiffrement AES-256-GCM : guide du développeur

Comprendre le chiffrement AES-256-GCM, son fonctionnement et pourquoi il est la référence pour la…

Outils connexes

Générateur de QR code

Appliquez les couleurs de marque aux QR codes en tenant compte du contraste

Compresseur d'images

Optimisez les images riches en couleurs pour le web et l'e-mail

Éditeur Markdown

Rédigez une documentation avec une mise en forme adaptée aux couleurs

Analyseur de texte

Mesurez le texte que vous mettez en forme

Vos données restent sur votre appareil.