Automated color modes
In both CSS Day and Fronteersconf the topic of colour came up. Colour on the Web, you may have noticed, is borked. Not badly, but it's not looking the best it can be. Well, it seems some of the webs finest are on the case.
Two technologies jump out. Both are still in the experimental stage.
One is for creating colour in a colour space that looks like the colour you picked. Chris Lilley has worked to make this happen. The other is for picking colour based on a range of swatches. In this case, a contrast colour.
I wouldn't have gone for color-contrast() but for something like color-match() with a keyword to instruct the type of match, in this case, a contrast colour. You could envisage matching colours to colour schemes like complementary, monochromatic, tetradic, etc. However, contrast is, I don't think, a colour scheme. So I'll put color-match() on my Christmas wish-list.
With accessibility gaining more attention (about bloody time), the topic of preferred colour modes and theming in design systems by picking accessible colours seems a daunting and laborious task. The need for user-centric solutions is why, to my mind, color-contrast() exists.
The solution seems to need more work, but we can play around with it as experimental features in Chrome and Safari.
We can now do something like this:
color-contrast( #008080 vs olive, var(--myColor), #d2691e )color-contrast() checks the colours (at least two or more) on the right for the best contrast ratio and returns the appropriate value. When the contrast ratio is 1:1, because all the colours are the same, it returns that colour. From an a11y perspective, it should default to either black or white as the contrast colour, and it only does this (in Chrome) when you add a to AA or to AAA after the list of colours[1]. This part of the spec is hazy an hopefully we'll see this added later.
I was thinking, why not use the text colour to determine a background colour and a gradient? So, I made a pen to see if that could work.
Note: Make sure you view this in Safari 16 or the Technical Preview with "color-contrast" enabled, and for Chrome, enable the Experimental Web Technology Features available under "chrome://flags"
See the Pen Trigger color contrast gradient by Egor Kloos (@dutchcelt) on CodePen.
The example shows that you can have several rendered combinations. Some of them you may not have expected. There isn't a designer on the planet who will let you do that. In reality, you would likely only allow color-contrast() to pick from two colours carefully curated by the design system team.
The advantage of knowing your background colours and matching them to your text colour is going to be invaluable. This feature couldn't come soon enough.
Updated: The behavioural change is significant and the default doesn't do what I'd expect it to do. This experiment still has some kinks to iron out. Fingers crossed it doesn't get delayed too much. ↩︎