Fixing poor contrast in Tailwind using automation

Question

Fixing poor contrast in Tailwind using automation

Seeking a solution with CSS selectors, I am faced with the challenge of creating automatic color overrides for Tailwind to ensure our site meets WCAG guidelines consistently.

A tailwind plugin I developed can fix this issue automatically, but I have realized that my current approach to targeting CSS selectors is incorrect.

For instance, when the color light-grey is applied to white, I intend to automatically adjust it to black.

My current method involves using the following selectors:

.bg-white .text-light-grey {
  color: black;
}

However, this approach presents complications. It works well in this HTML structure:

<div class="bg-white">
    <span class="text-light-grey">This is now black.</span>
</div>

But it disrupts this structure:

<div class="bg-white">
    <span class="text-light-grey">This is now black.</span>

    <div class="bg-black">
        <span class="text-light-grey">This is also now black, which is unintended as it resides within a black container!</span>
    </div>
</div>

I need guidance on how to adjust the CSS selectors so that if another background is specified in between them, the text color remains intact without corruption.

Perhaps something like this:

.bg-white :not(some fancy way to ensure no other backgrounds come between bg-white and the text color) .text-light-grey {
  color: black;
}

Is there a solution utilizing class~= or possibly the :has() selector?

html css tailwind-css wcag parent-selector

Answer 1

Answer №1

Utilize the power of cascading effects by implementing CSS variables that cascade down through the bg-* classes. This approach offers the benefit of applying styles to an unlimited depth of nesting:

tailwind.config = {
  theme: {
    extend: {
      colors: {
        'light-gray': 'rgb(var(--light-gray) / <alpha-value>)',
      }
    },
  },
};

.bg-white {
  --light-gray: 0 0 0;
}

.bg-black {
  --light-gray: 255 255 255;
}

<script src="https://cdn.tailwindcss.com"></script>

<div class="bg-white">
  <span class="text-light-gray">This is now black.</span>

  <div class="bg-black">
    <span class="text-light-gray">This is also now black, but it shouldn't be - It's inside a black container!.</span>

    <div class="bg-white">
      <span class="text-light-gray">This is now black.</span>

      <div class="bg-black">
        <span class="text-light-gray">This is also now black, but it shouldn't be - It's inside a black container!.</span>
      </div>

      <div class="bg-white">
        <span class="text-light-gray">This is now black.</span>

        <div class="bg-black">
          <span class="text-light-gray">This is also now black, but it shouldn't be - It's inside a black container!.</span>
        </div>
      </div>
    </div>
  </div>
</div>

Answer 2

Utilize the power of cascading effects by implementing CSS variables that cascade down through the bg-* classes. This approach offers the benefit of applying styles to an unlimited depth of nesting:

tailwind.config = {
  theme: {
    extend: {
      colors: {
        'light-gray': 'rgb(var(--light-gray) / <alpha-value>)',
      }
    },
  },
};

.bg-white {
  --light-gray: 0 0 0;
}

.bg-black {
  --light-gray: 255 255 255;
}

<script src="https://cdn.tailwindcss.com"></script>

<div class="bg-white">
  <span class="text-light-gray">This is now black.</span>

  <div class="bg-black">
    <span class="text-light-gray">This is also now black, but it shouldn't be - It's inside a black container!.</span>

    <div class="bg-white">
      <span class="text-light-gray">This is now black.</span>

      <div class="bg-black">
        <span class="text-light-gray">This is also now black, but it shouldn't be - It's inside a black container!.</span>
      </div>

      <div class="bg-white">
        <span class="text-light-gray">This is now black.</span>

        <div class="bg-black">
          <span class="text-light-gray">This is also now black, but it shouldn't be - It's inside a black container!.</span>
        </div>
      </div>
    </div>
  </div>
</div>

Answer 3

Answer №2

I have a suggestion that involves using two selectors. One will target the immediate child, while the other will check all intermediary elements with classes for background color. Do you think this approach would work in your situation?

.bg-white {
  background: white;
}

.bg-black {
  background: black;
}

.text-light-grey {
  color: lightgrey;
}

.bg-white>.text-light-grey,
.bg-white :not([class^="bg-"]) .text-light-grey {
  color: black;
}

<div class="bg-white">
  <span class="text-light-grey">This is now black.</span>

  <div class="bg-black">
    <span class="text-light-grey">This is not black!</span>
  </div>

  <div>
    <span class="text-light-grey">This is now black!</span>
  </div>
</div>

UPDATE: If you don't have many classes that need their color adjusted, you might want to consider this alternative method:

.bg-white {
  background: white;
}

.bg-black {
  background: black;
}

.text-light-grey {
  color: lightgrey;
}

.bg-blue {
  background: blue;
}


/* Similar to what you wrote in the comment */

.bg-white .text-light-grey {
  color: black;
}

[class*="bg-"]:not(.bg-white) .text-light-grey {
  color: lightgrey;
}

<div class="bg-white">
  <span class="text-light-grey">This is now black.</span>

  <div class="bg-black">
    <span class="text-light-grey">This is not black!</span>
  </div>

  <div>
    <span class="text-light-grey">This is now black!</span>
  </div>

  <div>
    <div class="bg-blue">
      <div>
        <span class="text-light-grey">This is nested and not black!.</span>
      </div>
    </div>
  </div>
</div>

Answer 4

I have a suggestion that involves using two selectors. One will target the immediate child, while the other will check all intermediary elements with classes for background color. Do you think this approach would work in your situation?

.bg-white {
  background: white;
}

.bg-black {
  background: black;
}

.text-light-grey {
  color: lightgrey;
}

.bg-white>.text-light-grey,
.bg-white :not([class^="bg-"]) .text-light-grey {
  color: black;
}

<div class="bg-white">
  <span class="text-light-grey">This is now black.</span>

  <div class="bg-black">
    <span class="text-light-grey">This is not black!</span>
  </div>

  <div>
    <span class="text-light-grey">This is now black!</span>
  </div>
</div>

UPDATE: If you don't have many classes that need their color adjusted, you might want to consider this alternative method:

.bg-white {
  background: white;
}

.bg-black {
  background: black;
}

.text-light-grey {
  color: lightgrey;
}

.bg-blue {
  background: blue;
}


/* Similar to what you wrote in the comment */

.bg-white .text-light-grey {
  color: black;
}

[class*="bg-"]:not(.bg-white) .text-light-grey {
  color: lightgrey;
}

<div class="bg-white">
  <span class="text-light-grey">This is now black.</span>

  <div class="bg-black">
    <span class="text-light-grey">This is not black!</span>
  </div>

  <div>
    <span class="text-light-grey">This is now black!</span>
  </div>

  <div>
    <div class="bg-blue">
      <div>
        <span class="text-light-grey">This is nested and not black!.</span>
      </div>
    </div>
  </div>
</div>

Answer 5

Answer №3

I experimented with the use of currentcolor. I'm not certain how this would impact the overall outcome of your project, but I wanted to share it in case it proves helpful. This approach is reminiscent of @Wongjn's solution.

.bg-white {
  color: black;
}

.bg-black {
  color: white;
}

.text-light-gray {
  color: currentcolor;
}

https://play.tailwindcss.com/hQ4VW1RysN?file=css

Here's another variation that closely resembles @Wongjn's solution. I'm sharing it just in case it may be useful.

.bg-white {
  --text: black;
}

.bg-black {
  --text: white;
}

.text-light-gray {
  color: var(--text);
}

https://play.tailwindcss.com/CdT0KVvQga?file=css

Answer 6

I experimented with the use of currentcolor. I'm not certain how this would impact the overall outcome of your project, but I wanted to share it in case it proves helpful. This approach is reminiscent of @Wongjn's solution.

.bg-white {
  color: black;
}

.bg-black {
  color: white;
}

.text-light-gray {
  color: currentcolor;
}

https://play.tailwindcss.com/hQ4VW1RysN?file=css

Here's another variation that closely resembles @Wongjn's solution. I'm sharing it just in case it may be useful.

.bg-white {
  --text: black;
}

.bg-black {
  --text: white;
}

.text-light-gray {
  color: var(--text);
}

https://play.tailwindcss.com/CdT0KVvQga?file=css

Fixing poor contrast in Tailwind using automation

Answer №1

Answer №2

Answer №3

Similar questions

Is there a way to position the main and aside elements next to each other?

Exploring the Beauty of Trees through Twitter Bootstrap

Increase the spacing within div columns containing rows of uniform height

How to align text to the right in an Android TextView using HTML

The card-footer in Bootstrap 4 is not correctly aligned at the bottom of the page

Unveiling the search bar as it expands horizontally from the center, causing the submit button to slide to adjust

Creating a Div element to occupy an entire row is a simple task that can be achieved

Substitute the <body> tag with a different tag

"Fixing the position of a div on the Samsung Galaxy S8 navigation bar to

I am encountering an issue with the `/deep/` selector while using sass-loader in my VueJS project

I am trying to utilize a cookie to retrieve the current month, date, and time. Unfortunately, the information is not displaying properly and the date is showing up as

What is the best way to replicate the orange outline when focused?

What is the meaning of this CSS acronym?

Sending data to a Node.js server via an HTML email

Animate a CSS3 button to shift from the right to the left upon hover

Ensure that the width of the container holding two "text" input boxes is appropriately set when utilizing the display flex property

Revise the design of the bootstrap-multiselect interface

Adding an active class to a menu when its submenu is clicked in JavaScript

Switch the designation to Hover Class

What is the best method to ensure that a span element's width is maximized through CSS