Police grise sur les sites Web - certaines si pâles qu'elles sont difficiles à lire. Quel est le brief de conception d'aujourd'hui sur la couleur de la police?
Quelle est la norme de conception pour la couleur des polices sur les sites Web?
Je trouve que l'utilisation du gris pâle rend une partie du texte extrêmement difficile à lire.
La lisibilité devrait également s'étendre à la possibilité de voir le texte clairement sans avoir à se pencher et plisser les yeux à l'écran.
Vous devriez vous référer au W3 sur l'accessibilité.
Pour les directives, reportez-vous aux directives w3 pour Comprendre SC 1.4.3: Contraste minimum
Ils se réfèrent à la section 1.4.3
Les personnes malvoyantes ont souvent du mal à lire un texte qui ne contraste pas avec son arrière-plan. Cela peut être exacerbé si la personne a une déficience de vision des couleurs qui réduit encore plus le contraste. Fournir un rapport de contraste de luminance minimum entre le texte et son arrière-plan peut rendre le texte plus lisible même si la personne ne voit pas la gamme complète de couleurs. Cela fonctionne également pour les rares individus qui ne voient aucune couleur.
La conception matérielle dispose également d'un outil de couleur qui juge la lisibilité lorsque vous sélectionnez du texte et des arrière-plans.
Comme article d'opinion, Wired a publié un bon article l'année dernière: Comment le Web est devenu illisible .
Un texte autrefois net et sombre a soudainement été éclairci en un gris pâle. Bien que l'âge ait en effet pesé sur ma vue, il s'avère que je souffrais d'une tendance design.
Un contraste suffisant est sur les 7 choses que chaque concepteur doit savoir sur l'accessibilité .
La norme pour l'accessibilité du Web est le Web Content Accessibility Guidelines (WCAG) 2.0, qui a plusieurs "critères de réussite" liés à la couleur et au contraste. Le critère de succès le plus fondamental lié au contraste des couleurs est SC 1.4.3 , qui dit:
La présentation visuelle du texte et des images de texte a un rapport de contraste d'au moins 4,5: 1, à l'exception des éléments suivants: (Niveau AA)
Grand texte: le texte à grande échelle et les images de texte à grande échelle ont un rapport de contraste d'au moins 3: 1;
Incident: le texte ou les images de texte qui font partie d'un composant d'interface utilisateur inactif, qui sont de la décoration pure, qui ne sont visibles par personne, ou qui font partie d'une image qui contient un autre contenu visuel important, n'ont aucune exigence de contraste.
Logotypes: le texte faisant partie d'un logo ou d'une marque n'a pas d'exigence de contraste minimum.
Le groupe cible principal de ce critère de réussite (SC) est les personnes ayant une déficience de la vision des couleurs, mais le respect de ce critère garantit également que le contraste n'est pas trop faible pour la population en général (ou au moins la plupart d'entre eux; voir également SC 1.4.6 , qui nécessite un rapport de contraste de 7: 1).
Le contraste insuffisant est un problème très fréquent, comme le souligne Julie Grundy dans son article Trois pièges courants en matière d'accessibilité pour les développeurs: le contraste des couleurs .
Il existe de nombreux outils pour vous aider à vérifier le contraste ou à trouver des combinaisons de couleurs accessibles, par exemple:
- WebAIM's Color Contrast Checker ,
- The Paciello Group Color Contrast Analyzer (gratuit et open source),
- Color Safe - combinaisons de couleurs Web accessibles .
- Spectre de contraste des couleurs de Joe Dolson (vous entrez une couleur et l'outil vous donne un spectre de couleurs avec leur rapport de contraste par rapport à la couleur que vous avez entrée).