Palette de couleurs de base pour une grande lisibilité
Existe-t-il de bonnes recommandations pour la palette de couleurs du site Web qui offrent une bonne lisibilité
par exemple.
body text color (body)
main heading color (h1)
sub heading color(h2, h3 etc)
background color
border color
line height
font type
margin
padding
etc?
Si vous souhaitez considérer les utilisateurs ayant des exigences visuelles et/ou cognitives particulières, cela devient assez compliqué et il n'y a pas de réponse unique. Les directives de création de contenu Web (WCAG) de la W3C Web Accessibility Initiative fournissent un bon point de départ . C'est probablement la ressource la plus étudiée sur l'accessibilité du Web, bien qu'elle ne soit pas totalement controversée.
Les considérations les plus importantes pour tous les utilisateurs sont le contraste et la taille du texte. Le contraste (rapport de luminosité) entre le texte et l'arrière-plan est recommandé d'être d'au moins 4,5: 1 ( exemples ). La taille du texte ne doit pas être inférieure à celle par défaut de l'utilisateur.
Certaines personnes trouvent texte noir sur fond jaune pâle plus facile à lire. D'autres ne peuvent pas du tout lire les schémas sombre sur la lumière (par exemple à cause du colobome uvéal) et voudront du texte blanc sur noir. Un texte plus gros est toujours plus facile à lire, mais il réduit la quantité de texte que vous pouvez afficher, ce qui peut irriter les utilisateurs ayant une bonne vue.
En bref, vous ne pouvez pas plaire à tout le monde avec un seul design, et pour cette raison, le conseil général pour les pages Web est d'honorer autant que possible les valeurs par défaut de l'utilisateur, donc si un utilisateur a besoin d'un texte vert de 40 points sur un fond marron, ils peuvent choisir cela par eux-mêmes.
En vérité, très peu de sites Web sont vraiment accessibles à tous. C'est beaucoup de travail à mettre en œuvre, et beaucoup plus de travail à maintenir, et parfois il suffit de travailler avec des utilisateurs individuels pour résoudre leurs problèmes. Mais cela vaut la peine d'être conscient des différents utilisateurs, et vous devriez au moins éviter les problèmes les plus courants:
- N'utilisez jamais d'arrière-plans complexes ou à faible contraste
- N'utilisez jamais de petit texte (moins que l'équivalent de 12 pt)
- N'utilisez jamais d'images pour afficher du texte
- Si quelque chose semble un peu difficile à lire, il est probablement impossible à lire pour certains utilisateurs.
Notez également que les colonnes, les menus, les barres latérales, les annonces, etc. peuvent rendre le texte beaucoup plus difficile à lire. Personnellement, je dirais que le corps du texte doit avoir au moins un pouce d'espace blanc autour.
Quelques règles d'or:
J'ai recommandé de fournir au moins deux thèmes - sombre à la lumière et clair à sombre car certains utilisateurs peuvent ne pas être en mesure de lire l'un des deux. Pour la lumière sur l'obscurité, assurez-vous que le contraste n'est pas trop élevé (par exemple, utilisez le gris sur le noir, pas le blanc sur le noir).
Assurez-vous que le contraste entre l'intensité du premier plan et l'intensité de l'arrière-plan est toujours suffisamment élevé (voir directives W3C , ou mon explication détaillée ici ).
Gardez l'arrière-plan aussi lisse que possible avec le moins de variations de couleurs possible pour éviter de distraire les utilisateurs du premier plan.
Si vous utilisez une couleur différente pour les marges que vous utilisez pour l'arrière-plan, n'utilisez pas une différence de contraste élevée entre l'arrière-plan et la marge.
Laissez des espaces entre les paragraphes, évitez les longs paragraphes.
Utilisez une police propre (par exemple Calibri ou Arial) pour le corps et tout autre texte non volumineux.
Assurez-vous que l'ordre des éléments dans le code HTML a du sens pour quelqu'un qui ne peut pas voir l'écran (pour les utilisateurs utilisant un lecteur d'écran).
N'utilisez pas d'images au lieu de texte (pour les utilisateurs utilisant un lecteur d'écran).
Texte ALT du fournisseur pour les images (pour les utilisateurs utilisant un lecteur d'écran).
Je sais que beaucoup de gens peuvent se moquer de l'idée, mais jetez un œil à Twitter bootstrap pour un guide. Beaucoup de temps et de ressources ont été consacrés à ce projet pour rendre les valeurs par défaut sensibles et lisibles sur plusieurs appareils.
Si vous n'êtes pas préoccupé par la beauté/la laideur, essayez d'imiter les schémas de couleurs à contraste élevé de Windows.