Contraste des couleurs sur les réseaux sociaux : les règles WCAG en pratique

Le texte d'un post sur les réseaux sociaux doit avoir un rapport de contraste d'au moins 4,5:1 avec son arrière-plan, ou de 3:1 s'il s'agit de grand texte. Ce sont les chiffres de WCAG 1.4.3, et le W3C les énonce ainsi : 4,5:1 pour le texte normal et 3:1 pour un texte de 18 points ou plus, ou de 14 points en gras. WCAG est écrit pour le contenu web ; l'appliquer au texte de vos visuels Instagram ou LinkedIn est donc notre recommandation, pas une règle des plateformes.

Ci-dessous : la formule, ce que demande chaque niveau de WCAG, et des rapports mesurés sur de vrais rendus de notre marque de démonstration AURORA. Pour le système dans son ensemble, consultez notre guide des chartes de marque pour les petites équipes.

WCAG s'applique-t-il aux images des réseaux sociaux ?

Pas directement. WCAG couvre le contenu web, et un post du fil est une image dans l'application d'un tiers. Deux critères en font pourtant un repère raisonnable. Le 1.4.3 traite explicitement les « images de texte » comme du texte : un titre incrusté dans un PNG est donc soumis aux mêmes rapports qu'un texte réel. Et le 1.4.5 Images of Text (niveau AA) préfère le vrai texte aux images de texte, sauf quand la présentation est essentielle ou que l'image est personnalisable, les logotypes étant l'exemple classique.

D'après notre expérience, les réseaux sociaux permettent rarement de publier du vrai texte sur une image ; le 1.4.5 est donc la réserve honnête : un visuel contenant du texte est toujours un compromis. Notre recommandation : garder le texte court, répéter le message clé dans la légende, rédiger un texte alternatif, et faire quand même respecter le 1.4.3 aux pixels.

Quel rapport de contraste faut-il, par niveau ?

Critère	Niveau	Texte normal	Grand texte	S'applique à
1.4.3 Contrast (Minimum)	AA	4,5:1	3:1	Texte et images de texte
1.4.6 Contrast (Enhanced)	AAA	7:1	4,5:1	Texte et images de texte
1.4.11 Non-text Contrast	AA	3:1	3:1	Composants d'interface et graphiques nécessaires à la compréhension du contenu

Trois détails comptent en pratique :

• Aucun arrondi. Le W3C précise que les valeurs calculées ne sont pas arrondies : 4,499:1 ne satisfait donc pas 4,5:1.
• Exemptions. Les logotypes, le texte purement décoratif, les commandes inactives et le texte accessoire dans des photos contenant d'autres éléments visuels sont exemptés.
• Graphiques. Une icône, une courbe de graphique ou un contour de bouton porteur de sens a besoin de 3:1 par rapport à ce qui l'entoure selon le 1.4.11, tandis que le texte à l'intérieur du graphique est jugé selon le 1.4.3.

Le grand texte se définit en points, que n'a pas un PNG. Notre hypothèse de travail pour un visuel de 1080 px : considérez comme grand un titre nettement grand sur un écran de téléphone, et tout le reste, en particulier les petits surtitres et les pieds de visuel, comme du texte normal qui demande 4,5:1.

Comment calcule-t-on le rapport de contraste ?

La formule vient des définitions de WCAG. Convertissez chaque canal 8 bits en une valeur de 0 à 1, linéarisez-la (divisez par 12.92 si la valeur est au plus 0.04045, sinon élevez (valeur + 0.055) / 1.055 à la puissance 2.4), puis pondérez : luminance relative L = 0.2126 R + 0.7152 G + 0.0722 B. Le rapport est (L1 + 0.05) / (L2 + 0.05), où L1 est la couleur la plus claire. Blanc pur sur noir pur donne 21:1, le maximum.

Le vert porte l'essentiel du poids, ce qui explique que le vert vif et le jaune paraissent clairs, et qu'un vert saturé puisse avoir du punch tout en échouant sur du blanc. WebAIM dit la même chose : le contraste tient à la différence de luminance, pas à la différence de teinte.

Que mesurent les rendus conformes ?

Nous avons rendu quatre modèles de la marque de démonstration AURORA à leur taille native, puis calculé les rapports avec la formule ci-dessus à partir des valeurs de la palette de la marque et de pixels échantillonnés dans les PNG.

Quasi-noir #0A0A0A sur blanc cassé #FAFAF7 mesure 18,93:1. La petite étiquette grise du pied utilise #6F6F6F, et ses pixels échantillonnés ont mesuré 4,81:1 par rapport au fond. Cela dépasse 4,5:1 de justesse, et c'est un texte minuscule : c'est le seul élément de ce post que nous garderions à l'œil.

Celui-ci associe le quasi-noir à deux aplats clairs différents. Le titre, la petite étiquette PASS et le texte blanc cassé de la pastille sur noir mesurent tous 18,93:1 dans les pixels échantillonnés. Le petit logotype AURORA se trouve sur le bloc vert, et quasi-noir sur vert #00D084 mesure 9,76:1. Le vert est un bon aplat pour du texte sombre et une mauvaise couleur pour le texte lui-même ; la paire inverse, vert sur quasi-noir, donne les mêmes 9,76:1 par symétrie de la formule.

Le texte sur un dégradé n'a pas un rapport unique, mesurez donc le pire endroit. WebAIM note que WCAG ne donne aucune méthode pour les dégradés et suggère de tester la zone au contraste le plus faible. Le titre repose ici sur une carte givrée ; en échantillonnant chaque pixel de fond en dessous, le rapport le plus bas relevé se situait entre environ 15 et 17, et le petit surtitre placé sur une zone plus verte se trouvait vers le bas de cette plage.

L'opacité réduit elle aussi le contraste. Ce modèle règle le texte courant à 75 % d'opacité ; la couleur de texte obtenue par mélange a mesuré plus de 7:1 sur le fond pêche, donc encore largement au-dessus de 4,5:1.

Texte	Arrière-plan	Rapport	4,5:1	3:1
Quasi-noir #0A0A0A	Blanc cassé #FAFAF7	18,93	Réussi	Réussi
Gris atténué #6F6F6F	Blanc cassé #FAFAF7	4,81	Réussi	Réussi
Quasi-noir #0A0A0A	Vert #00D084	9,76	Réussi	Réussi
Vert #00D084	Quasi-noir #0A0A0A	9,76	Réussi	Réussi
Titre et surtitre sur la carte à dégradé (plus bas relevé)	Dégradé givré	environ 15 à 17	Réussi	Réussi
Texte courant à 75 % d'opacité	Dégradé de pêche à rose	plus de 7	Réussi	Réussi

Quelles combinaisons de notre palette échouent ?

Les quatre rendus sont conformes parce que les couleurs des modèles sont verrouillées sur une palette vérifiée une fois, et non à chaque fois que quelqu'un écrit un post. Nous n'avons pas rendu de post en échec : le moteur ne laisse jamais un membre choisir une mauvaise couleur, et c'est tout l'intérêt. Mais la même palette contient des paires qui échoueraient si quelqu'un les utilisait, calculées avec la même formule :

Texte	Arrière-plan	Rapport	4,5:1	3:1
Blanc #FFFFFF	Vert #00D084	2,03	Échec	Échec
Blanc cassé #FAFAF7	Vert #00D084	1,94	Échec	Échec
Vert #00D084	Blanc cassé #FAFAF7	1,94	Échec	Échec
Orange #FF6B35	Blanc cassé #FAFAF7	2,71	Échec	Échec
Gris atténué #6F6F6F	Rose #FFB3D1	3,02	Échec	Réussi

La ligne du blanc sur vert est le piège habituel. Un texte blanc sur un vert de marque éclatant paraît correct sur un bon écran et échoue de plus de moitié. Les couleurs d'accent vives s'utilisent mieux en aplat sous du texte sombre, comme dans le bloc vert du rendu ci-dessus.

Comment vérifier le contraste de vos propres visuels ?

1. Notez chaque paire texte et arrière-plan de votre modèle, y compris les étiquettes, les pieds et le texte des boutons.
2. Calculez chaque rapport avec la formule ci-dessus ou n'importe quel vérificateur de contraste WCAG, avec des valeurs hexadécimales exactes, jamais à partir de captures d'écran d'images compressées.
3. Exigez 4,5:1 pour le texte normal. N'admettez 3:1 que pour un texte nettement grand sur un téléphone.
4. Pour du texte sur des dégradés ou des photos, mesurez le pire point sous le texte, ou placez derrière un panneau plein ou semi-opaque.
5. Vérifiez l'opacité : une couleur de texte à 60 % est une autre couleur.
6. Ne comptez pas sur la seule couleur pour porter le sens, par exemple rouge contre vert pour mauvais et bon (WCAG 1.4.1 Use of Color).
7. Revérifiez quand la palette de la marque change, pas quand un post est écrit.

C'est la typographie qui détermine quel texte compte comme grand : lisez donc ensuite notre guide de la typographie pour les posts sur les réseaux sociaux et consultez nos principes de mise en page pour les visuels de réseaux sociaux pour placer du texte sur des zones chargées. Si vous voulez que la vérification soit intégrée au flux de travail, Chikaboom verrouille les couleurs des modèles pour que les membres saisissent le texte sans les modifier ; vous pouvez l'essayer dans la démo en direct.