Menu icon Foundation
Is there a way to disable colour contrast ratio warnings?

Since upgrading to Foundation 6.3, every time I build the sass I get several warnings about colour contrast ratios. I understand why it was added but it would be a good idea to have an settings/option to disable this messaging. The colours I have are part of a branding and design that I have no control over, and while good to know, I don't need being told in the command line every single time I build the Sass.

Example warning I'm seeing:

WARNING: Contrast ratio of #FFFFFF on #7ED321 is pretty bad, just 1.9
Backtrace:
        node_modules/foundation-sites/scss/util/_color.scss:75, in function `color-pick-contrast`
        node_modules/foundation-sites/scss/components/_button.scss:121, in mixin `button-style`
        node_modules/foundation-sites/scss/components/_button.scss:236, in mixin `foundation-button`
        ../WebAppCommon/assets/src/scss/foundation/foundation-sites.scss:11

Foundation 6.3Contrast ratiowarning

Since upgrading to Foundation 6.3, every time I build the sass I get several warnings about colour contrast ratios. I understand why it was added but it would be a good idea to have an settings/option to disable this messaging. The colours I have are part of a branding and design that I have no control over, and while good to know, I don't need being told in the command line every single time I build the Sass.

Example warning I'm seeing:

WARNING: Contrast ratio of #FFFFFF on #7ED321 is pretty bad, just 1.9
Backtrace:
        node_modules/foundation-sites/scss/util/_color.scss:75, in function `color-pick-contrast`
        node_modules/foundation-sites/scss/components/_button.scss:121, in mixin `button-style`
        node_modules/foundation-sites/scss/components/_button.scss:236, in mixin `foundation-button`
        ../WebAppCommon/assets/src/scss/foundation/foundation-sites.scss:11
Philip King almost 3 years ago

I'd guess that the sass functions imported at the top of _settings.scss have something to do with it but I've not experimented with disabling any of the functions. I’m interested in an answer to this too.

Mark Smallman almost 3 years ago

Update your app.scss & _settings.scss file - your getting the error due to missing components.
I know the error you are getting does not indicate that, but that's what it is - just found this out myself yesterday.

york over 2 years ago

Has anyone managed to disable it?

york over 2 years ago

Here _color.scss

 

  $contrast: color-contrast($base, nth($colors, 1));
  $best: nth($colors, 1);
  @for $i from 2 through length($colors) {
    $current-contrast: color-contrast($base, nth($colors, $i));
    @if ($current-contrast - $contrast > $tolerance) {
      $contrast: color-contrast($base, nth($colors, $i));
      $best: nth($colors, $i);
    }
  }
  @if ($contrast < 1.5) {
    @warn "Contrast ratio of #{$best} on #{$base} is pretty bad, just #{$contrast}";
  }
  @return $best;
}

Mark Smallman over 2 years ago

@York See my post above. 

york over 2 years ago

@Mark I have a custom configuration and I want to keep it. Updating 'setting' and 'app' for me is not an option.

Mark Smallman over 2 years ago

Not at systems, but if you compare the new settings.scss and yours, you should see that the new one has extra items. Add those to your settings.scss file, and it should compile without the errors.

york over 2 years ago

 The only thing that happens is that I had a warning in the terminal. And it bothered me, so lower the '$contrast' to 1.5.

Tim over 2 years ago

I've updated settings with the new content and it's still happening. This warning is behaving as intended, right? It shows a warning if the contrast ratio isn't deemed good enough. An option to disable this warning in the settings would be great.

This is actually breaking a build for me at work because the warning is coming out of STDERR, not STDOUT.

Tim over 2 years ago

@york, for people who are consuming Foundation via NPM for example, we can't overwrite _color.scss.

york over 2 years ago

@Tim, You can modify '_color.scss', I also work with NPM.

It is only a temporary solution. I know that if you do a 'Bower update' and update 'foundation-sites' deletes that modification.

But hopefully by then there is already a way to disable this or at least lower the '$ contrast' from '_setting.scss'. 

Tim over 2 years ago

Hi @york, unfortunately, I can't since I work in a team with several other devs, plus the build server. They each have their own setup. Whatever I do to the /node_modules/ folder isn't checked in so they would all have to make the change. Atm we have changed the file on the build server but if npm install is run we're back at square one. I would love a contrast setting in the _settings.scss file as you mentioned.

The other option is to change my Gulp build to extract /foundation-sites/ out into the source control, so I have full control if I need to like in these situations. I'm just hoping someone from Zurb see's this, or someone makes a pull request with an update.

york over 2 years ago

I am now busy but when I have time I will do the Pull Resquest because it is easy to solve with a SASS variable.

Of forms I did a Pull Request to solve the problem there is of Babel and still I have not received answer... 

https://github.com/zurb/foundation-zurb-template/pull/43

Tim over 2 years ago

@york Have you had any time recently to have a look into making the contrast ratio a variable in the settings?

york over 2 years ago

Hi @Tim

I have not had time to do the pull-request. But I can tell you how to do this. The 'color-pick-contrast' function is called in all these places:

So in 'color.scss' you have to declare a variable outside the 'color-pick-contrast ' function, for example '$contrastRatio: 3 !Default' which is the default value.

 

Then in '_settings.scss' you can redefine the variable. To disable it you should put 0.

Tim over 2 years ago

Look's like we have a PR on the way that will fix this issue:

https://github.com/zurb/foundation-sites/pull/9853

Kester Hynds 7 months ago

This has been fixed. 

 

You can add this to _settings.scss:

 

$contrast-warnings: false;

Kester Hynds 7 months ago

This has been fixed. 

 

 

 

You can add this to _settings.scss:

 

 

 

$contrast-warnings: false;