web-dev-qa-db-fra.com

Dans quelle mesure deux couleurs doivent-elles être distinctes pour apparaître distinctes à l'œil humain?

J'étais en train de regarder l'onglet "Réputation" dans Stackoverflow et il m'est venu à l'esprit que le jaune utilisé pour mettre en évidence les nouvelles entrées ne se démarque pas beaucoup du fond blanc. Je dois vraiment baisser les yeux pour voir la différence.

enter image description here

Cela m'a fait réfléchir: existe-t-il une règle pour savoir si deux couleurs vont apparaître suffisamment distinctes aux yeux de l'utilisateur? Par exemple, alors que #FFFFFE et #FFFFFF sont deux couleurs différentes, il est évident qu'il n'y aura pas de différence notable à l'œil humain. En général, à quel moment savons-nous que deux couleurs vont apparaître clairement différentes?

12
laurent

Il y a un outil pour vérifier le contraste des couleurs conformément à une spécification par le W3C pour déterminer s'il y a assez de contraste "lorsqu'il est vu par quelqu'un ayant des déficits de couleur ou lorsqu'il est vu sur un noir et écran blanc ".

Il s'agit d'un brouillon de travail mais aussi proche d'une norme que sur le Web.

Dans ce cas, vous devez tester le contraste entre les différentes couleurs utilisées. Disons que nous voulons utiliser les couleurs suivantes:

 - ForegroundColor1 
 - BackgroundColor1
 - BackgroundColor2

Définissez ensuite les contrastes souhaitables:

 - ForegroundColor1 <> BackgroundColor1 = Contrast Ratio 9
 - ForegroundColor1 <> BackgroundColor2 = Contrast Ratio 9
 - BackgroundColor1 <> BackgroundColor2 = Contrast Ratio 1.5

Le contraste à utiliser entre les couleurs est la volonté du concepteur, en tenant compte du respect de la spécification entre les couleurs de premier plan et d'arrière-plan (rapport de contraste minimum de 4,5) et d'un contraste suffisant pour les couleurs d'arrière-plan - ce que la spécification W3C ne couvre pas.

Si vous me demandez, les couleurs d'arrière-plan ne devraient pas être trop contrastées. S'il est vu en noir et blanc, aucun arrière-plan en surbrillance n'est mieux que d'avoir du mal avec le premier plan.

5
Naoise Golden

Il n'y a pas de réponse définitive à cette question.

Il y a tellement de choses qui échappent à votre contrôle et/ou à vos connaissances en tant que concepteur que vous ne pouvez pas avoir de "règle" pour dire à quelle distance deux valeurs de couleurs RVB doivent être éloignées. Quelques points à considérer:

  • La qualité, le type et les paramètres (luminosité, etc.) de l'écran de votre ordinateur affectent beaucoup cela ( consultez les conseils d'Atwood ). Ce facteur peut être annulé si vous contrôlez le support (par exemple, les écrans d'ordinateur) utilisé, ce qui est rarement le cas pour les applications en ligne.
  • daltonisme peut également être un facteur (gardez à l'esprit: certaines personnes - en particulier les hommes - ne sont que "un peu" daltoniennes)
  • Les données démographiques de votre base d'utilisateurs sont probablement aussi importantes (en particulier l'âge, j'imagine).
2
Jeroen

Cela fait une énorme différence qu'il s'agisse de couleurs adjacentes (qui incluent des contrastes d'arrière-plan) ou de couleurs non adjacentes. Nos yeux sont très sensibles à percevoir une différence entre les couleurs adjacentes. Mais nous sommes très pauvres pour reconnaître un match non adjacent.

Les différences de couleur dans les couleurs adjacentes peuvent être exprimées en delta-E . 1 delta-E est la plus petite différence de couleur que nos yeux peuvent percevoir. Plus le delta-E est élevé, plus le contraste est élevé et plus la différence est visible. Si vous possédez un ColorMunki, il pourra vous dire instantanément le delta-E de deux couleurs.

En ce qui concerne les couleurs non adjacentes, aucune mesure ou calcul ne peut être pris pour acquis, car cela dépend beaucoup de l'environnement de la couleur. Cela peut même aller jusqu'à percevoir une seule et même couleur que le blanc ou le noir , selon ...

1
Igor Asselbergs