CSS-Kontrast-Checker - Vérification du contraste CSS

Le contraste n'est pas une question de goût mais d'accessibilité. Les personnes à la vue faible, les personnes âgées, quiconque utilise un écran bon marché ou lit en plein soleil - toutes dépendent du contraste entre le texte et l'arrière-plan. Le CSS-Kontrast-Checker rend cette valeur visible au lieu de la laisser à l'intuition.

Le checker calcule le rapport de contraste selon les WCAG 2.1 et te dit tout de suite si ta combinaison atteint le niveau AA ou AAA - séparément pour le texte normal et le grand texte, parce que les seuils diffèrent. Tu saisis la couleur du texte et celle de l'arrière-plan en Hex, RGB, RGBA, HSL, HSLA ou en nom de couleur CSS ; le checker comprend toutes les notations courantes.

En plus du rapport WCAG classique, l'outil calcule aussi avec APCA, l'Accessible Perceptual Contrast Algorithm. APCA est un projet pour les futures versions des WCAG et n'est pas encore contraignant. APCA évalue le contraste plus près de la perception, surtout avec les polices fines et en mode sombre, où l'ancien rapport se trompe souvent. Tu as ainsi les deux points de vue d'un seul coup d'œil.

Pour que tu n'obtiennes pas seulement un verdict mais aussi une solution, le checker simule les formes courantes de daltonisme - protanopie (pas de rouge), deutéranopie (pas de vert), tritanopie (pas de bleu) et achromatopsie (aucune couleur). Et si une combinaison échoue, le moteur de suggestions propose des couleurs ajustées qui respectent les exigences sans bouleverser ton style.

Pour les tâches plus grandes, il y a deux autres modes. Dans le mode palette, tu vérifies tout un schéma de couleurs d'un coup et tu vois quels assortiments fonctionnent ensemble. Dans le mode batch, tu colles du vrai CSS, et le checker en extrait les valeurs de couleur et les audite en une seule passe - pratique pour vérifier un design existant sous l'angle de l'accessibilité.

Ce n'est pas qu'un exercice : avec la BFSG (loi allemande de renforcement de l'accessibilité), les exigences de contraste sont obligatoires en Allemagne pour de nombreuses offres numériques à partir de juin 2025. Des préréglages prêts à l'emploi - des couleurs libres dans le style des administrations jusqu'au désastre volontairement raté du gris des sites administratifs - te montrent à quoi ressemblent en pratique les bons et les mauvais contrastes.

Tout tourne dans ton navigateur. Aucune valeur de couleur, aucun morceau de CSS n'est envoyé à un serveur. Pas de compte, pas de connexion, pas de transfert de données - juste des valeurs de contraste rapides et honnêtes.