There might me scenario when you are fetching html snippet from external source, what if color specified in the external html is not working on your page due to different background foreground definitions. is there jQuery Plugin exists which can fix contrast ratio so that text is still readable?
Yes this is jQuery plugin which automatically analyses the contrast ratio between foreground and background and corrects automatically to make it readable.
Its very simple to use. include javascript from here and call function fixColors.
<script src="http://www.purplegene.com/js/fixColors.js"> </script> <scrip> $('div').fixColors(); </scrip>
Core logic of this code exists in function getColorInfo which returns various information about any color, like brightness of color and maximum color contrasting color, etc.
function getColorInfo(strColor){ //regEx to parse rgb(10,10,10)
var match=strColor.match(/rgba[ \t]*\([ \t]*([0-9.]+)[ \t]*,[ \t]*([0-9.]+)[ \t]*,[ \t]*([0-9.]+)[ \t]*,[ \t]*([0-9.]+)[ \t]*\)/); var isAlpha=true; if(match===null){ match=strColor.match(/rgb[ \t]*\([ \t]*([0-9.]+)[ \t]*,[ \t]*([0-9.]+)[ \t]*,[ \t]*([0-9.]+)[ \t]*\)/); isAlpha=false; } var r = match[1]*1, g = match[2]*1,b = match[3]*1, a = match[4]*1;
//
var brightness = (r * 299 + g * 587 + b * 114) / 1000, cb = 20;
if (brightness < 127) {
cb = 235;
}
isTransparent=(isAlpha)&&(a===0);
var rgbOnly='rgb('+r+','+g+','+b+')';
var maxContrast = "rgb(" + cb+"," +cb+"," +cb+")";
return {'r':r,'g':g,'b':b,'a':a,
'brightness':brightness,
'maxContrast':maxContrast,
'rgb':rgbOnly,
'isAlpha':isAlpha,
'isTransparent':isTransparent
};
}
No comments:
Post a Comment
Your comment will inspire me, Please leave your comment