bootstrap icon indicating copy to clipboard operation
bootstrap copied to clipboard

Use WCAG 3 luminance algorithm

Open rivajunior opened this issue 3 years ago • 0 comments

Prerequisites

Proposal

Change threshold value from .03928 to .04045 in the luminance scss function.

Example:

@function luminance($color) {
  $rgb: (
    "r": red($color),
    "g": green($color),
    "b": blue($color)
  );

  @each $name, $value in $rgb {
    $value: if(divide($value, 255) < .04045, divide(divide($value, 255), 12.92), nth($_luminance-list, $value + 1));
    $rgb: map-merge($rgb, ($name: $value));
  }

  @return (map-get($rgb, "r") * .2126) + (map-get($rgb, "g") * .7152) + (map-get($rgb, "b") * .0722);
}

I don't know if it is the only change required to be updated with WCAG 3.0 compliance, but as I checked in Calculating Relative Luminance, I believe it is.

Motivation and context

From IEC standard for sRGB, 0.04045 is the right threshold for calculating relative luminance instead of 0.03928.

See Relative luminance and Web Accessibility: Understanding Colors and Luminance

rivajunior avatar Aug 24 '22 23:08 rivajunior