Skip to main content
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