Automatic color contrast with CSS Variables

[Bartmr]

Prerequisites

• I have searched for duplicate or closed feature requests
• I have read the contributing guidelines

Proposal

To add a system where fill colors are defined as SCSS variables, and text/border/stroke colors are defined as CSS Variables, so they can be switched by sets of colors that have more contrast, thus enabling automatic color contrast.

Motivation and context

Right now, Bootstrap does not have automatic color contrast (except for cases like Buttons), and it forces the developer to hard-code a text or border color class (like text-white) or set a color property for each container with a different color.

This becomes even more apparent when a company decides to change their branding / primary color, and you have to spend time running all the pages and components to see if any of them has become difficult to read or is lacking contrast.

---

Solution

In a vectorized artwork, like a webpage, you can spot 2 types of colors: fill colors (the ones that fill the background of a shape), and stroke colors (the colors of the text, border, symbols... inside a shape).

I've been using an overridden version of Bootstrap that solves this issue: all fill colors are set as SCSS colors, just like today, but stroke colors are set as CSS Variables, so they can be automatically switched over for colors that are more contrasting with their background. The API works something like this:

body {
  color: var(--contrasting-color-body);
}
.bg-primary {
  background-color: $primary;
  @include with-contrasting-colors($primary); // <-- sets contrasting stroke colors with CSS Variables, based on color inserted as argument

  // text inherits color from body, the inherited value now points to a white color
}

And here's an example of it working, after I changed the $primary color to a lighter color:

Implementations

The implementation of with-contrasting-colors mixin can be seen here

Examples in the wild can be seen here: http://explore8land.com/.

This issue is a proposal to use this system in all elements and utilities that set a background color, so that everything becomes automatically contrasted.

This change should not introduce breaking change, since the changes do not break how theme colors are declared, and any override done in a project should cancel out the color CSS prop set by the automatic contrast

[ffoodd]

We do have our own color-contrast() function that could be used everywhere to enforce contrasts—which has been suggested through a PR last year (#34045) and closed because of its too many impacts.

There's no need for another mixin or function since we have a working solution. If we move to enforcing contrasts, we'll simply use our existing function and declare both foreground and background colors altogether (which is the whole point, after all).

BTW since the intention is to change appearance of some components, so it's necessarily a BC. As you explained, projects would need to override some colors to cancel the change: that's breaking.

I'm closing this for now, but will keep an eye on the topic since I'd really like to ensure contrasts everywhere, toi!