Using contrast-color (follow-up!)
Two years ago I published a lesson here on CraftQuest about a very specific problem: the topic pills on our own listing pages. Every topic had a color picked in a Craft color field, the text sat on top of it, and some picks, that yellow, left the label unreadable. The fix back then was to pull the color's luma value out of Craft's color field and run it through a `calc()` trick that slammed the text to black or white. It worked. It was clever. You can delete all of it. Here's what replaces it, and it's one line.
Two years ago I published a lesson here on CraftQuest about a very specific problem: the topic pills on our own listing pages. Every topic had a color picked in a Craft color field, the text sat on top of it, and some picks, that yellow, left the label unreadable. The fix back then was to pull the color’s luma value out of Craft’s color field and run it through a calc() trick that slammed the text to black or white. It worked. It was clever. You can delete all of it. Here’s what replaces it, and it’s one line.
Transcript
PremiumFollow along with the full transcript
Search every word, click any line to jump to that moment, and read along as you watch — a CraftQuest Premium feature.
Sign up for PremiumSome stuff to help you along during the lesson:
- MDN docs for contrast-color
- CraftQuest lesson on calculating colors in CSS
-
color-contrast sample code from video
