Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Found no color leading for #5e81ac and #bf616a

See original GitHub issue

Operating system and version: macOS
Compilation issue
Bootstrap v5-alpha2

For 2 colors I get below warnings in node_modules/bootstrap/scss/_functions.scss 117:3 color-contrast()

WARNING: Found no color leading to 4.5:1 contrast ratio against #5e81ac… WARNING: Found no color leading to 4.5:1 contrast ratio against #bf616a…

The text color for this background color sometime is dark sometime is light. For example for buttons and bg-* classes are dark, while for badges are light.

Issue Analytics

State:
Created 3 years ago
Reactions:1
Comments:13 (12 by maintainers)

Top GitHub Comments

9reactions

motad333commented, Aug 16, 2021

in bootstrap 5 i solved this warnings by changing $min-contrast-ratio from 4.5 that is default to 2.5 use bellow line in settings.scss and import settings before bootstrap $min-contrast-ratio: 2.5;

4reactions

thewebartisan7commented, Oct 26, 2020

I only change variables, the functions are default from bootstrap.

I can’t find on codepen.io bootstrap v5 alpha, so not sure where to add live example, but I can show you live compiled example and below are how to reproduce this.

Main app.scss file that first include variables overrides and then main bootstrap.scss directly from node_modules.

https://gist.github.com/thewebartisan7/f14097a263b1a3db0e0692139d6cc14d

Compiled app.css:

https://gist.github.com/thewebartisan7/bfc4cfa1b04182d02a26604c3ba50086

Demo of result: http://laravel-ui.laraloop.com/docs/theme

Compare secondary and success button vs badges secondary and success. Text are dark for buttons and light for badges.

Full error log:

$ node_modules/sass/sass.js sass/app.scss dist/app.css
Warning: Found no color leading to 4.5:1 contrast ratio against #bf616a...
    node_modules/bootstrap/scss/_functions.scss 117:3        color-contrast()
    node_modules/bootstrap/scss/mixins/_forms.scss 36:12     form-validation-state()
    node_modules/bootstrap/scss/forms/_validation.scss 10:3  @import
    node_modules/bootstrap/scss/_forms.scss 9:9              @import
    node_modules/bootstrap/scss/bootstrap.scss 23:9          @import
    sass/app.scss 20:9                                       root stylesheet

Warning: Found no color leading to 4.5:1 contrast ratio against #5e81ac...
    node_modules/bootstrap/scss/_functions.scss 117:3      color-contrast()
    node_modules/bootstrap/scss/mixins/_buttons.scss 9:11  button-variant()
    node_modules/bootstrap/scss/_buttons.scss 60:5         @import
    node_modules/bootstrap/scss/bootstrap.scss 24:9        @import
    sass/app.scss 20:9                                     root stylesheet

Warning: Found no color leading to 4.5:1 contrast ratio against #5e81ac...
    node_modules/bootstrap/scss/_functions.scss 117:3       color-contrast()
    node_modules/bootstrap/scss/mixins/_buttons.scss 18:20  button-variant()
    node_modules/bootstrap/scss/_buttons.scss 60:5          @import
    node_modules/bootstrap/scss/bootstrap.scss 24:9         @import
    sass/app.scss 20:9                                      root stylesheet

Warning: Found no color leading to 4.5:1 contrast ratio against #bf616a...
    node_modules/bootstrap/scss/_functions.scss 117:3      color-contrast()
    node_modules/bootstrap/scss/mixins/_buttons.scss 9:11  button-variant()
    node_modules/bootstrap/scss/_buttons.scss 60:5         @import
    node_modules/bootstrap/scss/bootstrap.scss 24:9        @import
    sass/app.scss 20:9                                     root stylesheet

Warning: Found no color leading to 4.5:1 contrast ratio against #bf616a...
    node_modules/bootstrap/scss/_functions.scss 117:3       color-contrast()
    node_modules/bootstrap/scss/mixins/_buttons.scss 18:20  button-variant()
    node_modules/bootstrap/scss/_buttons.scss 60:5          @import
    node_modules/bootstrap/scss/bootstrap.scss 24:9         @import
    sass/app.scss 20:9                                      root stylesheet

Warning: Found no color leading to 4.5:1 contrast ratio against #5e81ac...
    node_modules/bootstrap/scss/_functions.scss 117:3       color-contrast()
    node_modules/bootstrap/scss/mixins/_buttons.scss 77:17  button-outline-variant()
    node_modules/bootstrap/scss/_buttons.scss 66:5          @import
    node_modules/bootstrap/scss/bootstrap.scss 24:9         @import
    sass/app.scss 20:9                                      root stylesheet

Warning: Found no color leading to 4.5:1 contrast ratio against #5e81ac...
    node_modules/bootstrap/scss/_functions.scss 117:3       color-contrast()
    node_modules/bootstrap/scss/mixins/_buttons.scss 80:18  button-outline-variant()
    node_modules/bootstrap/scss/_buttons.scss 66:5          @import
    node_modules/bootstrap/scss/bootstrap.scss 24:9         @import
    sass/app.scss 20:9                                      root stylesheet

Warning: Found no color leading to 4.5:1 contrast ratio against #bf616a...
    node_modules/bootstrap/scss/_functions.scss 117:3       color-contrast()
    node_modules/bootstrap/scss/mixins/_buttons.scss 77:17  button-outline-variant()
    node_modules/bootstrap/scss/_buttons.scss 66:5          @import
    node_modules/bootstrap/scss/bootstrap.scss 24:9         @import
    sass/app.scss 20:9                                      root stylesheet

Warning: Found no color leading to 4.5:1 contrast ratio against #bf616a...
    node_modules/bootstrap/scss/_functions.scss 117:3       color-contrast()
    node_modules/bootstrap/scss/mixins/_buttons.scss 80:18  button-outline-variant()
    node_modules/bootstrap/scss/_buttons.scss 66:5          @import
    node_modules/bootstrap/scss/bootstrap.scss 24:9         @import
    sass/app.scss 20:9                                      root stylesheet

Warning: Found no color leading to 4.5:1 contrast ratio against #5e81ac...
    node_modules/bootstrap/scss/_functions.scss 117:3             color-contrast()
    node_modules/bootstrap/scss/helpers/_colored-links.scss 8:19  @import
    node_modules/bootstrap/scss/_helpers.scss 2:9                 @import
    node_modules/bootstrap/scss/bootstrap.scss 46:9               @import
    sass/app.scss 20:9                                            root stylesheet

Warning: Found no color leading to 4.5:1 contrast ratio against #bf616a...
    node_modules/bootstrap/scss/_functions.scss 117:3             color-contrast()
    node_modules/bootstrap/scss/helpers/_colored-links.scss 8:19  @import
    node_modules/bootstrap/scss/_helpers.scss 2:9                 @import
    node_modules/bootstrap/scss/bootstrap.scss 46:9               @import
    sass/app.scss 20:9