Un rôle pour chaque couleur

Créez votre palette de couleurs

Choisissez un fond, un texte et un accent. Observez leur rencontre dans un aperçu, vérifiez les contrastes, puis emportez vos quatre couleurs en CSS ou JSON.

01 · Composer

Quatre couleurs, quatre rôles

HEX court ou long : #ABC ou #AABBCC. Les couleurs sont opaques, en sRGB.

Fond

Texte

Accent

Texte sur accent

02 · Voir

Un aperçu concret

Seul cet aperçu utilise vos couleurs. Les commandes de l’outil gardent leurs propres contrastes.

Corrigez les codes pour afficher la palette et ses contrastes.

Le lien utilise le rôle Texte et reste souligné. Le bouton associe Accent et Texte sur accent.

03 · Vérifier

Les contrastes de votre palette

Ratios arrondis pour la lecture ; seuils évalués avant arrondi. Ces résultats concernent des couples de couleurs, pas toute l’accessibilité d’une interface.

Texte / fond

—

Texte courant : AA à 4,5:1 ; AAA à 7:1.

Texte / accent

—

Texte courant : AA à 4,5:1 ; AAA à 7:1.

Accent / fond

—

Repère à 3:1 seulement si cette limite de couleur est nécessaire pour identifier un composant ou une forme. Un accent décoratif n’est pas soumis systématiquement à ce seuil.

04 · Emporter

Gardez votre composition

Le CSS et le JSON reprennent les codes affichés, normalisés sur six caractères. Le JSON contient aussi les couples contrôlés et leurs ratios.

Variables CSS de la palette

Ce que ce contrôle vous dit

La méthode WCAG compare la luminance relative de deux aplats sRGB opaques. Elle ne mesure ni harmonie esthétique, ni correspondance de peinture, ni fidélité d’impression. Les photos, transparences, dégradés, états de survol et focus demandent des contrôles supplémentaires.

Un texte peut atteindre 4,5:1 sans que la navigation, les libellés ou les autres composants soient accessibles.
Le seuil de 3:1 présenté ici concerne certains éléments non textuels ; il ne remplace pas celui de 4,5:1 utilisé pour le texte courant.
Les calculs et les exports sont effectués dans votre navigateur. Les codes de votre palette ne sont pas envoyés à notre serveur ni aux événements de mesure d’usage.

Méthode WCAG pour le contraste du texte · Comprendre le contraste non textuel