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 about 2 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 about 2 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 about 2 years ago

Has anyone managed to disable it?

york about 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 about 2 years ago

@York See my post above. 

york about 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 about 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 about 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 about 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 about 2 years ago

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

york about 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 about 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 about 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 about 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 about 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 almost 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 8 days ago

This has been fixed. 

 

You can add this to _settings.scss:

 

$contrast-warnings: false;

Kester Hynds 8 days ago

This has been fixed. 

 

 

 

You can add this to _settings.scss:

 

 

 

$contrast-warnings: false;