Web Developers and Designers Should Pay Attention to ‘CSS Color-Adjust’ Property
Have you ever seen a beautiful website with colourful backgrounds and images on your desktop and then felt disappointed seeing it look totally different when you printed it out? I have. Many times. Maybe because I tend to focus on colours and designs when I look at things, influenced by my past career background, but I’m pretty sure many of you have felt the same way at least once. Or, you may have thought, ‘Oh, thank god. It automatically printed only the important stuff without wasting my ink.’ This, instead, you’re highly likely to have experienced.
These instances hint us that different types of output devices display different versions of a website. This doesn’t only happen on printouts but also other types of devices, and this is exactly why web developers and designers must remember that CSS color-adjust property exists.
So, what is color-adjust?
Color-adjust is a CSS property that preserves colours in different-capability devices. Its purpose is to optimize the visual appearance of a website on the output device.
The color-adjust property has two values: economy and exact. Economy is the default value that developers don’t have to type into CSS. Without any specific values defined, the user’s browser is allowed to make any adjustments it wants. For legibility purposes, if the text and background colours will be too similar on the device, they will be adjusted to different colours automatically for better colour contrast. Or, just like what I discussed above, when the output device happens to be a printer, dark background colours or images are usually removed, unless the user has an option to specifically print all of the background elements.
On the other hand, the exact value tells the browser that it shouldn’t make any changes to the colours that have been declared in the CSS syntax. You can use this value to call out styles that are significant to the element so that they don’t get removed.
Nowadays, people use so many different types of screens, including wall display, TV, desktop, laptop, tablet, mobile, and even smaller screens. And more and more developing areas of the world and low-income populations are starting to use the internet. These are the reasons we need to consider various types of displays and lower-quality displays when we build websites.
Web developers and designers don’t create products for our own devices or eyes but rather any devices or users. It’s hard to keep reminding ourselves about such fact when we stare at our own computers when we build something. But at the end of the day, we must remember our users could be using very different output devices that might show our products in an unexpected way with the ‘default color-adjust: economy’ value, which can create poor user experience.
So, how to properly use colours and contrast ratios is a critical part of design. They can beautify your website, but break it, too - if you don’t pay much attention.
