Pages

jQuery plugin to fix color contrast ratio between background and foreground


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