Design

Vérificateur de contraste de couleurs

Rapport de contraste WCAG pour deux couleurs.

Presque avant que nous ne le sachions, nous avions quitté le sol.
1.00
Rapport de contraste
StandardTexte normalTexte agrandi
WCAG AA
WCAG AAA
WCAG 1.4.11Composants non textuels / UI (≥3:1) : —

Alternative de texte AA la plus procheCalcul d’une alternative OKLCH…

Ce rapport suit les exigences de rapport de contraste WCAG 2.2. APCA reste expérimental et ne constitue pas un résultat de conformité WCAG 3.

Choisissez les couleurs ? Convertisseur de couleurs · bios sociaux : Générateur de texte fantaisie · échelles: Générateur de nuances de couleurs.

Comment utiliser

Choisissez une couleur de texte et une couleur d'arrière-plan. Le rapport de contraste et les résultats de réussite/échec pour chaque niveau WCAG se mettent à jour en direct, avec un aperçu.

FAQ

Qu'est-ce qu'un bon rapport de contraste ?

WCAG AA exige 4.5:1 pour le texte normal et 3:1 pour le texte de grande taille. AAA exige respectivement 7:1 et 4.5:1. WCAG 1.4.11 exige également 3:1 pour les éléments graphiques non textuels essentiels et les limites ou états des composants UI.

Qu'est-ce qu'un texte grand ?

Le texte large fait environ 18pt (24px) ou 14pt (18.66px) en gras et plus grand.

Comment le ratio est-il calculé

À partir de la luminance relative des deux couleurs : (plus claire + 0,05) ÷ (plus foncée + 0,05), selon la formule WCAG.

Dernière mise à jour: