Safari mismatches color in CSS and background image

While working on my new blog theme I ran into some color rendering issues with Safari. The background color set with CSS did not match the color used in the background image.ImageRenderingBugInSafariThe background color was set in CSS as #333333, the color in the .gif was shown as #424242. The problem only occurs in Safari not in Firefox and not in Internet Explorer. The problem is also not .gif related it also occurs with .png or .jpg images.

At first I thought it was a bug in Safari but it actually turned out that Safari is one of the browsers that is somewhat ahead of its “competitors”. It reads and renders images according to the color profile stored in the image. How the color profiles are rendered is described with a ICC level indicator.

After reading several articles and being pointed in the direction of the color profile it was time to examine the images. It turned out that the image was saved with a "Generic RGB Profile".

There are several ways to solve this problem so far I found three:

  • Use an image for the background instead of the CSS style
  • Set the color profile to sRGB
  • Remove the color profile

The first solution uses a background image instead of the background color in the CSS. It works but it feels more like a workaround than a solution. The color is defined in images, not really flexible. On top of that it looks different across browsers.

Setting the color profile to sRGB did solve my problem but it depends on the color profile of the local system. If the system uses a different color profile it could again cause color mismatches.

Removing the color profile seems to be the best out of the three options. No need to change the CSS and no system dependency. The only extra work you have is to save the images without the default color profile or strip it afterwards. Another advantage is that he size of the image is also reduced.bg_color.gif InfoRelevant links:
How to Avoid Background Color Matching Problems with Safari
Color Rendering Difference: Firefox vs. Safari
Fixing JPG And PNG Colour Matching In Safari
This is your Mac on drugs
Color Spaces
Why your Web content will look darker on Snow Leopard
Is your system ICC Version 4 ready?

Comments