Search code examples
colorshtml5-canvaswebglcolor-profilecolor-management

Color correct rendering in WebGL/Canvas


What color space do web browsers in general, and Chrome in particular, assume for the WebGL drawing buffer? That is, in what color space should a shader output pixel values?

I can't find anything in the WebGL specs about what color space to assume for the WebGL drawing buffer.

Our experiments indicate that Chrome assumes sRGB during compositing. An image element tagged with Prophoto is displayed correctly on a wide gamut monitor, but the same image rendered on a WebGL canvas is displayed as if it was tagged with sRGB.

Does this mean that it is currently not possible to do color correct rendering on a wide gamut display in WebGL, consistently on different browsers?


Solution

  • sRGB is the Standard

    The standard for all web content is defined as sRGB by the W3C, and this applies through CSS3.

    CSS level 4 will be introducing additional colorspaces, but sRGB is still the default standard.

    When no colorspace is defined in the content — such as an untagged image — the user agent should assume sRGB. Most devices are sRGB, and do not use color management so non-sRGB content may display incorrectly on them.

    WebGL

    WebGL itself does not do color management. Note however there is work going on in this area, particularly as HDR and multiple colorspaces begin to take hold in developing standards.

    Accessibility

    Also, sRGB is the standard web colorspace for accessibility, and this will likely remain for the foreseeable future, as the red primary in sRGB is still fairly visible to protanopia color vision deficiency.

    Majority Today

    sRGB is the standard used for the majority of monitors and devices. Rec709, the standard for HDTV, uses the exact same primaries but has a slightly different transfer curve specification more suitable for viewing content in a darker environment.

    Please let me know if you have additional questions.