Comment interpréter WCAG2.0 directives sur le contraste pour les boutons et les icônes

1. Quel est le contraste de couleur minimum qu'une icône devrait passer?
2. Quel est un rapport de contraste acceptable?
3. Comment lisez-vous les couleurs du rapport de contraste?
4. Comment le contraste WCAG est-il calculé?

Quel est le contraste de couleur minimum qu'une icône devrait passer?

Le premier test de l'icône doit être dans le fond le plus sombre (le moins contrastant) qui est adjacent à la couleur de l'icône. Si c'est au moins 3: 1, il passe le critère de réussite.

Quel est un rapport de contraste acceptable?

Conseils des rapports de contraste des couleurs

Chaque fois que vous utilisez la couleur dans les images, assurez-vous que les couleurs ont un rapport de contraste d'au moins 4.5: 1. Cela garantit que le texte est toujours lisible pour ceux qui peuvent avoir une aveuglement de couleur.

Comment lisez-vous les couleurs du rapport de contraste?

Les ratios de contraste varient de 1 à 21 (écrit comme 1: 1 et 21: 1). Le premier numéro, L1, fait référence à la luminance relative des couleurs claires tandis que L2 est le deuxième nombre qui fait référence à la luminance relative des couleurs sombres.

Comment le contraste WCAG est-il calculé?

Le contraste est calculé en utilisant la «luminance relative», qui est définie comme: la luminosité relative de tout point d'un espace de couleurs, normalisée à 0 pour le noir le plus foncé et 1 pour le blanc le plus léger. La luminance relative peut être calculée à partir de tout code couleur (comme Hex ou RVB).