[ACCEPTED]-JavaScript color contraster-contrast

Accepted answer

Score: 14

I think this might save any future researchers 5 a little time, this works perfectly for 4 me. Plug in the red green and blue values 3 into the function and it outputs "dark-text" or 2 "light-text".

var darkOrLight = function(red, green, blue) {
  var brightness;
  brightness = (red * 299) + (green * 587) + (blue * 114);
  brightness = brightness / 255000;

  // values range from 0 to 1
  // anything greater than 0.5 should be bright enough for dark text
  if (brightness >= 0.5) {
    return "dark-text";
  } else {
    return "light-text";
  }
}

Using some code from 1 http://particletree.com/notebook/calculating-color-contrast-for-legible-text/ from @David's answer.

Score: 2

Take a look at http://www.0to255.com . Just a moment's glance 7 at the gradients the site presents will 6 light you right up. You'll have to puzzle, but 5 only for about 20 seconds. It's a great 4 site for such problems and a terrific source 3 of ideas for programmatic solutions. And 2 there's no math involved: just plug in some 1 bytes for rgb vals and go.

Score: 2

There is now a property called mix-blend-mode in CSS (currently 3 just in draft) that can be used to achieve 2 something similar to what you want.

.contrasting-text {
    mix-blend-mode: difference;
}

CodePen 1 someone has put together demonstrating this: https://codepen.io/thebabydino/pen/JNWqLL

Score: 0

This is my fav resource to calculate the "readability" (contrast ratio) of 15 two colors.

the W3C suggests a contrast ratio 14 of at least 5:1 exists between text and 13 background behind the text http://www.w3.org/TR/2007/WD-WCAG20-TECHS-20070517/Overview.html#G18

From the page:

The 12 compliance rate shown above is the highest 11 compliance rate met. The WCAG 2.0 level 10 AA and proposed Section 508 refresh compliance 9 level is based on achieving a contrast ratio 8 of 3:1 for text with a size of 18 points 7 (14 points if bolded) or larger or 4.5:1 6 for text with a size less than 18 points. The 5 WCAG 2.0 level AAA compliance level is meet 4 when a contrast ration of 7:1 is achieved 3 for text less than 18 points and 4.5:1 for 2 text 18 points (14 points if bolded) or 1 larger.

Score: 0

Here's another approach I got from GitHub 9 where they apply on the color of issue's 8 labels. It actually relies on CSS custom 7 properties with some calculations.

.hx_IssueLabel {
    --label-r:0;
    --label-g:0;
    --label-b:0;

    --lightness-threshold:0.453;
    --perceived-lightness:calc(((var(--label-r) * 0.2126) + (var(--label-g) * 0.7152) + (var(--label-b) * 0.0722)) / 255);
    --lightness-switch:max(0, min(calc((var(--perceived-lightness) - var(--lightness-threshold)) * -1000), 1));

    background:rgb(var(--label-r), var(--label-g), var(--label-b));
    color:hsl(0, 0%, calc(var(--lightness-switch) * 100%));
}

You will 6 need to set the RGB channel separately in 5 custom properties for the background color, then 4 the text color will run from black to white 3 by changing the lightness channel in HSL 2 color. The lightness is calculated by an 1 algorithm that receives RGB as inputs.

Source: stackoverflow.com

[ACCEPTED]-JavaScript color contraster-contrast

Substitute to css outline-color: invert

How to type a color prop?

Are there any good reasons for using hex over decimal for RGB colour values in CSS?

Difference between "-webkit-text-fill-color" and "color"?

convert to 3-digit hex color code

Setting color in a CSS class doesn't work

Grey out emoji characters (HTML / CSS)

Select2 hover color with CSS

Sort Colour / Color Values

Javascript - Sort rgb values