How to get a contrasting font color for a given background ?

This is a sample code to give a font color with a good contrast for a given background color.

That php code snipped could be useful in case you give your users the option to set a custom background but not the font color (to avoid too many options) and you want that your text are always visible.

It simply returns a font color white or black depending on the background, but you can modify the function get_contrast if you want something more sophisticated.

The main function is:

function get_font_color($color)
{
  $ar=html2rgb($color);
  return get_contrast($ar[0], $ar[1], $ar[2]);
}

Supporting functions:

function get_contrast ($r, $g, $b)
{// returns white or black depending on the background 
// in red green and blue
  $a = 1 - ( 0.299*$r  + 0.587*$g + 0.114*$b)/255;
  if ($a<0.5)
  {
    return '#000';
  }
  else
  {
    return '#fff';
  }
}

function html2rgb($color)
{// gets an array of R,G,B from an hexadecimal 
// color in html format
  if ($color[0] == '#') $color = substr($color, 1);
  
  if (strlen($color) == 6)
  {
    list($r, $g, $b) = array($color[0].$color[1],
                             $color[2].$color[3],
                             $color[4].$color[5]);
  }                           
  elseif (strlen($color) == 3)
  {
    list($r, $g, $b) = array($color[0].$color[0],
                             $color[1].$color[1],
                             $color[2].$color[2]);
  }
  else
  {
    return false;
  }
  $r = hexdec($r); $g = hexdec($g); $b = hexdec($b);

  return array($r, $g, $b);
}

Unit testing:

$i=0;
while ($i<1600000)
{
  $rgb='#'.strtoupper(str_pad(dechex($i), 6, '0', STR_PAD_LEFT));
  echo '<div style="background-color:'.$rgb.'; color:'.get_font_color($rgb).'">'.$rgb.'</div>';
  $i++;
}

Thanks to this web entries:
Determine font color based on background color
Convert RGB from an HTML Hex Color

CAPTCHAS cachondos, avui, follo a gmail

Quina va ser la meva sorpresa l'altre dia, al crear una conta nova de gmail, al veure aquest CAPTCHA.





Hoy FOLLO con FATATAS !!!

Impressionant !

The end of the double-enter ?

Some years ago, 3 to 4 years, firefox start prompting for "Do you want Firefox to remember this password" (I think it was from FF 1.5 but not really sure)

From then the anoying "remember this password" popup has driven us to what I call "The double-enter syndrome", when you enter some login credentials in any site, you usually tend to hit double-enter to, first, submit the form, and then take the default action of the remember-this-password popup.

No need to say that Internet Explorer 7 follows the new trend and makes you choice with a popup if you want to store or not the password, good for them, don't innovate, copy-it.

I think it's one of the worst ideas that Firefox have introduced in the browsers standards, do you remember the double-click ?

Now we have double-enter :)

But Firefox 3 comes to the rescue, the new popup is not a modal window, is more like an option that remains below the browser toolbar (maybe it has to disappear after a while for security reasons ?). It's a lot better than the modal dialog and avoids the double-enter syndrome, oh yeah !

We're all waiting to switch to the new FF3 for the memory leaks issues, but the change in the double-enter behaviour will be one more good reason to change.

IE8 will follow this FF change ?

PS: There're options to change the double-enter default behaviour in FF2 and IE7, but the 90% of the people don't change the options of the browser and that's one of the greatness of the web (and usually the worst nigthmare of the web developer community)

Bug in animateClass jquery extension

If you have tried to use the excellent animateClass extension to jquery maybe you have found that doesn't work in IE.

For example this sample code changes dynamically a h1 element from class "inicial" to class "final" producing a nice transition animation when you enter the page.


<script type="text/javascript">
$(document).ready(function()
{
$('#titolseccio').animateClass('final', 500);
});
</script>

With this release of animateClass (January 2007) this example only works in some browsers (particularly Firefox, the most popular in the developers community), but fails in Internet Explorer 6 and 7 (shamefully the most broadly used by the rest of the mortals (including customers))

You can solve this particular problem patching the animateClass.js

You have to download the uncompressed version of animateClass.js and look for a line like this:

if( typeof newStyle[n] != "function" && newStyle[n] /* No functions and null properties



and add this two conditions:

&& typeof newStyle[n] != "boolean" && typeof newStyle[n] != "number"


Resulting in this line:

if( typeof newStyle[n] != "function" && typeof newStyle[n] != "boolean" && typeof newStyle[n] != "number" && newStyle[n] /* No functions and null properties */


Now you can save your patched version of animateClass.js and reload your html page in Explorer (remember to Shift+Reload to avoid cached .js confusions)

The explanation of the problem is that javascript IE doesn't allow you to use string functions (like replace) on booleans and numbers, causing an unhandled exception.

Watch Out, this is not a generic patch, I'll warn the animateClass developer to patch it properly. For example, with this patch, you will not be able to animate any number CSS value (in the example the animation is from "20px" to "40px" the px makes it a string value, not a number).