# $primary-medium SCSS variable problems

**URL:** https://meta.discourse.org/t/primary-medium-scss-variable-problems/122390
**Category:** Development
**Created:** [July 9, 2019, 2:34am UTC](https://meta.discourse.org/t/primary-medium-scss-variable-problems/122390 "2019-07-09T02:34:21Z")
**Posts on this page:** 5
**Page:** 1

<div class="post-metadata">

### Author: ![Phillip\_Rooney](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/phillip_rooney/32/141202_2.png) [@Phillip\_Rooney](https://meta.discourse.org/u/Phillip_Rooney)
#### Post date: [July 9, 2019, 2:34am UTC](https://meta.discourse.org/t/primary-medium-scss-variable-problems/122390/1 "2019-07-09T02:34:21Z")

</div>

I have a default primary colour: #4d238c. The issue is: the color for $primary-medium being generated (#a179de) doesn’t pass accessibility guidelines, so i need to make it darker.

It seems laborious to change it in all places where the system is using the medium colour when I could just over write $primary-medium to be red say for example

---

<div class="post-metadata">

### Author: ![awesomerobot](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/awesomerobot/32/142900_2.png) [@awesomerobot](https://meta.discourse.org/u/awesomerobot)
#### Post date: [July 9, 2019, 3:10pm UTC](https://meta.discourse.org/t/primary-medium-scss-variable-problems/122390/2 "2019-07-09T15:10:41Z")

</div>

Yeah totally understand this, at the moment there’s no way to directly override any of the secondary variables we automatically generate because those are all set in stone when the CSS is built. So in the short term, you will need to manually make these changes.

**Some explanation:**

The color schemes are meant to be a super-simple way to define colors, and anything more specific than that needs to be custom CSS. This was discussed a bit more here: [Customizing colors - #2 by awesomerobot](https://meta.discourse.org/t/customizing-colors/85842/2)

**Some things for us to think about:**

I don’t think an advanced color scheme editor that grants access to override those secondary variables would be a bad idea, but because they’re used so broadly you’d likely need to write some CSS anyway.

So for example… you might want to override all _text_ occurrences of $primary-medium… but it’s also in places for borders and other elements where the higher contrast $primary-medium wouldn’t be desirable. So at best an advanced color editor would _reduce_ the custom CSS needed, but wouldn’t eliminate it entirely.

That being said… the primary issue here is text contrast for accessibility, right? Our default styles do fail for text contrast in some areas, and it’s possible that if we improve there this wouldn’t be a problem for you to begin with…

So I think in the near future our team can look at default text accessibility, and further down the road we can look at improving our color scheme tools to consider accessibility ([https://cloudflare.design/color/](https://cloudflare.design/color/) is cool experiment that factors in text contrast, for example).

---

<div class="post-metadata">

### Author: ![Phillip\_Rooney](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/phillip_rooney/32/141202_2.png) [@Phillip\_Rooney](https://meta.discourse.org/u/Phillip_Rooney)
#### Post date: [July 9, 2019, 10:36pm UTC](https://meta.discourse.org/t/primary-medium-scss-variable-problems/122390/3 "2019-07-09T22:36:54Z")

</div>

Hey Kris

Thanks for the reply so quickly.

Yes, our primary concern is accessibility as we are using your product in a governmental context.

I have worked around the accessibility of the contrast in a step by step manner, but as discussed it would be good to have the default colours accessible.

The site however is not just failing on contrast e.g. other often failing elements are - ( List items ( `<li>` ) are not contained within `<ul>` or `<ol>` parent elements.)

But at the moment contrast is all i can control so its fine for now until a fix is put in place.

---

<div class="post-metadata">

### Author: ![awesomerobot](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/awesomerobot/32/142900_2.png) [@awesomerobot](https://meta.discourse.org/u/awesomerobot)
#### Post date: [July 11, 2019, 1:46am UTC](https://meta.discourse.org/t/primary-medium-scss-variable-problems/122390/4 "2019-07-11T01:46:56Z")

</div>

2 posts were split to a new topic: [Lighthouse accessibility audit issues](https://meta.discourse.org/t/lighthouse-accessibility-audit-issues/122612)

---

<div class="post-metadata">

### Author: ![wadestriebel](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/wadestriebel/32/167628_2.png) [@wadestriebel](https://meta.discourse.org/u/wadestriebel)
#### Post date: [August 29, 2021, 6:46pm UTC](https://meta.discourse.org/t/primary-medium-scss-variable-problems/122390/5 "2021-08-29T18:46:41Z")

</div>

We stumbled onto this thread because of a similar issue, we solved it with a workaround by adding the following to the theme’s common css:

```plaintext
:root {
  --primary-medium: #666666;
}

```
