Graphic Design Stack Exchange is a question and answer site for Graphic Design professionals, students, and enthusiasts. It only takes a minute to sign up.
Sign up to join this community
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 ?
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.
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.
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.
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
#D2B48C will look different on different monitors, and the question is how to solve that.