Proposal: A new property that enforce WCAG color contrast

.box {
   background: black;
   color: #111;
   wcag-at-least: AAA; // equals 4.5
}

The black and #111 does not satisfy the WCAG AAA test. The browser should ignore the color property and reselect a new color to enforce the contrast reach 4.5.

This is especially helpful when the website is themeable. It’s easily to create a not accessible theme in a complex website. It also useful when the text is on a image.

A real world example: https://github.com/material-theme/vsc-material-theme/issues/483

If the browser adds the capability to enforce minimum contrast on the web, would it not be better if this option was provided in the browser’s preferences, so that the user can apply it to all websites?

Browser options is a all-or-none options. It can’t know if developer want to make it clear here. (Notice the image backgrounds example above)

Possibly a warning in the console like other CSS warnings rather than an error or the browser ignoring the style.

Webhint and Lighthouse audits also warn on low contrast situations.

Warning is not useful. I’m meaning the developer opt-in color contrast enforcing

I think it would be much more useful to have an automatic color selection based on background:

color: contrast;

Then we need too decide the exact behavior:

• does it use only pure white and black?
• does it use a scale with many different gray variations?
• does it use any color that the browser thinks is good?

That would be simple to apply on a background color.

However a better solution would be to consider also any background image, gradient, etc.

What about color: contrast(red, 8, blue, 6, auto, 5). If not satisfying 1:8, use red, if not satisfying 6, use blue. If not satisfying 5, let browser select a contract color.

I think this is a small, limited example where we’ve got the non-accessible colors in the same element.

I’d think a more common scenario would be that the background color is 5 elements up in the DOM tree and that you have to calculate visible contrast from multiple sources.

That would mean that the browser has to evaluate the stacking context looking not just for background colors, but anything with opacity, an rgba background, or a filter as well.

maybe a better solution is an accessibility query that keys off of a browser setting?

@media wcag(at-least: AAA) {}