Pourquoi ne pas utiliser du noir pur (# 000) et du blanc pur (#FFF)?


17

Une nouvelle barre supérieure pour Stack Exchange indique,

La première chose que vous remarquerez est qu'il est vraiment noir* .

* Jin souligne que techniquement ce n'est pas tout à fait noir: c'est # 212121.

Dans son CSS, je vois,

background: #2f2f2f;
background: rgba(0, 0, 0, 0.8);

Pourquoi pas «vraiment noir»: pourquoi «pas tout à fait noir» est-il meilleur?

De même, pour le reste de l'arrière-plan, je vois quelque chose comme,

background: #fdfdfd

Pourquoi pas du blanc pur?

Je ne pose pas de question sur StackExchange en particulier - ce que je veux dire, est-ce une bonne règle générale pour tous les sites Web: lorsque les spécifications de conception semblent demander du noir ou du blanc, dois-je utiliser presque du noir et du blanc au lieu de vraiment noir et blanc?

Cette «règle» s'applique-t-elle également à d'autres couleurs (quelle est exactement la règle)?

La règle dépend-elle du périphérique?


Google utilise toujours des arrière-plans d'un blanc pur.
Pacerier

Réponses:


18

Bref, c'est doux pour les yeux;

«En termes simples, le contraste est la différence entre deux couleurs. Sur une page Web, la quantité de contraste requise varie selon les différentes parties de la page. Vous souhaitez généralement un contraste élevé entre le texte et sa couleur d'arrière-plan. Mais un contraste trop élevé entre les éléments de conception peut donner une impression instable et désordonnée. Le noir et le blanc créent le contraste le plus élevé possible. » -Citation d' ici

Ceci est un excellent site pour les suggestions / exemples de couleurs UX et la théorie. Et discute du contraste des différentes couleurs sur le fond, donnant même le code hexadécimal qui est assez pratique.

Le contraste et l'équilibre des couleurs sont également abordés ici .

Cela semble également être un style qui a tendance à être parce que le contraste plus faible entre les bckgrounds rend le contraste du texte un peu plus agréable (à mon avis) comme on le voit avec la couleur ici et ici Ces échantillons sont plus pour regarder la couleur que leur contenu dans termes de ce que je veux communiquer ici.

Ce n'est pas nécessairement une règle plutôt une préférence ou un style. Cela dépend plus du contenu que de l'appareil. Il s'agit de l'endroit où vous souhaitez avoir le plus d'emphase ou de concentration - où que ce soit, c'est là où il devrait y avoir le plus de contraste. Dans le cas de StackExchange, tout tourne autour des questions et des réponses, donc le corps est là où il y a le plus de contraste, car c'est là qu'il est le plus pertinent.

Bonne chance avec vos choix de couleurs à l'avenir, c'est une autre considération à prendre en compte: D


1
Je me rends compte que les réponses ici doivent être courtes, alors merci d'avoir utilisé les vôtres pour fournir des liens pour une lecture plus approfondie (je suis un novice complet).
ChrisW

Heureux de vous aider (ne serait-ce qu'un peu). La réponse à cette question comprend 3 éléments principaux: la théorie des couleurs, les préférences / le style et la conception UX. Il est impossible de couvrir chacun à 100% dans une seule réponse (comme vous l'avez mentionné). Je voulais donc juste vous donner la réponse courte à côté d'une idée de ce qu'il faut explorer.
Jenna

6

Une barre supérieure noir pur serait très frappante sur le fond blanc utilisé par de nombreux sites Web, ce qui est mauvais car l'accent devrait être mis sur le contenu plutôt que de attirer l'œil vers le haut de l'écran. Le rendre plus clair (gris) réduit le contraste entre la barre supérieure et l'arrière-plan du corps.

Cependant, un arrière-plan gris sur n'importe quoi gêne la lisibilité en réduisant le contraste possible entre le texte et l'arrière-plan. L'œil humain est le plus sensible aux différences de luminosité, donc choisir un gris à 50% signifie que quelle que soit la couleur du texte que vous choisissez, vous utilisez au plus la moitié de la différence de luminosité que l'écran de l'utilisateur peut produire.

Par conséquent, je pense que le choix du noir à 80% est un compromis entre rendre la barre supérieure moins choquante et préserver le contraste à l'intérieur.

Pour le corps du texte, vous généralement ne voulez utiliser le noir pur sur un fond clair, afin de maximiser le contraste et donc la lisibilité. (Cela s'applique à la fois à l'écran et à l'impression.) Notez que la couleur d'arrière-plan du corps ne diffère du blanc pur que d'un tout petit peu. En général, les sites Web choisissent souvent des arrière-plans qui sont très légèrement blancs. L'un des objectifs est de rendre le site plus chaud ou plus frais en choisissant un rose pâle ou un bleu (ici, c'est un gris neutre).


Sur ce site, même la div.post-textcouleur de premier plan est color: #111;au lieu du noir pur. Pourquoi ne pas laisser la lisibilité ou la luminosité de l'écran au navigateur / appareil / utilisateur par défaut pour l'optimiser?
ChrisW

0

À mon avis ... Juste de la mode, des tendances.

Si l'utilisateur sent que les pages Web lui font mal aux yeux, il peut simplement régler la luminosité de l'écran. Dans les appareils mobiles, les gens le font tout le temps.

Il y a une tendance des images "vintage". Faible saturation, délavé.

Le look délavé peut rendre le point le plus sombre ou / et le point blanc gris.

https://www.google.com/search?q=vintage+photos&client=firefox-b-ab&dcr=0&source=lnms&tbm=isch&sa=X&ved=0ahUKEwjb04iVr6vYAhUj94MKHQ3nBfQQ_AUICigB&biw=197&bih

Non seulement en photos, mais aussi en vidéos ... y compris les vidéos "happy".

https://www.youtube.com/watch?v=9HjrFnKEE8w

Il est vrai que beaucoup de contraste peut être gênant, fond particulièrement sombre avec du texte blanc ... Rappelez-vous le webdesign des années 90 , avec des arrière-plans noirs et des gifs animés sursaturés ...

La tendance est d'avoir des sites web plus "conviviaux", plus "intimes" donc c'est de la douceur. Il peut également donner un look plus "cinématographique", au lieu d'un look "TV".

Une tendance opposée aux images est le « look Hdri » ou le style draggan, par exemple, qui accentue le contraste et le micro contraste.

Dans certains cas, une image délavée peut donner l'apparence d'une plage dynamique plus interne, par rapport au contraste amélioré avec mise en correspondance des tons d'une vraie image à plage dynamique élevée.


De plus, si toute votre palette est en quelque sorte limitée, vous pouvez tromper l'équilibre automatique de votre œil. Menant à votre plage dynamique plus élevée. Les peintres l'utilisent tout le temps.
joojaa

1
Ce n'est tout simplement pas une réponse valable. La science autour du contraste, en utilisant le noir, en utilisant le blanc, c'est juste que - la science, pas l'opinion.
Mike Earley
En utilisant notre site, vous reconnaissez avoir lu et compris notre politique liée aux cookies et notre politique de confidentialité.
Licensed under cc by-sa 3.0 with attribution required.