Fixing Apple Safari Color Clashes
Properly matching colors with images to work on a wide variety of browsers challenges many web developers.
It is common for a web page that displays perfectly on Microsoft Internet Explorer, Google Chrome, or Mozilla Firefox browsers to look terrible on Apple Safari. Check out the images, below, as an example.
 |  |
| Apple Safari with ICC profile | Microsoft Internet Explorer with ICC profile |
Both web page images were created from the same html file. The left half of each color swatch is an image file; the right half is a browser background fill. Both halves of each image are the same color: #C2B79B. There is a disturbing color clash when rendered using Safari that isn't present in Internet Explorer.
Web developers assume that the problem is a mismatch in the RGB color code. Upon examination, they discover the color codes are identical.
The problem causing this browser compatibility issue is quite subtle yet easy to fix. Apple Safari is far more precise at handling color than other browsers. Safari is the only popular web browser that supports ICC color profiles which are data that characterizes a color space. This data is frequently embedded in graphic files.
The easiest way to solve the color clash problem is by removing the ICC color profiles with the graphic program that was used to created the image. Usually, this involves saving the image again with color profiles turned off.
Check out the corrected graphic.
 |  |
| Apple Safari without ICC profile | Microsoft Internet Explorer without ICC Profile |
Most graphic applications, like Adobe Photoshop, provide the means of removing the ICC profile. This change will not have a negative impact on the image quality and will help the web page look great on all popular browsers, including Apple Safari browsers, Apple iPads, and Apple iPhones.
Find more interesting articles By Michael Portwood at www.MichaelPortwood.com
Connect: