Machine-testable

Apply the monochrome, prefers-contrast, prefers-color-scheme, prefers-reduced-data, prefers-reduced-transparency, and prefers-reduced-motion CSS preference queries if they will benefit your website or application. Use the print and scripting CSS media queries if they will improve the sustainability of your website.

Resources

• A Guide To The State Of Print Stylesheets In 2018
• Cascading Spy Sheets: Exploiting the Complexity of Modern CSS for Email and Browser Fingerprinting
• Changing Paper Consumption
• Cost of a pixel color (Video)
• CSS-Based Fingerprinting
• CSS Design: Going to Print
• Dark mode & accessibility myth
• Dark mode can save battery, but only if your device has an OLED screen
• Dark Mode Can Improve Text Readability — But Not for Everyone
• Dark mode may not save your phone's battery life as much as you think, but there are a few silver linings
• Demo: Disabling JavaScript Won't Save You from Fingerprinting
• Energy efficient color palette ideas
• Fixing web browser history leaks
• GPF - General Policy Framework (PDF) - 2.5 - Specifications (Adaptive Design)
• Google: Here's why dark mode massively extends your OLED phone's battery life
• How can we design sustainably?
• How I built a dark mode toggle
• How much battery does dark mode save?: an accurate OLED display power profiler for modern smartphones
• How to Become an Eco Web Designer
• Impact of GPU Acceleration on Browser CPU Usage
• Inclusive Dark Mode
• Making :visited more private
• Mitigating Browser Fingerprinting in Web Specifications
• OLED and dark websites = lower footprint
• prefers-reduced-data
• Save the planet through sustainable web design
• Sustainable UX is more than reducing your website's footprint
• The complete guide to CSS media queries
• The dark side of green web design
• United Nations SDGS - Goal 1 - Poverty
• User preference media features client hints headers

• Environment: Improving the experience for monochrome devices (using a monochrome preference query) could encourage more visitors to use these energy-efficient eInk devices. For OLED displays dark mode (prefers-color-scheme) will be more energy efficient. Animation and media have a significant impact on CPU and GPU, therefore reducing its usage (prefers-reduced-motion) will reduce energy usage. Finally, having a print-friendly stylesheet will save not only paper but also ink wastage.
• Social Equity: Media queries don't tell individuals how to experience the web, they follow the preferences of the visitor or a device's capabilities.
• Accessibility: Having a high contrast (prefers-contrast) version of a site will reduce the barriers to entry and time wasted for visually impaired visitors. Less motion may also assist people with accessibility requirements.
• Performance: Allowing visitors to have a Lo-Fi (prefers-reduced-data) version of a site could significantly reduce the carbon footprint they emit (which for individuals on a data plan would be beneficial). Additionally, by detecting if scripting is disabled and offering alternative content, you could save wasted effort and improve the performance of a product or service.
• Economic: Print media queries (or stylesheets) can save visitors additional ink and paper costs.
• Conversion: User preferences make an interface friendlier, encouraging repeat visitors.

• code @media (prefers-color-scheme: dark) { /* wants dark mode */ } @media (prefers-color-scheme: light) { /* wants light mode */ }
• content The complete guide to CSS media queries.