RSS

Category Archives: color space

>Color spaces in Safari and Firefox 3

>Since long, Safari 3 has supported support for color profiles (see the WebKit blog entry Color Spaces). Now the Firefox 3 betas also come with support for it, although it’s disabled by default.

To enable support for color spaces in Firefox 3 beta 4, do the following:

  1. Go to about:config
  2. Confirm you want to edit settings
  3. Set the option “gfx.color_management.enabled” to “true”
  4. Restart Firefox

Now check out some sites. Like with Safari 3, colors in sites may look quite different, since an extra step is applied to convert the colors from the original color space to the color space for your screen.

For web developers this smart behavior introduces some challenges, since sites now look different on different browsers on the same platform. Of note, Safari and Firefox implement color space support differently: Safari only adjusts images (such as PNGs), while Firefox also adjusts CSS colors.

So even between Safari and Firefox 3 with color space support enabled, there are differences, as reported in Firefox bug report #424356 (see the attached screenshot) Firefox seems to do a better job here than Safari, because with the latter the colors of different elements on a web page may mismatch, as can be seen (with Safari 3.1) on a website like http://www.route65.eu/.

For web developers, here’s a pragmatic approach:

  1. make sure your images do not include a color profile (saves ~4KB)
  2. do not specify colors in CSS if there is an image that needs to match the color, instead use a dot image with the exact same color

Still your site will look different on browsers with or without color space support, but at least you work around the problem in Safari 3.1.

Advertisements