The importance of Color Accuracy and Monitors for web crafting

[Melooon]

This is more of an informational topic than a discussion, but feel free to discuss, I'm sure there's lots to add!

If you are getting into web crafting as a more serious hobby, one of the REALLY important things to be aware of is colour accuracy; I would argue that colour control is more important than coding knowledge for creative web design 

What is colour accuracy?

Simply put, colour accuracy is how accurately colours are displayed on your screen. Most screens display colours differently, so you might think that #ff4a52 is a nice orange, when in fact it's a deep ember red! Colour accuracy is the ability of your computer to display colours as close to their true value as possible.

Why the heck does colour accuracy matter??

You might ask, why does it matter if everyone's screen is gonna display colours differently anyway! Well, small errors add up to BIG errors. If you incorrectly see #ff4a52 as orange (when it's actually ember red), then someone else might see it as dark red! Whereas if you had picked a true orange tone like #ff7f50, that same person might see it as orangy-red (which is much closer to what you wanted!). You want your colours to be accurate to minimise the degree of error that others will see.

It all adds up! Back in 2019, I was using a gaming monitor to update my site (despite being a high-spec monitor it had VERY poor colour accuracy) - I did a whole redesign on my site, with all sorts of exciting poppy colours, cool high contrast bits, images that Id modified and created etc - It looked GREAT on my screen.. but when I looked at it on someone else's, it was a muddy mess, it was genuinely awful and it ruined the mood of my site - I had to undo everything from that update.

In contrast; I started taking colour accuracy much more seriously in 2021, this forum and all my other sites are all built to a high degree of colour accuracy - and for the most part, they still look how they were intended to look, even when tested on very low-accuracy screens that show significantly different tones (e.g. the headers on this forum should be bright-purple, whereas many low accuracy displays show a dull-pink, but that still has the right mood!)

What can I do to improve my colour accuracy?

For websites, the key value you wanna look for is the sRGB rating, ideally, 100% sRGB is what you want from a web design-focused screen. (The reason we use sRGB is that it's the lowest common denominator for colour range, so it will suit the widest audience/range of devices viewing your site) You can look up your laptop/monitor specs to get this value!

Making your screen settings as neutral as possible, lowering your brightness (you should do that anyway to protect your eyes  !) and setting your screen to sRGB mode (if it has it) will all help! Lowering the lights in your room to lower screen glair will also help you see your colours better.

If you don't have a colour-accurate display, using a colour plan made by someone else can help, although it limits your creativity.

Finally, you can buy colour-accurate displays, look for sRGB 100% (this means it CAN display all sRGB colours) and a delta of less than 2 (ΔE < 2) (this means it WILL display colours correctly) - in particular the Asus ProArt displays seem to be popular and affordable going down to around $300 or 400 euro.

Alternatively, getting a used iMac (or other mac with a retina screen / made after 2015) is a great way to get an affordable colour-accurate computer - you don't need the latest specs for web design and they can be found used on eBay for as little as $350 (this will also let you use some of the great design software on MacOS!)

Finally
If you are just starting, you don't need to stress about this too much; but it is a great way to improve your site and ensure the kind of experience you want visitors to get when they are exploring your work! It'll make your colour choices more polished, and if you are displaying artwork or other graphics on your site, it will help you make everything more cohesive 

[teatime]

thank you for writing up this post melon! i was curious to know more about this topic, so i tried to look up what makes a display more accurate, and many of the top articles were about color calibration. is calibrating your monitor necessary?

another note: i wasn't previously aware of this, but a monitor's sRGB gamut can go over 100%! under 100% means colors are less saturated compared to real life, while over 100% means your colors are more saturated 

[Melooon]

a monitor's sRGB gamut can go over 100%! under 100% means colors are less saturated compared to real life, while over 100% means your colors are more saturated

I did not know this! Does this mean that having more than 100% is bad.. or does having over 100% with a good Delta still mean your colours are correct.. hmmm.

is calibrating your monitor necessary

A good question! I forgot you could do that! Most of the info on the web about this subject is for professional video editors and designers; I felt that info was unnecessarily over the top for this community; since we are mostly hobbyists or not earning our living from making sites - so yes you can calibrate if you have access to a calibrator and it will definitely help! However, I don't think it's necessary to go out and buy a calibrator. The ProArt displays I mentioned come pre-calibrated and even old iMacs should be good enough from the factory for most people!

If you trust your eyes enough to do a visual calibration without a calibrating device then that might get good results, but I dunno how much Id trust myself, I'd prob make it worse somehow

[teatime]

the automatic logout has foiled me yet again

I did not know this! Does this mean that having more than 100% is bad.. or does having over 100% with a good Delta still mean your colours are correct.. hmmm.

after a bit of digging around, i believe that sRGB gamut is akin to the % of colors your monitor can display while (color) dE is the accuracy of those colors. link 1 link 2

which is better: having access to all of the colors but your monitor displaying them noticeably inaccurately OR having your colors over/undersaturated but being displayed correctly? i would say the former but i don't have a lot of experience with this in practice (or at least it's not something i've been paying attention to) 

Most of the info on the web about this subject is for professional video editors and designers; I felt that info was unnecessarily over the top for this community; since we are mostly hobbyists or not earning our living from making sites - so yes you can calibrate if you have access to a calibrator and it will definitely help! However, I don't think it's necessary to go out and buy a calibrator. The ProArt displays I mentioned come pre-calibrated and even old iMacs should be good enough from the factory for most people!

this is a good point! it may be a bit much if you're just a hobbyist. plus it's just a lot easier to just leave your laptop display and pre-calibrated displays as is. i wonder if calibration is a good idea if you have a display with mediocre color accuracy? 

[Gans]

Congratulations by the way. The colours on Melonland are particularly well made and look good on every computer monitor, that I've used so far. The text has a really good contrast everywhere. So testing the site on different computers should show up colour problems as well.

The graphic artist pros will replace their monitors eventually. Expensive Eizo monitors that cost over 1000 dollars when they were new are available now for like 20. Maybe those high-quality displays are worth a look, even if they aren't the newest.