contrast_text_color

The {{contrast_text_color}} helper returns a high-contrast text color for a given background color. Use it when your theme supports configurable brand or accent colors and you need readable text on top of them.

Example Code

<button
    style="background: {{@site.accent_color}}; color: {{contrast_text_color @site.accent_color}};"
>
    Subscribe
</button>

For a dark background such as #15171A, the helper outputs:

#FFFFFF

For a light background such as #FFFFFF, the helper outputs:

#000000

Notes

Helps keep text readable on dynamic background colors
Works well with @site.accent_color
Falls back to #FFFFFF if the color is invalid or missing

concat encode

Getting Started

Core Concepts

Themes

Advanced Tools

Resources

Example Code

Notes

​Example Code

​Notes

Example Code

Notes