Lighter Text Color on Page Blocks/Etc.

Store Design
, , ,

Topic summary

A Dawn theme user encountered an issue where text appeared lighter than the color specified in their theme scheme, particularly affecting pages and collapsible content blocks. Screenshots showed the problematic lighter text rendering.

Root Cause:
The theme applies 75% opacity (0.75) to foreground colors via CSS, creating the lightened appearance even when solid colors are selected in theme settings.

Solutions Provided:

  • Quick fix: Edit theme.liquid file and change the opacity value from 0.75 to 1 (or remove opacity entirely)
  • CSS override: Add custom CSS removing the rgba opacity from color scheme classes using !important
  • Accessibility note: The original color contrast was flagged as failing WCAG accessibility standards, suggesting the base color choices may need review

Resolution:
The issue was resolved by modifying the opacity value in the theme.liquid file as suggested.

Summarized with AI on October 24. AI used: claude-sonnet-4-5-20250929.
1

I’m looking to figure out how to change the lighter font color on certain page aspects, collapsable content, blog posts, etc. This is currently happening on my ‘Pages’ and content blocks like ‘Collapsable Content’. It appears that it is lightening my actual color I am using in my Scheme. I am using Dawn theme. Here is my site: https://happy-day-juice-co.myshopify.com

Screen Shot 2025-07-03 at 3.18.02 PM.png
Screen Shot 2025-07-03 at 3.18.02 PM.png2817×1427 275 KB

Screen Shot 2025-07-03 at 3.18.09 PM.png
Screen Shot 2025-07-03 at 3.18.09 PM.png2816×1457 214 KB

2

Hi @happydayteam :waving_hand: Note even if you fix this the contrast is already very poor and fails most WCAG accessibility criteria.

check the settings/scheme again and make sure there is no opacity/transparency in the setting or value.

Or apply a different color scheme if lower color schemes are set to have light values for de-emphasis.

Otherwise it’s a theme customization (probably in theme.liquid area) or it’s a series of css band-aids to fix all the bad areas, e.g.:

from

body, .color-scheme-1, .color-scheme-2, .color-scheme-3, .color-scheme-4, .color-scheme-5 {
        color: rgba(var(--color-foreground), 0.75);
        background-color: rgb(var(--color-background));
      }

to no opacity in the rgba

body, .color-scheme-1, .color-scheme-2, .color-scheme-3, .color-scheme-4, .color-scheme-5 {
        color: rgba(var(--color-foreground)) !important;
        background-color: rgb(var(--color-background));
      }

put in custom css setting at the theme level

https://help.shopify.com/en/manual/online-store/themes/theme-structure/extend/add-css

But really when this happens it’s a big fat clue the base colors are just bad.

Brand colors are not the same as design colors and both of those are not the same as good colors for readability.

If you need deeper fixes or customization then contact me for services.
Contact info in forum signature below :down_arrow: :down_arrow: :down_arrow:.
ALWAYS please provide context, examples: store url, theme name, post url(s) , or any further detail in ALL correspondence.

3

Hi @happydayteam ,

Please go to Actions > Edit code > layout > theme.liquid file, find ‘0.75’ and change code here:

Screenshot.png
Screenshot.png1103×687 149 KB

1 Like
5

thank you so much @namphan this totally fixed it!

6

Hi @happydayteam,

It’s my pleasure :blush: