CFLib.org – Common Function Library Project

getForegroundColor(backgroundHEX)

Last updated May 9, 2009

author

Scott Lingle

Version: 0 | Requires: CF5 | Library: StrLib

Description:
This takes a background color in HEX and returns an appropriate color value (light or dark) to use as a text color. Uses an algorithm from a draft W3C document on accessibility.

Return Values:
returns a string

Example:

<cfoutput><p style="background-color: ##000033;"><span style="color: #getForegroundColor('##000033')#;">Text Color!</span></p></cfoutput>

Parameters:

Name Description Required
backgroundHEX string containing HEX color Yes

Full UDF Source:

<!---
 Determines a light or dark text color based on the given background color.
 
 @param backgroundHEX 	 string containing HEX color (Required)
 @return returns a string 
 @author Scott Lingle (sal21@psu.edu) 
 @version 0, May 9, 2009 
--->
<cffunction name="getForegroundColor" output="false" access="private" returntype="string" hint="gets the appropriate FG color.">
    <cfargument name="backgroundHEX" required="true" />
    <cfscript>
        // clean up the incoming color, strip the pound sign.
        var cleanHex = Replace(arguments.backgroundHEX,"##","");
        // break the hex up and convert to RGB
        var R = InputBaseN(Mid(cleanHex, 1, 2),16);
        var G = InputBaseN(Mid(cleanHex, 3, 2),16);        
        var B = InputBaseN(Mid(cleanHex, 5, 2),16);
        
        //determine the backgrounds 'brightness' (from a W3C Accessibility draft)
        var brightness = ((R * 299) + (G * 587) + (B * 114)) / 1000;
        //determine if it is a light or dark background and set the return to either black or white.
        if(255 - brightness lt 128) {
            return "##000000";
        } else {
            return "##ffffff";
        }
    </cfscript>    
</cffunction>
blog comments powered by Disqus

Search CFLib.org


Latest Additions

Kevin Cotton added
date2ExcelDate
May 5, 2016

Raymond Camden added
CapFirst
April 25, 2016

Chris Wigginton added
loremIpsum
January 18, 2016

Gary Stanton added
calculateArrival...
November 19, 2015

Sebastiaan Naafs - van Dijk added
getDaysInQuarter
November 13, 2015

Created by Raymond Camden / Design by Justin Johnson