Community forum for knowledge and support

Updated last year

Adjusting Text Color Based on Background Brightness

At a glance

The community members are discussing the best way to handle different text colors based on the background color. The recommended approach is to avoid setting text colors directly on individual elements, and instead use a cascading approach where the text color is set at the section level. For example, if a section has a dark background, the text color within that section can be set to white. This avoids the need to apply individual text color classes to every element. The community members agree that this is a clear and effective solution.

Hey guys, what is the easiest way to use different typography color on a project, depending on wether the background is light or dark? Do I need to create a diffrent class (ex:title_is-dark) or a combo class on every text element? Or is there a way to apply the text color class to the section so the text inside is either black of white?

M
U
2 comments

yeah so the best practice for this is to try not to define any color on text except in a cascading way.

So body tag - text is black.
section - if it has a class of background-black, within that background-black class you'd set the text color to white. So you would define those things at the section level.

Avoid if possible, adding color styles to text elements within a section to avoid having to go into each individual text element and changing text colors.

body - color: #000;
section_hero - background: #000; color: #FFF;
h1 - inherited from parent
text block - inherited from parent

Hopefully this makes sense!

Super clear! Thanks πŸš€

Add a reply
Sign up and join the conversation on Slack