🧪 CSS Lab #1: A world of contrasts

Did you know CSS can (sometimes) auto-pick the best color for accessibility?

Mina Pêcheux
CodeX

--

Finding the right colors for your websites is of course a big deal. On the one hand, it determines your overall style and unique personality; and on the other hand, it ensures that your site is accessible to everyone.

Today, I want to discuss a really cool CSS feature that is still currently in dev but could really help in that area: color-contrast().

⚠️ Important: This feature is currently experimental and only available on Safari (see below)!

What is it?

Here’s an overview of the feature, directly from the MDN web docs:

So, in short, this command allows you to choose the most readable color among a list, compared to some other reference.

How to use it?

At the time of writing this article (in April 2024), this feature is only available on Safari:

--

--

Mina Pêcheux
CodeX

I’m a freelance full-stack web & game developer. I’m passionate about topics like CGI, music, data science and more! Find me at: https://minapecheux.com :)