Sierra, wide colourspaces, and browser engines

One of the first changes that I noticed when my Mac started up after installing macOS Sierra was its display. I have loved its Retina 5K 27-inch display from the moment that I got it last December, but somehow Sierra seemed to make it even better, as if its surface had been grubby and it had had a good clean. The reason was that Sierra was – at last – using its full potential with a ‘wide’ colourspace.

macOS Sierra doesn’t introduce wide colourspaces to the Mac, but it turns what has been a specialist experience into the norm, what we should expect. Instead of a few apps doing smart things on their own, the default is now for the Finder, Preview, and everything else to handle colour as well as your graphics card and display can.

There will inevitably be some old quirky apps which somehow manage to make assumptions about colourspaces and colour rendering, and don’t take advantage of what Sierra offers for free. But for the great majority of local apps and documents, if your display is capable of better than sRGB, then Sierra should make it so.

Except, of course, for the web and online content. There we enter a murky area which can even mislead you into thinking that there’s something wrong with your Mac, or Sierra, or both.

Dean Jackson’s excellent article about wide colour spaces and the web explains how some of this comes about, and what web developers can do to address it. What he doesn’t emphasise sufficiently is that no matter how carefully a web developer might implement support for wide colour, and no matter how Sierra helps apps use the improved capabilities of modern displays, it all ultimately comes down to the rendering engine in your browser.

If you’ve got more than one browser installed on your Mac (or want to try this on an iOS device, PC, Linux, or anything else for that matter), point them at Dean Jackson’s superb page of demonstrations of wide colourspace images.


My experience here is that Safari 10.0 and Firefox 49.0 on Sierra 10.12 do make visible use of wide colour, but Opera 40.0 does not – although the ‘watermark’ is visible in the top image, there are shortcomings visible in all the others, when compared against Safari’s rendering.


It gets worse: repeat this test with an even simpler one, this page showing two even colour fields. Again, Safari and Firefox render the colours evenly and correctly, but Opera shows tiles of slightly different colours. If you had just upgraded to Sierra and browsed those pages using Opera 40.0, you’d be tempted to think that it was Sierra, or your graphics card, which was at fault, given that the two colours should be completely even.


Safari uses the WebKit engine, which clearly does now render wide colour as well as any. FireFox uses Mozilla’s own Gecko engine, which in recent versions at least seems to perform as well as WebKit (in this respect). Opera, like Google Chrome, uses the Blink engine, which was forked from WebKit over three years ago. Blink appears to sacrifice faithfulness of colour for performance.

As a user, if you see what appears to be faulty colour rendering in your browser, try a different one, such as Safari. Only if it is consistent across different rendering engines and appears in reliable recent releases of apps should you wonder whether it is Sierra or your hardware at fault.

As a web developer, you now have the problem of trying to cope with browsers which seem to handle wide colourspaces very well, and those which struggle to render a simple, even area of colour faithfully. Dean Jackson’s case is convincing and impressive, but where does that leave those using Chrome and Opera?

Finally, if you cannot see the ‘watermark’ in the first image or the tiling in the last, blame your browser, not me.

Update: the bug in Opera, at least, has now been fixed in version 41.0, which now appears to render the colour fields correctly, although it still doesn’t appear capable of using wide colour fully.