# Vérificateur de contraste des couleurs

Vérifiez le contraste entre une couleur de texte et une couleur d’arrière-plan selon WCAG 2 et APCA. L’outil calcule le rapport de contraste WCAG 2 à partir de la luminance relative, indique si les seuils AA et AAA sont respectés pour le texte normal et le grand texte, ainsi que pour les graphiques UI, et ajoute la valeur de contraste de luminosité APCA avec des indications sur son utilité. Conçu pour les designers et les développeurs qui créent des interfaces accessibles.

## Foire aux questions

### Que signifient les niveaux WCAG ?

Le niveau AA exige 4.5:1 pour le texte normal et 3:1 pour le grand texte (critère de succès 1.4.3) ; le niveau AAA exige 7:1 et 4.5:1 (1.4.6). Les composants d’interface utilisateur et les graphiques porteurs de sens doivent présenter 3:1 par rapport aux couleurs adjacentes (1.4.11). L’outil indique si chacun de ces cinq seuils est respecté.

### Qu’est-ce qui est considéré comme du grand texte ?

WCAG définit le grand texte comme un texte d’au moins 18 points en graisse normale, soit environ 24 CSS pixels, ou d’au moins 14 points en gras, soit environ 18,66 CSS pixels. Tout texte plus petit est considéré comme normal et doit respecter un rapport plus élevé.

### Pourquoi un rapport de 4.499:1 ne respecte-t-il pas le niveau AA ?

Les seuils WCAG sont exacts : un rapport qui s’arrondirait à 4.5, mais lui est inférieur, ne les respecte pas. L’outil compare le rapport non arrondi et l’affiche tronqué à deux décimales, afin que le nombre affiché ne paraisse jamais meilleur que la valeur réelle.

### Qu’est-ce que l’APCA ?

L’Accessible Perceptual Contrast Algorithm est la méthode de contraste conçue pour les projets de norme WCAG 3. Elle modélise le contraste de luminosité perçu, traite différemment le texte et l’arrière-plan et renvoie une valeur de contraste de luminosité, Lc, comprise entre environ -108 et 106. Elle ne fait encore partie d’aucune norme WCAG publiée ; utilisez donc les résultats WCAG 2 pour vérifier la conformité et l’APCA comme contrôle complémentaire.

### Pourquoi la valeur APCA est-elle parfois négative ?

L’APCA tient compte de la polarité : les valeurs positives indiquent un texte sombre sur un arrière-plan clair, et les valeurs négatives, un texte clair sur un arrière-plan sombre. Les indications utilisent la valeur absolue ; Lc -75 et Lc 75 appartiennent donc au même niveau.

### Comment les niveaux d’indication APCA sont-ils définis ?

Ils suivent le mode simple bronze de l’APCA : Lc 90 est recommandé pour le texte courant, Lc 75 est le minimum pour le texte courant, Lc 60 pour les autres contenus textuels, Lc 45 pour les titres et le grand texte, Lc 30 pour le texte lisible par endroits, comme les espaces réservés, et Lc 15 pour les éléments non textuels. La taille et la graisse de la police comptent aussi ; considérez donc ces niveaux comme des points de départ plutôt que comme un verdict.

### Quelle version de l’APCA est implémentée ?

Les constantes APCA-W3 de la version 0.0.98 G, révision 4g, avec l’exposant simple 2.4 sur les canaux sRGB, le seuil d’écrêtage du noir doux et l’écrêtage des faibles contrastes. Un texte noir sur fond blanc donne environ Lc 106.0 et un texte blanc sur fond noir environ Lc -107.9, conformément à l’implémentation de référence.

### Quels formats de couleur puis-je saisir ?

Codes hexadécimaux avec ou sans #, noms de couleurs CSS, rgb(), hsl(), hwb(), lab(), lch(), oklab(), oklch(), espaces color() comme display-p3, et cmyk(). Les couleurs hors sRGB sont d’abord converties en sRGB, car les deux formules sont définies pour les couleurs d’écran sRGB.

### Comment les couleurs transparentes sont-elles traitées ?

Une couleur de texte semi-transparente est mélangée à l’arrière-plan avant la mesure, comme le fait un navigateur à l’affichage. Un arrière-plan semi-transparent est d’abord mélangé au blanc. Le résultat indique les couleurs opaques du texte et de l’arrière-plan qui ont réellement été comparées.

### L’ordre des deux couleurs a-t-il de l’importance ?

Pour WCAG 2, non, car le rapport entre la luminance la plus claire et la plus sombre reste le même dans les deux sens. Pour l’APCA, oui, car le texte et l’arrière-plan sont pondérés différemment ; saisissez donc la couleur du texte dans le premier champ et celle de l’arrière-plan dans le second.

Votre publicité ici ?

[Envoyez-nous un e-mail](mailto:hi@dennn.is?subject=Publicit%C3%A9%20sur%20OneClick%20Pro)

[Annonce La suite de plugins prête pour les agents de WordPress.](https://sleekwp.com/?ref=oneclickpro)