Outils › Contraste WCAG

Vérificateur de contraste de couleurs WCAG

Saisissez la couleur du texte et du fond — obtenez le ratio de contraste et la vérification WCAG AA et AAA. Gratuit, sans inscription.

Texte
Fond
Grand texte (18px+)
Texte normal (14px). Texte en gras (14px). Voici comment le contenu apparaît sur le fond sélectionné avec la couleur de texte choisie.
21 : 1
Ratio de contraste
Exigences WCAG 2.1
📝AA — texte normal : minimum 4,5:1
🔤AA — grand texte (18px+ ou 14px gras) : minimum 3:1
✨AAA — texte normal : minimum 7:1
⭐AAA — grand texte : minimum 4,5:1

Qu'est-ce que le WCAG

Le WCAG (Web Content Accessibility Guidelines) est une norme internationale d'accessibilité web. Le niveau AA est la base requise pour la plupart des sites. AAA est le niveau avancé pour une accessibilité maximale.

Comment le contraste est calculé

Le ratio de contraste est calculé selon la formule WCAG basée sur la luminance relative de deux couleurs. Le contraste maximum est 21:1 (noir sur blanc), le minimum est 1:1 (couleurs identiques).

Pourquoi c'est important

Un faible contraste rend la lecture difficile pour les personnes malvoyantes. Dans de nombreux pays, la conformité WCAG AA est une exigence légale pour les sites gouvernementaux et commerciaux.

Questions fréquentes
Quel est le contraste minimum requis ?
Pour le texte normal — minimum 4,5:1 (niveau AA). Pour le grand texte (18px et plus ou 14px en gras) — 3:1. Ce sont les exigences de base du WCAG pour l'accessibilité.
Quelle est la différence entre AA et AAA ?
AA est le niveau d'accessibilité standard atteignable pour la plupart des designs. AAA est le niveau avancé avec des exigences de contraste plus strictes. La conformité AAA est souhaitable mais pas toujours obligatoire.
Les exigences s'appliquent-elles aux images ?
Les exigences de contraste WCAG s'appliquent au texte — normal et sous forme d'images. Les éléments décoratifs et les logos sont exclus des exigences.
Cet outil est-il gratuit ?
Oui, complètement gratuit et sans limites. Sans inscription.

Autres outils couleur

Pipette couleurChargez une photo et cliquez n'importe où — obtenez HEX, RGB, HSL et le nom Palette depuis une photoExtrayez 5–8 couleurs dominantes de n'importe quelle image Palette pour projetGénérez N couleurs avec lisibilité du texte garantie Harmonies de couleursComplémentaires, analogues, triadiques et split-complémentaires Variations de couleurPlus clair, foncé, saturé, pâle, chaud, froid Générateur de dégradésCréez de beaux dégradés et copiez le code CSS Simulateur de daltonismeComment les daltoniens voient les couleurs — protanopie, deuteranopie et autres Convertisseur TailwindLa classe Tailwind la plus proche pour n'importe quelle couleur HEX Convertisseur de couleursHEX ↔ RGB ↔ HSL ↔ CMYK instantanément, avec copie du code Couleur par nomTrouvez HEX par nom — «terracotta», «indigo», «azur» Filtre CSS pour SVGRecolorisez des icônes SVG avec n'importe quelle couleur via CSS Palettes de couleursPalettes prêtes par thème — cliquez pour copier le HEX