Pourquoi un texte courant en 14px ne peut jamais passer APCA

La première fois qu’un outil de contraste vous annonce qu’un texte noir sur fond blanc échoue, vous supposez que l’outil est cassé. En général, il ne l’est pas. Si le texte fait 14px en graisse normale, APCA le juge inutilisable, quelles que soient les couleurs choisies.

Cela surprend assez pour mériter une vraie explication.

Le contraste ne dépend pas que de la couleur

WCAG 2 traite le contraste comme une propriété de deux couleurs. Donnez-lui un premier plan et un fond, il renvoie un rapport, sans rien savoir de la façon dont le texte sera composé.

APCA traite le contraste comme une propriété de deux couleurs et de la forme des glyphes rendus dans ces couleurs. C’est plus proche du fonctionnement de la vision. Ce qui atteint votre œil n’est pas une paire de couleurs abstraite, c’est une quantité d’encre disposée en traits. Des traits fins à petite taille en apportent très peu, et l’anticrénelage les éclaircit encore sur les bords.

Les seuils d’APCA suivent donc la typographie. Sa table de référence donne, pour chaque niveau de contraste, la taille de police minimale utilisable dans chaque graisse :

Lc	Graisse 300	Graisse 400	Graisse 500	Graisse 700
90	21px	16px	15.5px	14px
75	24px	18px	16px	14px
60	42px	24px	21px	16px
45	72px	42px	32px	24px

Suivez la colonne de la graisse 400. À Lc 90, soit presque le maximum possible, puisque le noir pur sur blanc pur donne Lc 106, la plus petite taille utilisable est 16px.

Aucune ligne ne fait apparaître 14px en graisse 400. Augmenter le contraste n’y changera rien, car 16px est déjà le plancher au contraste le plus élevé que l’écran puisse produire.

Ce que vous pouvez faire à la place

Passez à 16px. C’est la solution la plus simple, et celle que la plupart des textes courants devraient adopter de toute façon. 16px est la valeur par défaut raisonnable pour le texte courant depuis une dizaine d’années.

Gardez 14px et augmentez la graisse. Regardez la colonne de la graisse 700 : 14px y est utilisable à Lc 90 et à Lc 75. Un libellé de 14px en gras avec un contraste élevé convient à APCA. C’est souvent la bonne réponse pour les libellés d’interface quand l’espace vertical est vraiment compté.

Demandez-vous si cela doit vraiment être du texte. Un horodatage de 14px en gris clair que personne ne peut lire ne transmet aucune information. Soit il compte, et il faut le rendre lisible, soit il ne compte pas, et il faut le supprimer.

Le corollaire qui dérange

Une fois la table acceptée, beaucoup de conventions d’interface courantes deviennent indéfendables.

Le libellé en capitales de 11px ou 12px, dans un gris atténué, est partout dans les design systems modernes. Selon APCA, un texte de 12px en graisse 400 n’a aucun contraste suffisant, et même en graisse 700, il lui faut un Lc extrêmement élevé. Nous avons appliqué cette vérification à notre propre interface pendant la construction de ce site, et nous avons dû faire passer nos libellés de 11px à 13px et augmenter leur graisse. L’outil a trouvé le problème dans sa propre interface.

Le texte d’exemple (placeholder) est l’autre fautif habituel : petit, clair, et souvent le seul libellé dont dispose un champ.

WCAG 2 n’a pas tort, elle est seulement incomplète

Cela signifie que WCAG 2 est incomplète sur cet axe précis, ce que ses auteurs savaient. Modéliser la taille et la graisse en 2008 aurait exigé des données et des calculs qui n’étaient pas réalistes à l’époque. Un rapport entre deux luminances était une approximation raisonnable, et elle a fait énormément de bien.

Mais vous devez savoir ce qu’elle ne voit pas. Une légende de 12px et un titre de 32px dans les mêmes couleurs obtiennent le même score WCAG, et un seul des deux est lisible.

Que faire en pratique

Continuez à consigner le rapport WCAG, car c’est sur lui que se mesure la conformité. Servez-vous d’APCA pour vérifier que le texte peut réellement être lu à la taille à laquelle vous le mettez en ligne.

Et quand APCA recale une paire de couleurs à petite taille, résistez au réflexe de foncer la couleur. Consultez d’abord la table. Très souvent, la réponse n’est pas une autre couleur : c’est 2px de plus, ou une graisse au-dessus.

Notre vérificateur de contraste indique les deux valeurs à la taille et à la graisse choisies, et lorsqu’une taille est inutilisable quel que soit le contraste, il le dit clairement au lieu d’afficher un échec que vous ne pourriez pas corriger avec la couleur.