# Vérificateur de contraste des couleurs

https://rankproof.eu/fr/tools/compliance-color-contrast

## Réponse courte

Vérifiez les ratios de contraste couleur texte-fond par rapport aux standards WCAG AA/AAA.

## Ce que ça fait

Calcule le ratio de contraste WCAG entre n'importe quelle couleur de premier plan et d'arrière-plan que vous saisissez, en utilisant la même formule de luminance relative que la spécification WCAG, et le compare aux seuils AA et AAA pour le texte normal et le texte large (4,5:1 / 3:1 pour AA, 7:1 / 4,5:1 pour AAA). Affiche un aperçu de texte en direct dans vos couleurs, accompagné d'un badge réussite/échec pour chaque seuil.

## Comment ça fonctionne

1. Saisissez ou choisissez une couleur de premier plan (texte) et une couleur d'arrière-plan
2. Nous calculons le ratio de contraste de luminance relative WCAG entre les deux couleurs
3. Comparez le ratio aux seuils AA et AAA pour le texte normal et le texte large
4. Consultez un aperçu en direct de votre texte sur votre arrière-plan, accompagné d'un badge réussite ou échec pour chaque seuil

## Exemple d'entrée et de sortie

ENTRÉE

```text
foreground: #767676
background: #ffffff
```

SORTIE

```text
ratio de contraste : 4.54:1

texte normal AA (4,5:1)     PASS
texte large AA (3:1)        PASS
texte normal AAA (7:1)      FAIL
texte large AAA (4,5:1)     PASS
```

## Pourquoi c'est important

Le texte à faible contraste est l'échec d'accessibilité détecté automatiquement le plus courant sur les pages d'accueil dans le rapport annuel Million de WebAIM, et c'est l'un des plus faciles à corriger avec un changement de couleur. Le critère de succès WCAG 2.1 1.4.3 fixe les ratios minimums, et la norme EN 301 549 — le standard derrière l'Acte européen sur l'accessibilité — les applique au contenu web.

## Qui l'utilise

- **Designer**: Validez la palette de couleurs de la marque selon WCAG avant de la figer. De nombreux pastels « modernes » échouent au ratio 4,5:1 sur fond blanc — mieux vaut le découvrir avant de l'appliquer à toute la marque.
- **Auditeur en accessibilité**: Vérifiez chaque paire de couleurs texte/arrière-plan selon les seuils AA et AAA avant de valider la déclaration Annexe V de l'EAA d'un client.
- **Développeur front-end**: Repérez les régressions de contraste introduites par des changements de thème via variables CSS avant qu'elles n'atteignent la production.

## Questions fréquentes

### De quel ratio WCAG ai-je besoin ?

4,5:1 pour le texte normal, 3:1 pour le texte large (≥18pt ou ≥14pt gras) et les composants d'interface. Le niveau WCAG 2.1 AAA exige 7:1 — une barre plus haute que ne visent la plupart des marques.

### Cela vérifie-t-il les images et les icônes ?

Uniquement le contraste du texte, et uniquement pour les deux couleurs que vous saisissez ici. Le contraste des images (par exemple des bannières avec texte sur image) nécessite une revue manuelle — il n'y a pas d'analyse automatique de page.

### Quel contraste l'EAA exige-t-elle ?

Pour le contenu web, la norme EN 301 549 v3.2.1 applique le niveau AA de WCAG 2.1, y compris le critère 1.4.3 — le texte a donc besoin d'au moins 4,5:1 par rapport à son arrière-plan (3:1 pour le texte large). Vérifiez chaque paire de couleurs utilisée sur votre site.

## Outils connexes dans Conformité EAA

- [Vérificateur d'accessibilité](https://rankproof.eu/fr/tools/compliance-wcag-scanner)
- [Générateur de déclaration d'accessibilité](https://rankproof.eu/fr/tools/compliance-accessibility-statement-generator)