Using jQuery to Fix Background & Foreground Color Contrast Automatically

I encountered a problem with some email-compatible HTML (ie, inline w/old school BGCOLOR parameters) that was being displayed on a website. The background/foreground colors were perfect for the lowest-denomination/compatible email message, but the website's CSS caused the text to be completely unreadable (black text on black background & white text on light grey background.)

The problems I encountered were due to:

• The table didn't have an ID.
• No CSS classes were being used in the markup.
• I didn't have any control over the color scheme that the content was to be displayed on.
• I wasn't generating the HTML being added to the webpage.

I needed to find a one-size-fits-all solution. I discovered the fixColors() jQuery plugin. I added a DIV around the HTML and called it using $('#orderHTML').fixColors(); and all of my "Section 508" color contrast issues went away.

fixColors() jQuery plugin

markandey / fixColors.js

fixColors.js is jquery plugin to fix contrast ratio of foreground and background color automatically.

fixColor.js

fixColors.js is jQuery plugin to fix contrast ratio of foreground and background color automatically.

How to Use?

Its very simple to use, just include jQuery on your page and fixColor.js Call fixColors every time you want to fix the colors of a content.

$('div').fixColors();

How Code Works?

Major part of code goes in function

    function getColorInfo(strColor){
        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
        };
    }

This function finds some interesting information about a color…

View on GitHub

Another jQuery plugin for color contast is colorcontrast, but you may encounter some issues. (It hasn’t been updated since 2011.)
https://github.com/joggink/jquery-colorcontrast](https://github.com/joggink/jquery-colorcontrast)

jquery-colorcontrast

joggink / jquery-colorcontrast

jQuery color contrast

The purpose of this plugin

Defining the text color by using the background-color or background-image colors as a reference. To do so we use the function defined by the WAI working group:

(This is a suggested algorithm that is still open to change.) Two colors provide good color visibility if the brightness difference and the color difference between the two colors are greater than a set range.

Color brightness is determined by the following formula: ((Red value X 299) + (Green value X 587) + (Blue value X 114)) / 1000 Note: This algorithm is taken from a formula for converting RGB values to YIQ values. This brightness value gives a perceived brightness for a color.

Source: W3 WAI working group - Techniques For Accessibility Evaluation And Repair Tools

View on GitHub