Foundation-sites: Unable to disable color contrast warning in 6.3.0

[chrismanderson]

My deploy and CI logs are flooded with warnings about color contrast ratios with no way that I can see of how to disable them. I understand the value in having accessible color choices, but these logs make it difficult to debug real issues. Not only that, the warning itself isn't that intuitive.

W, [2017-03-05T20:50:47.911957 #389]  WARN -- : WARNING: Contrast ratio of #fefefe on #ffae00 is pretty bad, just 1.8
on line 75 of /tmp/build_6d11d76cec550480d57c8dfd542a6524/vendor/bundle/ruby/2.3.0/gems/foundation-rails-6.3.0.0/vendor/assets/scss/util/_color.scss, in `button-style'
from line 236 of /tmp/build_6d11d76cec550480d57c8dfd542a6524/vendor/bundle/ruby/2.3.0/gems/foundation-rails-6.3.0.0/vendor/assets/scss/components/_button.scss, in `foundation-button'
from line 16 of /tmp/build_6d11d76cec550480d57c8dfd542a6524/app/assets/stylesheets/foundation_and_overrides.scss
from line 21 of /tmp/build_6d11d76cec550480d57c8dfd542a6524/app/assets/stylesheets/application.scss

I have to trace line numbers way up the foundation project and even then it's really tough to tell what is the incorrect color/variable in question. (As an aside, I'm fairly sure the warning in question references a Foundation provided color setting, not a custom setting.

How to reproduce this bug:

Set custom colors in _settings.html.erb.

What should happen:

I should see no warnings about my color selection. Or, there should be a SASS variable to enable or disable the warnings.

What happened instead:

My deploy, CI, and dev logs are flooded with warnings.

[brettsmason]

@chrismanderson I agree on this - it can be a bit overwhelming. I think a variable needs to be added to disable the warnings if set to false, as unfortunately you don't always have a choice in what colours to use (at least I don't anyway).

I think the variable should should make the warnings enabled by default, but should be easy to turn them off.

Could you try this for me here: https://github.com/zurb/foundation-sites/blob/develop/scss/util/_color.scss#L74

Change that line to something like @if ($contrast < 3 and $contrast-warnings) {
Then add a variable $contrast-warnings: false; in your _settings.scss file.

If that works OK I'll sort out a PR to add this.

[chrismanderson]

Yup that worked properly. Making that $contrast-warnings enabled by default but allowing it to be disabled seems like a good compromise to me.

[sanderblue]

+1

I'm also seeing this and would like the ability to suppress the warnings.

[ali-hellani]

+1

[DaSchTour]

Because of this issue I also tried to convince developers of sass, libsass, node-sass and so on to think about something like log levels in sass. But that didn't work at all 😞

[jzatt]

+1

Option to disable the warning would be ideal!

[sanderblue]

The PR above has been approved so we're in waiting mode at the moment for this option to be merged into Foundation's develop branch.

[Penthious]

If you are still using the older version of foundation what you can do on you build step is add something like this:

const fs = require('fs');

const colorFile = 'node_modules/foundation-sites/scss/util/_color.scss';

fs.readFile(colorFile, 'utf8', (err, data) => {
    if (err) throw err;

    const result = data.replace(/\$contrast < 3/g, '$contrast < 1.5');

    fs.writeFile(colorFile, result, 'utf8', (error) => {
        if (error) return console.log(error);
    });
});

What it does is check the _color file and replaces the contrast with 1.5

[markhowellsmead]

$contrast-warnings: false;

[m-lamarre]

$contrast-warnings: false

You are a legend. Thanks @markhowellsmead. This is all I needed to add to my .sass file to stop the warnings. 👍