Lors de la conception d'un site Web, comment savoir comment les utilisateurs voient les couleurs?

11

Lors de la conception d'un site Web, comment savoir comment les utilisateurs voient les couleurs? Je vois les couleurs du site Web différemment de mon Macbook et de mon ordinateur de bureau / ordinateur portable Windows. Surtout, je ne vois pas de couleurs claires sur le bureau, par exemple les bordures grises des tableaux sont invisibles.

Lequel dois-je prendre en compte lors de la conception? Suis-je capable de rendre tous les écrans assez similaires avec une solution de conception?

website-design color-conversion

— ahmet
source

Duplications liées et possibles: graphicdesign.stackexchange.com/questions/94401/…

— Vincent

1

Et juste pour ajouter à la confusion, près de 10% des personnes sont daltoniennes - mais au moins avec cela, il existe des extensions pour Chrome au moins qui vous permettent (en supposant que vous ne l'êtes pas) de voir à peu près à quoi cela ressemblera pour quelqu'un qui est ...

— Rycochet

... et au niveau de l'entreprise gamma / contraste + autres paramètres d'écran peuvent être partout sur les moniteurs dans une situation de bureau (votre client) lorsqu'ils sont configurés par le service informatique qui utilise souvent l'accès à distance et les paramètres de groupe pour contrôler les réseaux PC. Dans ma dernière entreprise, l'informatique était dans un autre pays avec peu de sympathie pour la conception - j'ai obtenu un accès administrateur et ajouté mon propre moniteur et configuration! Travailler selon les normes et éviter les extrêmes est la meilleure approche en notant que certains clients (comme le gouvernement) auront une accessibilité stricte - demandez cela à l'avance pour éviter des révisions inutiles

— Applefanboy

23

Réponse courte: non.

Réponse plus longue: il est littéralement impossible de prendre en compte tous les réglages et étalonnages d'écran, les circonstances et les (dés) capacités visuelles des téléspectateurs. C'est pourquoi il existe des directives pour, par exemple, le contraste du texte et son arrière-plan, afin de garantir une certaine facilité d'utilisation dans au moins la majorité des cas.

Mon flux de travail personnel comprend au moins deux moniteurs non calibrés et certains tests sur différents appareils mobiles dans différentes situations d'éclairage.

Le W3C a fait quelques directives sur l'utilisation de la couleur et du contraste nécessaire que vous pouvez lire ici . Personnellement, j'utilise cet outil de contraste pour le texte de Lea Verou pour vérifier si mes couleurs de texte obéissent aux directives ou sont au moins proches.

— Vincent
source

8

Je me demande si les gens du SE lisent ces directives. J'ai une assez bonne vision, mais le contraste entre l'arrière-plan et la couleur de surbrillance du lien sur de nombreux sites SE (y compris celui-ci) est médiocre.

— Barmar

1

J'aimerais pouvoir voter plus d'une fois! J'utilise moi-même une extension de navigateur Dark Reader, peu importe la beauté de votre site, je détruirai tout simplement pour le plaisir d'avoir une vue décente quand j'aurai cinquante ans!

— PieBie

Selon ce site Web, webaim.org/resources/contrastchecker , le contraste de couleur entre l'arrière-plan et les liens ne respecte pas les normes d'accessibilité sur ce site SE. Il est donc probablement prudent de supposer que les gens du SE ne lisent pas ces directives.

— ESR

2

Vous ne le faites pas et vous ne pouvez pas contrôler ou appliquer les mêmes paramètres sur le moniteur / appareil de chacun. Le mieux que vous puissiez faire est d'utiliser un profil de couleur sRGB lors de l'exportation d'images raster pour le Web.

sRGB est l'espace colorimétrique standard mondial pour la reproduction des couleurs sur le Web.

Cela vous aidera dans une certaine mesure, mais en fin de compte, les préférences de l'utilisateur décideront de la façon dont les images seront affichées sur son appareil. Évidemment, c'est pour les images raster, pas pour les autres éléments graphiques d'une page.

— Billy Kerr
source

Et calibrez vos écrans sur sRGB, afin qu'au moins vos écrans montrent ce que c'est censé être

— joojaa

Les commentaires ne sont pas pour une discussion approfondie; cette conversation a été déplacée vers le chat .

— Vincent

1

Les navigateurs et ordinateurs modernes ont aujourd'hui rarement des problèmes pour afficher les couleurs correctes (voir https://websafecolors.info/learn pour plus d'informations à ce sujet).

Il semble que ce soient les écrans eux-mêmes qui donnent aux couleurs une apparence différente. Cela pourrait être dû à la luminosité du moniteur, au contraste et aux paramètres de niveau de lumière bleue, et même à la technologie du moniteur elle-même, comme les LED et le type de panneau. Il n'y a aucun moyen d'appliquer des paramètres cohérents sur tous les écrans, ou même de lire leurs paramètres et d'ajuster le site Web.

Je recommanderais d'utiliser Inspect Element et de regarder le code hexadécimal des couleurs sur chaque plate-forme. S'ils sont identiques, vous savez que ce sont les écrans. La solution sera d'utiliser des couleurs plus contrastées les unes par rapport aux autres, afin qu'elles aient plus de chances de se démarquer sur tous les écrans. Alternativement, essayez des bordures plus épaisses, ou même des tables rembourrées sans bordure! La plupart des utilisateurs ont des écrans haute définition qui ouvrent de nombreuses possibilités pour la conception de tableaux, qui utilisent généralement du texte et une mise en forme d'une épaisseur d'un pixel.

— LloydTao
source

0

La réponse est non, car la couleur de l'ordinateur portable et celle du bureau ne sont pas les mêmes pour chaque ordinateur. Vous pouvez utiliser le code couleur si vous voulez vous assurer que la couleur est la même, par exemple, vous pouvez taper ce code dans css:

background-color: #D2B48C

— Sally_2891
source

2

Salut Sally, j'ai corrigé la police dans votre réponse, mais je ne sais pas exactement comment c'est une réponse à la question. Pourriez-vous élaborer?

— PieBie

Cela ne résout pas le problème réel. Le problème est que #D2B48C l' apparence sera différente sur différents moniteurs, et la question est de savoir comment résoudre ce problème.

— pipe