colorize
ColorKit
CK

Vérificateur de Contraste des Couleurs

Testez vos associations de couleurs pour garantir la conformité aux directives d'accessibilité web WCAG et APCA.

Contrast Ratio

6.29 : 1

WCAG AA (Normal)PASS
WCAG AA (Large)PASS
WCAG AAA (Normal)FAIL
UI ComponentsPASS

Auto-Adjust to Pass:

Live Preview Headline

This is a subheadline that demonstrates slightly smaller text. It needs at least a 4.5:1 ratio to be considered legible under WCAG AA guidelines.

This is a standard body paragraph. Good contrast ensures that all users, including those with visual impairments, can read your content without eye strain.

UI components and borders require a 3.0:1 ratio.

À quoi sert cet outil de vérification de contraste ?

Cet outil évalue avec exactitude mathématique le contraste entre vos textes et vos arrière-plans afin d'assurer une lisibilité optimale conforme aux directives d'accessibilité pour les contenus web (WCAG 2.2).

Pour qui cet outil est-il conçu ?

Destiné aux designers UI/UX, aux développeurs web et aux auditeurs en accessibilité souhaitant concevoir des interfaces intuitives, inclusives et conformes aux obligations légales.

Critères WCAG AA et AAA

  • WCAG AA (Texte standard) : Ratio minimal exigé de 4.5:1.
  • WCAG AA (Grand texte) : Ratio minimal exigé de 3.0:1 pour 18pt ou 14pt gras.
  • WCAG AAA (Niveau optimal) : Ratio strict de 7.0:1 pour le texte courant.
Base de Connaissances & FAQ

Foire Aux Questions

Réponses directes et solutions aux questions courantes, défis techniques et normes de l'industrie.

Quel est le ratio de contraste minimum légal pour le texte selon les WCAG et l'accessibilité web ?expand_more
Selon la norme WCAG 2.1 / 2.2 Niveau AA (le standard légal en vigueur pour l'accessibilité numérique) :
  • Texte normal (< 18pt ou 14pt gras) : Doit afficher au minimum un ratio de 4.5:1 par rapport à l'arrière-plan.
  • Grand texte (≥ 18pt standard ou 14pt gras) : Exige au moins un ratio de 3.0:1.
  • Composants d'interface graphique : Bordures de champs, icônes interactives et focus doivent respecter un ratio minimal de 3.0:1.
Quelle est la différence entre les niveaux de conformité WCAG AA et WCAG AAA ?expand_more
Le niveau WCAG AA est l'exigence légale standard pour les entreprises, sites e-commerce, banques et services publics (4.5:1). Le niveau WCAG AAA est le niveau d'excellence supérieur préconisé pour les portails médicaux et administratifs critiques, exigeant un ratio rigoureux de 7.0:1 pour le corps de texte.
Pourquoi les textes indicatifs (placeholders) échouent-ils souvent aux audits d'accessibilité ?expand_more
Les couleurs grises par défaut des navigateurs (comme #9CA3AF sur fond blanc) offrent un contraste de seulement 2.0:1 à 2.5:1, ce qui est non conforme. Recommandation : n'utilisez jamais un placeholder en remplacement d'une balise <label> explicite et stylisez vos placeholders avec un contraste suffisant.
Comment la formule W3C calcule-t-elle la luminance relative ?expand_more
La luminance relative (L) quantifie la clarté perçue de 0.0 (noir pur) à 1.0 (blanc absolu). L'œil humain étant plus sensible aux composantes vertes, la formule pondère les canaux sRGB linéarisés : 
L = 0.2126 * R_lin + 0.7152 * G_lin + 0.0722 * B_lin
Le ratio final est obtenu avec (L1 + 0.05) / (L2 + 0.05), où L1 représente la couleur la plus claire.
Peut-on utiliser du texte blanc sur un fond jaune pur (#FFFF00) ou cyan (#00FFFF) ?expand_more
Non. Le jaune et le cyan purs ont une luminance très élevée. Associés à du texte blanc, le ratio tombe entre 1.07:1 et 1.25:1, rendant le texte illisible pour les personnes malvoyantes. En les combinant avec du texte sombre (#0F172A), le ratio grimpe à 16.8:1, validant avec succès les tests AA et AAA.