Vérificateur de Matrice de Contraste

Pourquoi vérifier toutes les combinaisons de couleurs en une fois plutôt qu'une par une ?

Les directives d'accessibilité WCAG exigent un ratio de contraste minimum entre le texte et l'arrière-plan, sans quoi les utilisateurs malvoyants ou daltoniens risquent de ne pas pouvoir lire le texte. En pratique, la plupart des sites combinent plusieurs couleurs de marque, couleurs d'arrière-plan et couleurs de statut — un titre de couleur principale sur une carte gris clair, une couleur d'avertissement sur fond blanc, du texte sombre sur un fond teinté — et vérifier chaque paire manuellement conduit facilement à des erreurs ou des oublis. Cet outil vous permet de coller toutes les couleurs que vous utilisez réellement et calcule instantanément le ratio de contraste pour chaque paire possible, présenté sous forme d'une seule matrice — plus besoin de vérifier les combinaisons une par une.

Comment le ratio est calculé — un exemple concret

WCAG 2.1 définit le ratio de contraste comme (L1 + 0,05) / (L2 + 0,05), où L1 et L2 sont la luminance relative des deux couleurs (plus la valeur est élevée, plus la couleur est proche du blanc). Le noir pur #000000 face au blanc pur #FFFFFF obtient un score parfait de 21:1, mais le gris clair #999999 face au blanc n'obtient que 2,85:1 — bien en dessous du minimum de 4,5:1 requis pour le texte normal. Le texte normal (moins de 18px, ou moins de 14px en gras) nécessite AA ≥ 4,5:1, ou AAA ≥ 7:1 pour une norme plus stricte ; le texte large (18px+ en gras ou 24px+) a un seuil plus souple avec AA ≥ 3:1.

Comment lire la matrice de résultats

Chaque cellule de la matrice indique le ratio de contraste entre la couleur de la ligne et celle de la colonne, avec un code couleur : vert (réussit AAA), jaune (réussit seulement AA), rouge (échoue) — ce qui permet de repérer les paires problématiques d'un coup d'œil au lieu de tout calculer à la main.

Le contraste est calculé uniquement à partir de la valeur RGB de chaque couleur — il ne tient pas compte du poids de la police, de l'anti-aliasing ou des superpositions semi-transparentes dans le rendu réel. Vérifiez toujours sur un appareil réel avant la mise en production.