11

When designing a website, how do I know how users see the colors? I see the colors of the website differently from my Macbook and Windows desktop/notebook. Especially I can’t see light colors on desktop, e.g. gray borders of tables are invisible.

Which one should I care about when designing? Am I able to make all of screens quite similar with a designing solution ?

  • Related and possible duplicate: graphicdesign.stackexchange.com/questions/94401/… – Vincent Aug 7 '17 at 11:53
  • 1
    And just to add to the confusion, almost 10% of people are colourblind - but at least with that there are extensions for Chrome at least that let you (assuming you're not) see roughly what it'll look like to someone who is... – Rycochet Aug 7 '17 at 12:01
  • ...and at enterprise level gamma / contrast + other screen settings can be all over the place on monitors in an office (your client) situation when set up by IT who often use remote access and group settings to control PC networks. At my last company, IT were in a different country with little sympathy for design - I gained Admin access and added my own monitor and set-up! Work to standards and avoid extremes is the best approach noting that some clients (like Government) will have strict accessibility - ask this up front to avoid unnecessary revisions – Applefanboy Aug 11 '17 at 10:44
23

Short answer: you don't.

Longer answer: it's literally impossible to take into account all screen settings and calibrations, circumstances and visual (dis)abilities of viewers. That is why there are guidelines for, for example, contrast of text and it's background, to guarantee some usability in at least a majority of cases.

My personal workflow includes at least two uncalibrated monitors and some testing on different mobile devices in different lighting situations.

The W3C has made some guidelines about use of colour and necessary contrast which you can read here. Personally, I use this contrast tool for text by Lea Verou to check whether my text colours obey the guidelines or are at least close.

  • 8
    I wonder if the SE folks read those guidelines. I have pretty good vision, but the contrast between the background and the link highlight color on many SE sites (including this one) is poor. – Barmar Aug 7 '17 at 14:37
  • 1
    I wish I could upvote this more than once! I myself use a dark reader browser extension so no matter how pretty your site is, I will utterly destroy is just for the sake of still having decent eyesight when I'm fifty! – PieBie Aug 7 '17 at 15:05
  • According to this website, webaim.org/resources/contrastchecker, the color contrast between the background and links fails accessibility standards on this SE site. So probably safe to assume the SE folks do not read such guidelines. – ESR Aug 8 '17 at 2:58
2

You don't, and you can't control or enforce the same settings on everyone's monitor/device. The best you can do is to use an sRGB colour profile when exporting raster images for the web.

sRGB is the worldwide standard colour space for colour reproduction on the web.

This will help to a degree, but ultimately a user's own preferences will decide how images are viewed on their device. Obviously, this is for raster images, not other graphical elements on a page.

  • And calibrate your displays to sRGB, so atleast your displays are showing what it is supposed to be – joojaa Aug 7 '17 at 12:07
  • Comments are not for extended discussion; this conversation has been moved to chat. – Vincent Aug 7 '17 at 19:49
1

Modern browsers and computers today rarely have problems displaying the correct colours (see https://websafecolors.info/learn for some info on that).

It seems like it might be the displays themselves that make colours appear differently. This could be due to monitor brightness, contrast and blue-light-level settings, and even due to the monitor's technology itself such as LED and panel type. There is no way to enforce consistent settings across displays, or to even read their settings and adjust the website.

I would recommend using Inspect Element and looking at the hex code of the colours on each platform. If they are identical, then you know it's the displays. The solution will be to use colours with more contrast to each other, so that they have a greater chance of standing out on all screens. Alternatively, try out thicker borders, or even borderless padded tables! Most users have high-definition screens which opens up a lot of possibility for table design, which typically uses pixel-thick text and formatting.

0

The answer is no, because the laptop color and the desktop color not same for each computer. You can use the color code if you want to make sure the color is same, for example, you can type this code in css:

background-color: #D2B48C
  • 2
    Hi Sally, I've fixed the font in your answer, but I don't exactly know how this is an answer to the question. Could you elaborate? – PieBie Aug 7 '17 at 15:04
  • This does not solve the actual problem. The problem is that #D2B48C will look different on different monitors, and the question is how to solve that. – pipe Aug 8 '17 at 7:50

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.