Fixing Apple Safari Color Clashes
Correctly matching colors with images to work on various 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 |
The same HTML file produced both web page images. 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 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 profile data that characterizes a color space. Many graphic files embed this data.
The easiest way to solve the color clash problem is by removing the ICC color profiles with the graphic program used to create 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 harm the image quality and help the web page look great on all popular browsers, including Apple Safari browsers, iPads, and iPhones.
Find more interesting articles by Michael Portwood at www.MichaelPortwood.com
Connect: