My theme only lets me choose so many colors. I chose FFFFFF as the text so that the foreground/background contrast passed ADA Compliance, and yet this dang theme keeps altering it to some shade of grey.
How do I fix this in the code? Is there a way to access each color setting (Accent 1, Background 1, etc…) and customize the settings?
Otherwise the entire site will have to be black and white just to be compliant.
Hello,
You can access the settings in theme.css/style.css if you are using Shopify 2.0 and theme.scss.liquid/style.scss.liquid if you using old version of Shopify and you can then search for the colors schemes and manually enter the color code so the code will look something like this based on the class you selected…
.color-background-1 {
–color-foreground: var(–color-base-text);
–color-background: var(–color-base-background-1);
–gradient-background: var(–gradient-base-background-1);
}
Manually update this to any color you want…
Example:
.color-background-1 {
–color-foreground: #fff;
–color-background: #000;
–gradient-background: #fafafa;
}
Also if you like to customize it more… you can find the class of the element and do something like this below, it will only change the color of that specific section…
Let’s say we want to change the color of only banner then we will add something like this…
h2.banner__heading.h1 {
color: #e1e1e1;
}
Thank You
"Want to customise or develop your Shopify store, Get in touch.
If this comment was helpful please Like and Accept Solution .
Email: contact@northwoodstudio.com.au