Vérificateur de contraste

Traité dans ce navigateur

Limite de texte : 2000000 caractères

Cet outil n’envoie pas votre saisie.

Un gris `#767676` sur blanc passe parfois en « grand texte » et échoue en corps. On mesure la luminance relative. Un site public français s’aligne sur le RGAA (AA), pas sur un avis de DA.

La charte met du gris clair sur blanc « pour faire premium ». Le job : le ratio, celui que l’audit RGAA 3.2 retient.

Web-developpeur.com et rgaa-test.fr exposent les mêmes seuils. Ici : deux couleurs, une luminance, pas un crawl de site.

Comment lire le chiffre

  • 21:1 = noir sur blanc. 1:1 = identique.
  • Un titre 24 px peut passer à 3:1 ; le même hex en 16 px, non.
  • Un dégradé : mesurez la zone la plus faible, pas le nuancier joli. Dégradés.

Comment l’utiliser

  1. Hex du texte, hex du fond (défaut souvent #ffffff).
  2. Comparez au seuil selon la taille / graisse réelles dans le CSS.
  3. Ajustez L (HSL) plutôt que de changer toute la teinte. Nouvelle idée de palette : générateur.

FAQ

Quels seuils en France ?

Le critère RGAA 3.2 reprend le WCAG 1.4.3 niveau AA : 4,5:1 texte courant, 3:1 grand texte (≥ 24 px, ou ≥ 18,5 px et gras). Le AAA (7:1) n’est pas exigé par le RGAA. Guides Orange / rgaa-checker.

Un bon ratio = site conforme ?

Non. C’est un critère mesurable parmi d’autres. Pas un audit, pas une déclaration d’accessibilité.

Prélever la couleur sur une maquette ?

Pipette d’image, puis revenez coller les hex. Une palette n’est pas un audit.

Contraste d’une icône / bordure de champ ?

RGAA 3.3 / WCAG 1.4.11 : souvent 3:1 pour les graphiques porteurs d’info. Cette page mesure surtout deux aplats (texte / fond).

Les hex partent-ils ?

Non. Calcul dans l’onglet.

Outils liés