CSS color-contrast

[kookma]

The issue we normally encounter in TW is the color contrast specially when we use the different color palettes or manually change some colors like button colors! There is a JS macro in TW supports color contrast!

I wish to know if we can use css color contrast specially in the official palettes.
See

https://caniuse.com/?search=color-contrast

https://css-tricks.com/exploring-color-contrast-for-the-first-time/

[pmario]

hi, Your caniuse search points out something completely different. There is no browser support except for safari, as your second link shows. And there it is experimental.

We (TW) already can use macros in CSS.

So a combination of https://caniuse.com/css-variables and our js-macro should work and it has good browser support.

[pmario]

also see: https://developer.mozilla.org/en-US/docs/Web/CSS/Using_CSS_custom_properties

[pmario]

The main problem is, that there is a lot more to it, than a macro and some CSS variables. There is a very interesting blog post https://stripe.com/blog/accessible-color-systems which explains the problem and presents a solution