CODEWITHSUNDEEP
htmlcsscolors
user2058002
user2058002

Reputation:

Accounting for colour difference across monitors

I'm not sure if there's another category for this question so please move it if you feel it's appropriate elsewhere.

I have a subtle gray border on my website. To me, it looks nice on my screen. However, I've tested it on other screens at friends' houses and libraries, and often it looks either too dark (making it look ugly) or too light (making it virtually invisible).

I'm using HTML/CSS. Is there any way to account for this?

Upvotes: 4

Views: 418

Answers (2)

ZZ-bb
ZZ-bb

Reputation: 2167

You can calibrate you monitor but you never know how someone else sees your site. Two main points are:

  1. You don't know how good (or poor) monitors your audience have, and if they are properly calibrated.
  2. You don't know if all your audience have perfect vision so they can detect subtle color changes (if the monitor is capable of displaying the changes in the first place). Also, maybe some of your site's visitors are color blind in one way or another.

If we assume that people have at least somewhat decent (uncalibrated) monitors, we can check site for readibility and accessbility by evaluating the color contrast of our sites. You should never use subtle color changes to change the semantic meaning of your site's text – poor monitors and/or poor eyesight must be taken account.

Visual sites for displaying photographs or artwork is a different story. Not sure do you want to impress everybody with subtle color changes or do you know that your audience is kind of people who have great monitors. I guess not since you tested your color choices ny using random computers: that's how random people see your site, one after another (eyesight not taken into account).

Just google for example "color contrast analyzer". Couple of random hits below.

And an article.

And something to remind us of the colorblind folk.

This is important so I'll say it again: You never know how people see your site. You just have to make sure that everything is readable and accessible.

If you are concerned of othet people's monitors you could provide them links or test images, so they can see if their monitor is capable of showing subtle color changes. For example Dpreview has a test image on every review page. This is acceptable for technical sites but it could ruin the user experience on artistic sites. Idea for test images may be found from Lagom's pages. All this is useful to enhance the artistic experience of the site – i.e. user knows he sees the deepest blacks of artwork, not just plain black where there should be color changes – but the acutal (textual) information should always be clear and visible (contrast ratio between text and backgroud must be sufficient). See for example:

Just for fun. Test yourselves:

Google "color blind test" for more.

Accessibilty is another topic (besides just color talk). Few additional links for people who need to code sites for people who use screen readers etc. (BTW, it's my understanding that in the US government sites have to conform section 508: http://www.section508.gov/. No such thing here in Finland, and our public sector sites suck big time, not just accessibilitywise...)

Final thoughts. Separating content from presentation is the key to (almost) everything. Do not use tables for layout, do not use inline HTML styles: Use CSS. Write valid HTML code and do not use popups and fancy effects. At least don't rely on them (and there's always an exception to the rule...). Keep graceful degradation in mind: http://accessites.org/site/2007/02/graceful-degradation-progressive-enhancement/

Sorry for the (almost offtopic) update rant. Let's just not desing cool web pages, let's make sure that the content is available to everyone.

Upvotes: 3

Rory Hunter
Rory Hunter

Reputation: 3460

As I understand it, when professionals are doing colour-sensitive work, they have to calibrate their monitors so that they can be sure about what they are seeing. Unless you can trace the colour differences that you're seeing to particular operating systems or browsers, I don't think there's much you can do (unless you want to get your users to do in-browser calibration and dynamically adjust your colours!).

Upvotes: 1

Related Questions