xElements

About xElements

Disclaimer for 2022: this was developed in 2019/2020 as an exploration and proof of concept, but not formally adopted by Xbox or the XDS system :) Refer to everything with caution and reach out to laweldon@microsoft.com for any questions!


Theory

Alternate color models

xColor model

We've explored using CIECAM16-UCS for the creation of xColor palettes as it is considered by the industry to be one of the most accurate models of human perception. CIE stands for International Commission on Illumination, CAM stands for color appearance model, and UCS is a derivative of the CAM16 model which stands for uniform color space. Like CIELAB, which has a corresponding polar model of CIELCH, CIECAM16-UCS has a corresponding JMH model (J = lightness, M = colorfulness, H = hue in degrees). The UCS derivative specifically adjusts the J and M values from the base model's J and C values to provide more consistent hue linearity and consistent perceptual difference. This allows xColor to generate consistent palettes based on just a few parameters: maximum colorfulness (M), hue start, hue end, and palette interval (i.e. whether the palette has steps of 1 or 5 when going from 0 to 100). As with CIELAB/CIELCH, the colors generated from these palettes correlate strongly with predictable ΔE and WCAG 2.0 contrast. The largest perceptible difference between CIECAM16 and CIELAB is that the first is much newer (released in 2016 as opposed to 1976) and is accordingly more precise in its estimation of human perception, particularly around perceived luminance. While there is a newer JzAzBz model that has been proposed in 2017 as an alternative, that would be less computationally expensive, we have chosen CAM16 as it measurably improves beyond CAM02, which is its predecessor and the model that Microsoft uses for color management (first shipped with Windows Vista).

Color contrast

We use two metrics to understand perceived color difference: WCAG 2.0 and ΔE. The first is important for legal compliance with color contrast accessibility and it is calculated from the relative luminance of two RGB values. The second is a revised calculation of perceptual difference. This delta value has numerous advantages over WCAG 2.0, and it has been revised twice since its first release in 1976, both in 1994 and 2000. We can use both values together to gauge first the legally required accessibility and then the perceptual difference.


JS dependencies

Color conversion


Attribution

Much attribution should go to Bruce Lindbloom, Mike Bostock, Connor Gramazio, and Jacob Rus, for their contributions around impelementation of these color spaces.

Math and testing


Implementation

Who built this

This was researched in 2019 and prototyped as an unofficial exploration in 2020 by Lauren Weldon. It was developed in collaboration with Mariana Pérez García in 2021.


Further reading