02
Colour
Colour is make or break for accessibility and a surefire way to weaponize headaches.
What is it?
Most of us already know that colour matters.
It has a direct effect on the subconscious, psychological impression that visitors get from your brand and organisation. Colour is make or break for accessibility and a surefire way to weaponize headaches. What many don’t know, is that decisions about colours used on your website, app or digital product directly affect your website’s carbon footprint.
So why is it so hard to find clear guidelines on how to use colour sustainably?
The problem here is balance. If every energy-saving colour guideline were to be followed without question, many users would find themselves unable to access digital products and services, and the rest of us would be underwhelmed and undelighted to say the least. That doesn’t mean balance can’t, and shouldn’t be struck.
Dark mode is available on most devices, websites and applications now, and it is both stylish, sleek and helpful. However, the halation effect is very real, and very annoying. Designers don't need to become opticians - when in doubt give user's choices, and keep that choice within secondary or tertiary disclosure to avoid adding cognitive noise.
Ellie Barrett, UX Designer
Designers are being handed a fantastic opportunity to change.
Why should I care?
Extra-efficient OLED (organic light-emitting diode) screens are becoming more popular. Since Apple’s iPhone 12, Samsung’s Galaxy S22, Google’s Pixel 6, and Apple’s Super Retina displays, major players are all opting for energy saving OLED screens. Panasonic, Samsung and LG have all expressed intentions of phasing out or halting investment in LCD display technology in the next few years.1
OLED displays use considerably less energy to display dark colours, black being the more efficient. They use the most energy to display white, and lighter colours. So designers can manage their carbon-budget while maintaining their brooding edge, and dark mode is safe to stay. That is, as long as blue, the most popular colour on the web, is used sparingly, as blue pixels use 25% more energy than green and red pixels.2 LCDs, (liquid-crystal displays), are far from gone and they don’t benefit from this.
Sorted? Not quite.
On the other hand, despite the hype, these dark designs pose sizeable accessibility issues. One in three people have astigmatism, an eye condition that causes a ghosting effect similar to double vision when reading light text on dark backgrounds. This is called the halation effect3 and it leads to eye strain - ouch!
What can I do right now?
Watch out for the halation effect.
The ideal way to address the halation effect caused by dark mode style designs, is to avoid bright white text on dark backgrounds. Instead of white text, opt for oranges, yellows and warm tints where possible.
Learn more about the halo effectLet your users decide.
Alongside a thoughtful colour palette, offer users a choice by providing the option to browse with a dark or light background. It’s the best way to achieve the balance between accessibility and sustainability.
Find out how YouTube did itExplore the tools already available.
Provide users with the tools and knowledge to aid themselves, spread awareness of tools like Microsoft’s high contrast mode, and browser extensions like High Contrast for Chrome by Google.
Try the Chrome extension hereSources
- Investment into LCD to dry up by 2022, says IHS Markit / FlatpanelsHD
- The Most Popular Color On The Internet Is... / Wired
- Halation / Merriam-Webster
Next up...
03
Images, Video and Visual Media
Images and video are one of the aspects of online content that have the highest carbon-cost over time.