Color shift (color management) issues in Mavericks

They must also both be treating CSS colors themselves as non-profiled/untagged.

Yes, exactly! Safari even treats non image color as untagged elements. Even the text. Such as this image comparison.

Note on the left that Firefox is not only over saturating the untagged icon images, but even the blue text. Safari is applying sRGB to the text, so the same RGB values display more muted in Safari than they do in Firefox or Chrome.

Further complication: a screenshot from Safari LOOKS the same in Preview, but then I measured the color values... very close but not quite! Weird.

That's actually what should happen. Screen shots are automatically save with your monitor profile embedded. Since the monitor color is of course also your monitor profile (regardless of the individual element's profiles the screen shot came from) they display the same. The shift in RGB values comes from the difference between your monitor profile and the values Safari, Firefox, or Chrome think they're using. That's not a great explanation, but would take a lot of time to write out in full.

This will make it much more obvious what's happening.

http://www.jklstudios.com/misc/ColorTest/

I threw this little page together to demonstrate what Safari is doing as opposed to Firefox and Chrome.

The image was downloaded directly from Apple's lead page of these forums. It has no embedded profile. I saved another copy out of Photoshop after assigning it as sRGB and saving it with that embedded profile. That is literally the only difference between the two images.

In Safari, the color is identical, despite the image on the left having no profile (the original). Safari is applying sRGB to the untagged image on the fly. Since the right image is tagged as sRGB, they match.

Firefox and Chrome are both ColorSync aware apps, but don't do anything to adjust for untagged images. The tagged image on the right matches Safari since it has an sRGB profile, so both Firefox and Chrome know what to do with it for color rendering. The untagged image though is left to float to fit whatever your monitor profile is. The wider of a gamut and color range your monitor is capable of, the more saturated it will appear compared to the tagged image on the right.

Thanks for the examples. They also show how the problem is hidden on my lower-gamut MacBook Air, and revealed only on the UP2414Q.

As near as I can tell, all web sites are affected—I tested Apple, CNN, Google, BBC, Twitter, Facebook and Amazon—and browser support for color profiles in CSS seems to be poor to nil, so I guess I'll have to resign myself to living with it! I'd love to fix my own sites at least, but if I assign sRGB to the images, the CSS colors will no longer match the graphical colors in Chrome and Firefox.

(I hope Chrome and Firefox change to match Safari's behavior, or at least offer a toggle in future.)

They also show how the problem is hidden on my lower-gamut MacBook Air, and revealed only on the UP2414Q.

Yup, that would do it. Instances where a user would see no difference in the test images under Firefox or Chrome:

1. You're on an iPad or iPhone. Both of these devices default to sRGB for everything.

2. You're using sRGB as your monitor profile. (On a wide gamut monitor, they'll match, but both will be over saturated, as will everything else.)

3. You're using an older or worn out monitor (most likely not a wide gamut display to start with). You may see some difference, but not necessarily.

As near as I can tell, all web sites are affected

Yes, that would be the case for Firefox and Chrome since no matter what web site you're on, all untagged images and all other color elements will display according to your monitor's gamut and color range (uncontrolled), rather than as the author may have intended. Another way to say it, what the person who built the page saw on their screen has little chance of being seen the same way by others.

This is the case anyway since monitors and the color they are able to reproduce are all over the map. Millions of monitors are either; old, worn out, not properly calibrated and profiled, have never been properly calibrated and profiled at all, are set to use canned monitor profiles which don't represent the device in front of you in any way (such as using Adobe RGB, ColorMatch RGB or some other provided profile as a monitor profile).

That is at least Safari's biggest advantage. It applies some sort of control to everything. It's not perfect either to apply sRGB by default to all uncontrolled and untagged elements, but it's still better than no control at all. Especially images since any competent web designer will save web images in the sRGB color space, whether they have a profile embedded or not. So an untagged image is still being displayed as intended when Safari applies sRGB to it by default.