Les pubs vous déplaisent ? Aller Sans pub Auj. 

Générateur de grille de contraste des couleurs

Promoteur

ANNONCE · Supprimer ?

SAISIR

SORTIR

Côté client

ANNONCE · Supprimer ?

Guide

Générateur de grille de contraste des couleurs

Entrez les couleurs de votre marque ou de votre système de conception et générez une matrice de contraste WCAG complète montrant le rapport de contraste pour chaque combinaison de premier plan/arrière-plan possible. Voyez instantanément quelles paires de couleurs respectent les exigences d'accessibilité AA, AAA ou échouent — essentiel pour la création de systèmes de conception et de guides de style accessibles.

Comment utiliser

Entrez des couleurs hexadécimales une par ligne (avec des étiquettes optionnelles comme « Priorité #3B82F6 »), ou sélectionnez une palette prédéfinie. Cliquez Générer une grille pour créer la matrice de contraste. Chaque cellule affiche le rapport de contraste avec la couleur de premier plan réelle sur la couleur d'arrière-plan réelle, codée par couleur selon le niveau de conformité WCAG.

Caractéristiques

Matrice de contraste N×N – Chaque combinaison de premier plan/arrière-plan testée et affichée dans une grille visuelle
Codage couleur WCAG – Vert pour AAA (≥7:1), jaune pour AA (≥4.5:1) et rouge pour échec (<4.5:1)
Aperçu des couleurs en direct – Chaque cellule rendue avec le texte de premier plan réel sur la couleur d'arrière-plan réelle
Texte grand AA – Indique également la conformité Texte grand AA (≥3:1) pour les tailles de caractères plus grandes
Statistiques récapitulatives – Nombre total de paires testées, de réussites AAA, de réussites AA et d'échecs en un coup d'œil
Palettes prédéfinies – Palettes de couleurs Tailwind, Material Design ou monochromes à chargement rapide
Jusqu'à 20 couleurs – Prend en charge les palettes de 2 à 20 couleurs
Seulement côté client Toutes les calculs se font dans votre navigateur.

ANNONCE · Supprimer ?

 FAQ

Que signifient les niveaux de contraste WCAG ?

Les WCAG (Web Content Accessibility Guidelines) définissent les rapports de contraste pour la lisibilité du texte. AAA (≥7:1) est la norme la plus élevée, garantissant que le texte est lisible pour les utilisateurs ayant des déficiences visuelles modérées. AA (≥4.5:1) est la norme minimale pour le texte de taille normale. AA Large (≥3:1) s'applique aux textes de 18 pt ou plus (ou 14 pt en gras). La plupart des lois et normes d'accessibilité exigent au moins la conformité AA pour le contenu web.
Pourquoi ai-je besoin d'une grille de contraste au lieu de vérifier les paires individuellement ?

Une grille de contraste montre toutes les combinaisons de couleurs possibles de votre palette en même temps, révélant des problèmes que vous manqueriez en vérifiant les paires une par une. Les systèmes de conception ont souvent 8 à 15 couleurs qui peuvent être utilisées dans diverses combinaisons de premier plan/arrière-plan. Une grille avec 10 couleurs teste 100 paires simultanément, montrant instantanément quelles combinaisons sont accessibles et lesquelles ne le sont pas. Ceci est essentiel pour créer une documentation d'accessibilité complète pour les équipes de conception.
Comment le rapport de contraste est-il calculé ?

Le rapport de contraste WCAG utilise la luminance relative, calculée à partir des valeurs sRGB linéarisées. Chaque canal de couleur est converti du sRGB encodé gamma à la lumière linéaire en utilisant la formule : si la valeur sRGB est de 0,03928 ou moins, divisez par 12,92 ; sinon, élevez (valeur + 0,055) / 1,055 à la puissance 2,4. La luminance relative est alors de 0,2126×R + 0,7152×G + 0,0722×B. Le rapport de contraste est (luminance plus claire + 0,05) / (luminance plus sombre + 0,05), donnant toujours une valeur entre 1:1 et 21:1.

Envie d'une expérience sans pub ? Passez à la version sans pub



 Installez nos extensions

Ajoutez des outils IO à votre navigateur préféré pour un accès instantané et une recherche plus rapide

Sur

恵 Le Tableau de Bord Est Arrivé !

Tableau de Bord est une façon amusante de suivre vos jeux, toutes les données sont stockées dans votre navigateur. D'autres fonctionnalités arrivent bientôt !

ANNONCE · Supprimer ?