Category: Colors, Typography

Back to Docs

Navigation

Automatic Color Relationships

Imagine adding .bg--ultra-dark to a section to change it’s background color to a very dark color, only to see all the text change to light without you having to do anything else. That’s what Automatic Color Relationships do.

Automatic.css color relationships dashboard

All you have to do to get this working is toggle the “Relate Text to Background Color” option to “on” and tell ACSS what the color relationships should be.

Note: Automatic Color Relationships only work when using utility classes. If you use variables to set background color, there’s no way for ACSS to know.