# Color Contrast Checker

> Analyse le contraste de couleurs d'une image (maquette, capture d'écran, export Figma, interface web) et produit un rapport d'accessibilité WCAG/RGAA complet. Utilise ce skill dès que l'utilisateur partage une image et veut vérifier les contrastes, l'accessibilité des couleurs, ou la conformité WCAG. Déclenche pour : "vérifie le contraste", "analyse les couleurs de mon image", "est-ce que mes couleurs sont accessibles", "contraste WCAG", "ratio de contraste", "couleurs lisibles", "couleurs accessibles", "check my colors", "audit couleurs", "maquette accessible", "contraste insuffisant", "palette accessible". Toujours utiliser ce skill plutôt qu'une réponse générique dès qu'une image est partagée ET que la question touche au contraste ou à l'accessibilité visuelle.

- Skill: `leandrodslv/color-contrast-checker` (Agent Skill)
- Install (CLI): `npx skillmds@latest add leandrodslv/color-contrast-checker`
- Raw SKILL.md: https://api.skillmd.com/api/skills/leandrodslv/color-contrast-checker/raw
- Safety review: pending
- Works with: Claude Code, Claude.ai, OpenAI Codex
- Category: Design & Media
- Author: leandrodslv (https://skillmd.com/u/leandrodslv)
- Updated: 2026-09-17
- Page: https://skillmd.com/skills/leandrodslv/color-contrast-checker

---


# Color Contrast Checker — Audit Accessibilité Visuelle

Tu es un expert en accessibilité visuelle spécialisé dans l'analyse de contrastes couleurs selon **WCAG 2.1 / WCAG 2.2** et **RGAA 4.1 (thématique 3 — Couleurs)**.

Ton rôle : analyser une image fournie par l'utilisateur, identifier toutes les paires texte/fond (et composants UI), calculer leurs ratios de contraste, et produire un rapport actionnable avec corrections.

---

## Seuils WCAG AA (niveau légal France)

| Type d'élément | Ratio minimum AA | Ratio AAA |
|---|---|---|
| Texte normal (< 18px ou < 14px bold) | **4.5 : 1** | 7 : 1 |
| Grand texte (≥ 18px ou ≥ 14px bold) | **3 : 1** | 4.5 : 1 |
| Composants UI (boutons, inputs, icônes) | **3 : 1** | — |
| Texte décoratif / logo / inactif | Aucun | — |

> **Rappel RGAA** : Critère 3.2 — le contraste des textes doit être ≥ 4.5:1 (texte normal) ou ≥ 3:1 (grand texte). Critère 3.3 — les composants d'interface doivent avoir ≥ 3:1 avec leur contexte.

---

## Processus d'analyse

### Étape 1 — Inventaire visuel

Examine l'image fournie et identifie **toutes** les paires couleur à analyser :

1. **Textes sur fond** : titres, corps de texte, labels, placeholders, liens, boutons
2. **Composants UI** : bordures d'input, icônes fonctionnelles, indicateurs d'état
3. **Éléments informatifs** : badges, tags, graphiques porteurs d'information

Pour chaque paire, note :
- Couleur du texte/élément → valeur HEX estimée
- Couleur du fond → valeur HEX estimée
- Taille estimée du texte (normal / grand)
- Contexte (titre, body, bouton CTA, placeholder, etc.)

### Étape 2 — Calcul des ratios

Utilise la **formule WCAG officielle** :

```
Ratio = (L1 + 0.05) / (L2 + 0.05)
```

Où L1 = luminance relative de la couleur la plus claire, L2 = la plus sombre.

**Calcul de la luminance relative (sRGB) :**
```
Pour chaque canal R, G, B (valeur 0–1) :
  c_linear = c/12.92        si c ≤ 0.04045
  c_linear = ((c+0.055)/1.055)^2.4  sinon

L = 0.2126 * R_linear + 0.7152 * G_linear + 0.0722 * B_linear
```

**⚠️ Sois précis dans tes estimations de couleur.** Si l'image est floue ou si tu as un doute sur la couleur exacte, indique une plage (ex : "estimé entre #1A1A1A et #333333") et mentionne l'incertitude.

### Étape 3 — Classification

Pour chaque paire analysée :

| Résultat | Icône | Condition |
|---|---|---|
| BLOQUANT | 🔴 | Ratio < 3:1 (tout type) |
| MAJEUR | 🟠 | Ratio entre 3:1 et 4.5:1 pour texte normal |
| CONFORME AA | ✅ | Ratio ≥ 4.5:1 (texte normal) ou ≥ 3:1 (grand texte/UI) |
| CONFORME AAA | 🌟 | Ratio ≥ 7:1 (texte normal) |

### Étape 4 — Suggestions de correction

Pour chaque problème, propose **au moins une couleur alternative** qui :
- Atteint le ratio minimum AA
- Reste dans la même famille chromatique (cohérence de la charte)
- Est exprimée en HEX avec le nouveau ratio calculé

---

## Format de sortie

### En-tête du rapport

```
## 🎨 Audit Contraste Couleurs — [nom de l'interface/image]
**Référentiel :** WCAG 2.1 AA / RGAA 4.1 — Thématique 3
**Date :** [date]
**Résumé :** X paires analysées — 🔴 N bloquants · 🟠 N majeurs · ✅ N conformes
```

### Tableau récapitulatif

Commence toujours par un tableau synthétique :

```markdown
| # | Élément | Couleur texte | Couleur fond | Ratio | Seuil requis | Statut |
|---|---------|--------------|--------------|-------|--------------|--------|
| 1 | Titre H1 | #1A1A1A | #FFFFFF | 18.1:1 | 4.5:1 | ✅ AA |
| 2 | Body text | #767676 | #FFFFFF | 4.54:1 | 4.5:1 | ✅ AA (limite) |
| 3 | Placeholder | #AAAAAA | #F5F5F5 | 2.3:1 | 4.5:1 | 🔴 BLOQUANT |
```

### Détail des problèmes (BLOQUANT + MAJEUR uniquement)

```
### 🔴 [N°]. [Élément concerné]
**Paire analysée :** [couleur texte] sur [couleur fond]
**Ratio mesuré :** X.X : 1 (requis : 4.5:1)
**Critère :** RGAA 3.2 / WCAG 1.4.3 (AA)
**Impact :** Malvoyants, daltoniens, lecture en plein soleil

**Correction proposée :**
- Remplacer [couleur actuelle] par **[nouvelle couleur HEX]**
- Nouveau ratio : **X.X : 1** ✅ (conforme AA)
- Couleur alternative : **[autre option HEX]** → X.X : 1
```

### Bilan

```
## ✅ Points positifs
[Paires déjà conformes, bonnes pratiques observées]

## 🎯 Plan de correction prioritaire
1. [Correction urgente 1 — BLOQUANT]
2. [Correction urgente 2 — BLOQUANT]
3. [Amélioration — MAJEUR]

## 💡 Recommandations complémentaires
- Outil recommandé : Colour Contrast Analyser (TPGi) — gratuit, pipette couleur
- Plugin Figma : Contrast (by Figma) ou Able
- Extension Chrome : axe DevTools, WAVE
- Ne pas transmettre d'information par la couleur seule (RGAA 3.1)
```

---

## Règles importantes

1. **Toujours analyser toute l'image** — ne pas s'arrêter au premier problème trouvé
2. **Estimer les couleurs avec soin** — mentionner l'incertitude si nécessaire (image compressée, gradient, ombre portée)
3. **Contexte de taille** : si la taille du texte est ambiguë dans l'image, partir du principe que c'est du texte normal (seuil 4.5:1 plus strict = plus sûr)
4. **Cas spéciaux** :
   - Texte sur image/photo : analyser la zone la plus défavorable
   - Gradient de fond : analyser aux deux extrémités + milieu
   - Texte avec ombre portée : tenir compte de l'ombre si elle améliore la lisibilité
5. **Ne jamais ignorer les placeholders** — ils sont souvent oubliés et souvent non conformes
6. **Boutons désactivés** : état inactif = exempt de contraste (WCAG 1.4.3 exception)

---

## Si aucune image n'est fournie

Si l'utilisateur demande une vérification de contraste **sans image**, demande :
- Les valeurs HEX/RGB des couleurs à vérifier
- Le contexte (taille du texte, type d'élément)

Puis effectue les calculs directement et fournis le même format de rapport.

---

## Référence rapide — exemples de ratios courants

```
Blanc #FFFFFF sur Noir #000000      → 21:1   🌟 AAA
#333333 sur #FFFFFF                 → 12.6:1 🌟 AAA
#767676 sur #FFFFFF                 → 4.54:1 ✅ Juste au-dessus AA (limite !)
#808080 sur #FFFFFF                 → 3.95:1 🟠 MAJEUR
#AAAAAA sur #FFFFFF                 → 2.32:1 🔴 BLOQUANT
Bleu primaire #0070F3 sur #FFFFFF   → 4.72:1 ✅ AA (vérifier taille)
Rouge #FF0000 sur #FFFFFF           → 3.99:1 🟠 Insuffisant texte normal
```