What is the importance of achieving the prescribed contrast ratio? The intent of this Success Criterion is to provide enough contrast between text and its background so that it can be read by people with moderately low vision. : ( : , : , : , : , : , : , : , : ) !default; $theme-colors "primary" $primary "secondary" $secondary "success" $success "info" $info "warning" $warning "danger" $danger "light" $light "dark" $dark Let us take example of a simple button. Based on the set, buttons are generated for each theme color variant in using mixin. This mixin receives a background color for which we need to generate corresponding contrast text color using function. This function uses , which defaults to to achieve WCAG 2 AA contrast ratio. $theme-colors scss/_button.scss button-variant color-contrast $min-contrast-ratio 4.5 @ , in { #{ } {
    @ button-variant( , );
  }
} each $color $value $theme-colors .btn- $color include $value $value In function, the background color's is compared with foreground colors in following order: color-contrast contrast-ratio $color-contrast-light $color-contrast-dark $white $black We can override the values of and which is set to default as and respectively. All these values are looped to find the suitable match. $color-contrast-light $color-contrast-dark $white $black @function color-contrast( , : , : , : ) { : , , , ; : ; : null;

  @ in { : contrast-ratio( , );
    @ > {
      @return ;
    } @ if > { : ; : ;
    }
  }

  @ ;

  @return ;
} $background $color-contrast-dark $color-contrast-dark $color-contrast-light $color-contrast-light $min-contrast-ratio $min-contrast-ratio $foregrounds $color-contrast-light $color-contrast-dark $white $black $max-ratio 0 $max-ratio-color each $color $foregrounds $contrast-ratio $background $color if $contrast-ratio $min-contrast-ratio $color else $contrast-ratio $max-ratio $max-ratio $contrast-ratio $max-ratio-color $color warn "Found no color leading to #{$min-contrast-ratio}:1 contrast ratio against #{$background}..." $max-ratio-color When the value of contrast ratio is greater than , that color is returned. Contrast ratio can be calculated by finding out relative luminance of both background and foreground color in current loop. $min-contrast-ratio @function contrast-ratio( , : ) { : luminance( ); : luminance(opaque( , ));

  @return if( > , ( + .05) / ( + .05), ( + .05) / ( + .05));
} $background $foreground $color-contrast-light $l1 $background $l2 $background $foreground $l1 $l2 $l1 $l2 $l2 $l1 to calculate relative luminance is used, which replaces algorithm in Bootstrap. WCAG algorithm yiq contrast relativeLuminance (c) {
  c = c / ; c < ? c / : .pow((c + ) / , );
} 255 return 0.03928 12.92 Math 0.055 1.055 2.4 SCSS implementation: @function luminance( ) { : ( : red( ), : green( ), : blue( )
  );

  @ , in { : if( / < . , / / , nth($_luminance-list, + )); : map-merge( , ( : ));
  }

  @return (map-get( , ) * .2126) + (map-get( , ) * .7152) + (map-get( , ) * .0722);
} $color $rgb "r" $color "g" $color "b" $color each $name $value $rgb $value $value 255 03928 $value 255 12.92 $value 1 $rgb $rgb $name $value $rgb "r" $rgb "g" $rgb "b" Here, is a list of all possible value for where lies between [0, 255], which is the range for any channel. This method is used to overcome the difficulty of not having a power function in SCSS as mentioned . The same list is maintained in Bootstrap as well, with 4th decimal point. . This $_luminance-list Math.pow((c + 0.055) / 1.055, 2.4) c here Refer here for more precise value The , and are SCSS in-built functions to extract each channel's value for calculation. red() green() blue() is function, to remove the alpha channel by truncating it and mixing it with white in a ratio equal to alpha channel's value. opaque @function opaque( , ) {
  @return mix(rgba( , 1), , opacity( ) * 100);
} $background $foreground $foreground $background $foreground Few PRs are already resolved to achieve this contrast ratio like mentioned and . here here References https://www.w3.org/WAI/WCAG21/Understanding/contrast-minimum.htm https://github.com/twbs/bootstrap/pull/30168

Read My Stories

Too Long; Didn't Read

In your car, at home, or at work — Bosch technology shapes many areas of life.

How To Generate WCAG Compliant Contrast Color in Bootstrap

Too Long; Didn't Read

Company Mentioned

Srikanth Sharma

About Author

TOPICS

THIS ARTICLE WAS FEATURED IN...

How To Generate WCAG Compliant Contrast Color in Bootstrap

Too Long; Didn't Read

Company Mentioned

Srikanth Sharma

About Author

TOPICS

THIS ARTICLE WAS FEATURED IN...

RELATED STORIES