2023-10-25
3257
#accessibility#css#vanilla javascript
Cristian Diaz
180080
107
Oct 25, 2023 ⋅ 11 min read

Creating contrast themes with CSS prefers-contrast and JavaScript

Cristian Diaz Cristian is a frontend developer from Colombia. He enjoys writing about what he learns and is focusing his career on helping to make web content more accessible to everyone. His main areas of expertise are HTML, CSS, and web accessibility.

Recent posts:

Using Rust And Axum To Build A Jwt Authentication Api

Using Rust and Axum to build a JWT authentication API

Learn to build a basic JWT authentication system with Rust and Axum, including setting up the routes, handlers, and the middleware system.

Eze Sunday
May 29, 2024 ⋅ 9 min read
Building A Customizable Dashboard With Dashy

Building a customizable dashboard with Dashy

Dashy helps us create beautiful, customizable, modern dashboard pages with web service links and widgets.

Shalitha Suranga
May 29, 2024 ⋅ 10 min read
Winterjs Vs Bun: Comparing Javascript Runtimes

WinterJS vs. Bun: Comparing JavaScript runtimes

WinterJS is theoretically the fastest WinterCG JavaScript runtime. Let’s compare WinterJS to Bun, another runtime known for its speed.

Emmanuel Odioko
May 28, 2024 ⋅ 6 min read
Understanding Cross Platform Graphics In Rust With Wgpu

Leverage Rust and wgpu for effective cross-platform graphics

Use Rust with wgpu to work directly with the new WebGPU standard for better control, cross-platform performance, and bug handling.

Mario Zupan
May 28, 2024 ⋅ 36 min read
View all posts

One Reply to "Creating contrast themes with CSS prefers-contrast and JavaScript"

  1. Hi Cristian, thanks for your interesting article. You write that the media query “prefers-contrast” is quite young. This fact means that this media query still has room for improvement. For example, this media query does not take into account that there are both light and dark contrast designs (Windows 11: “Desert” and “Night sky”). It would therefore be better if the media query distinguished between a light and a dark contrast design: “prefers-more-contrast: dark” and “prefers-more-contrast: light”. This proposed solution follows the “prefers-color-scheme” logic. I’m not a fan of too much JavaScript because the complexity and therefore the maintenance effort for a website increases very quickly. Are you aware of any ongoing discussions on this topic? If so, where can I find them?

Leave a Reply