Color Consistency – Graphics Can Color Shift in the Firefox Browser

Ensuring color accuracy and color consistency is important and it can be tricky. During the testing phase of a website development project we noticed the color of an image shifts when viewed in Firefox. In researching the issue we saw a lot of information about how to adjust or calibrate the users computer monitor, but little information about how to correctly setup the graphic to match the desired hexadecimal value. We are writing this article to help web and graphic designers address the issue.

The hexadecimal value of the color when viewed in Firefox was different than in the original graphic.

You can see in the Firefox screen shot that the lower, triangular section of the green box has more yellow in it the the more vivid green rectangular section it sits below.

Working in Photoshop, saving the PNG using “Save As” created the desired result in Chrome, Edge, IE, Safari, etc. It was only in FireFox where the solid color in the image did not match up with the hexadecimal background color it was intended to blend into.

The solution we found was in the process of how the PNG is saved in Photoshop, using “Save for Web and Devices”. With “Convert to sRGB” checked, the image maintained its correct hexadecimal value on screen. By this I mean you can use an eye dropper to verify the color of the image is the desired hexadecimal value. Color consistency is possible, it may just take a few more steps.

You can see the corrected view of the site, also through Firefox, above.

It is the lack of sRGB support for media in Firefox that creates this problem. While Google addressed the issue in the Chrome browser with the version 62 update in October 2017, the problem persists in Firefox in 2018.

Justformymemory points out: “Starting with Chrome 62, untagged images and videos will be tagged as sRGB/Rec. 709 by default. Chrome and Safari will be a fully color managed browser.

But Firefox:

• Does not color manage tagged images with ICCv4 profile by default. (but can be switched on by a pref flip)
• Does not treat untagged images as sRGB by default. (but can be switched on by a pref flip)
• Does not color manage tagged videos.
• Does not treat untagged videos as Rec. 709.
• Does not display color of videos correctly even when a monitor is in sRGB/Rec. 709. (bug 1300170)

Can Mozilla pay more attention to color management? No other features are important if Firefox cannot even handle media correctly on the web.”

Please reach out if you would like to work with blueunderground to design, develop and manage your website. You can let us worry about the color management.