CODEWITHSUNDEEP
javascripthtmlcolorsaccessibility
Mike -- No longer here
Mike -- No longer here

Reputation: 2092

Avoiding color blindness penalty programmatically

I learned as a web developer that if the color contrast on a website is terrible, then I make very little money but I want to change that, however I ran into a problem. I have a section on my site where a user can select a color and the box is filled with that color. Let's say the color is already chosen. The box will then be like this in code for a black box:

<div ID="box" style="background:#000000;width:16px;height:16px">Text?</div>

The thing is the #000000 will change to another value based on the user's selection from running javascript. I feel that to make all CSS processors including google happy, I need to specify a foreground color so that its readable on any background color but I don't know the math behind this.

<script>
var x=(insert chosen color value);
var y=(some calculated value);
document.getElementById('box').style.background='#'+v;
document.getElementById('box').style.color='#'+y;
</script>

How do I determine the formula for foreground color regardless of the background color I choose to use so that the text is always readable?

OR

should I use a different HTML4 element to represent my color box?

and could I get away with this without having to make an image of just color boxes?

More added code

Run this code to get a sample of the strip of colours I use for my colour box.

<div ID="BOX" style="width:100%"></div>
<script>
var body=document.getElementById('BOX');
for (n=0;n<15;n++){
  var box=document.createElement('DIV');
  box.style.width='20px';
  box.style.height='20px';
  v=n.toString(16);
  box.style.background='#'+v+v+v+v+v+v;
  body.appendChild(box);
}
</script>

Upvotes: 2

Views: 566

Answers (1)

Baro
Baro

Reputation: 5530

This is my old function for check and create a color contrast (I use this in a color picker).

This is the line you can change for test the function:

var hexcolor = '#333333'; // <--- change this for test

Fiddle

HTML:

<div id="bckgrd" >
  <div id="txt">
    TEST CODE
  </div>
</div>

THE CSS:

html, body {
  background-color:#ff0000;
}
#bckgrd {
  display:inline-block;
  width:100%;
  font-size:18px;
}

THE JAVASCRIPT:

function colorContrast(color) {
    var r = hexToRgb(color).r;
  var g = hexToRgb(color).g;
  var b = hexToRgb(color).b;
  var rB = 255, gB = 255, bB = 255;
  var rN = 0, gN = 0, bN = 0;

  var cB = Math.abs(r - rB) + Math.abs(g - gB) + Math.abs(b - bB);
  var br1 = (299*r + 587*g + 114*b);
  var br2 = (299*rB + 587*gB + 114*bB);
  var dB = Math.abs(br1 - br2);

  var cN = Math.abs(r - rN) + Math.abs(g - gN) + Math.abs(b - bN);
  br2 = (299*rN + 587*gN + 114*bN);
  var dN = Math.abs(br1 - br2);

  if ((cB>500) && (dB>125)){
    return '#ffffff';
  } else if ((cN>500) && (dN>125)){
    return '#000000';
  } else {
    if ( ((0.2*cB) + (0.8*dB)) > ((0.2*cN) + (0.8*dN)) ) {
      return '#FFFFFF';
    } else {
      return '#000000';
    }
  }


}

function hexToRgb(hex) {

    var shorthandRegex = /^#?([a-f\d])([a-f\d])([a-f\d])$/i;
    hex = hex.replace(shorthandRegex, function(m, r, g, b) {
        return r + r + g + g + b + b;
    });

    var result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex);
    return result ? {
        r: parseInt(result[1], 16),
        g: parseInt(result[2], 16),
        b: parseInt(result[3], 16)
    } : null;
}
var hexcolor = '#333333'; // <--- change this for test
$('#txt').css('color', hexcolor);
$('#bckgrd').css('background-color', colorContrast(hexcolor));

Upvotes: 3

Related Questions