In my quest to enhance auto-color contrast correction, I am utilizing Tailwind and experimenting with CSS rules that will automatically adjust colors when the contrast is insufficient.
Consider the following example:
.bg-white .text-white {
color: black;
}
It's a simple solution. By changing white text on a white background to black text on a white background, we eliminate concerns about meeting WCAG Accessibility guidelines for those who use .text-white.
However, a challenge arises when white text becomes illegible amid other background colors, as shown in this HTML snippet:
<div class="bg-white">
<div class="bg-black">
<span class="text-white">I was legible until you tried to be smart.</span>
</div>
</div>
There are numerous solutions to this issue, but I'm intrigued by the possibility of using the :has() selector to address it.
My proposed approach looks like this:
.bg-white:not(:has(class*="bg-")) .text-white {
color: black;
}
The idea is to target any text-white within a bg-white element that doesn't contain any other classes similar to "bg-", indicating changes in background color.
Ultimately, I aim to designate only the most immediate color-changing class as the background color.