A device specific Colour Contrast Analyser
13 May 2018
I have been a user of Colour Contrast Analyser since LP introduced it to my class in 2012. CCA is a tool that greatly simplifies application the W3C contrast ratio equation part of the WCAG Success Criteria, which is a widely accepted criterion in evaluating the usability of the visual design of a piece of software. The equation calculates the contrast ratio between two sRGB colours comparing the relative Luminance of the samples. Colour Contrast Analyser Interface on Mac OS.
The luminance is the intensity of light emitted by a surface and is obtained through the luminosity function, which applies the spectral sensitivity human vision to the three components of RGB to compute the perceived luminance in a normal vision subject.
However, as contents are increasingly being produced to be accessed on the go, extreme ambient conditions (outdoor) with a high level of ambient illuminance (luminous flux incident on a surface) and deviation in the colour temperature can have a greater interference with the characteristics of the display: reflectance (amount of light reflected by the display and the protective glass), absolute white (maximum luminance emitted while producing the brightest white possible) and black luminance (minimum possible luminance emitted proportionally to the ability of the display of "turning off" the pixels in order to create the darkest black). Ambient luminance can in fact substantially reduce the effective ambient contrast ratio consequently reducing the perceived contrast, deviating from the ideal value that the aforementioned equations are evaluating.
If the target use case includes outdoor use, Colour Contrast Analyser and the WCAG can be a misleading reference of usability as they lack any device and ambient data in the evaluation, reducing the effectiveness of the guideline altogether for mobile development.
Thanks to the Norwegian Colour and Visual Computing Laboratory I performed a series of experiments as part of the course IMT4315 “Colour in interface design” lectured by Philip John Green (the paper will be hopefully presented later this year), measuring the effects of different levels of illuminant intensity, simulating a range of ambient illumination, from standard office environment (500lux) to what could be comparable to a cloudy day 5000lux, on character recognition performances for LCD displays.
The mathematical model
On the data collected throughout the experiment, I based the draft of a mathematical model that could be used to adjust or evaluate colour combination for a given display as the ambient illumination changes.
Ideally, this would have to be implemented in the backend of a light-aware user interface, reading the light sensor and screen brightness dynamically (apparently not any time soon on iOS) to adjust the colours of the interface.
To demonstrate and test the model a simple web interface was developed.
The interface allows to input the specifications of a device with an LCD screen and estimate the readability of a text stimuli material displayed on the device as it changes at different illuminant conditions. The underlying equation has been synthesised from data up to an ambient contrast ratio of c.a. 6:1, hence the simulation is unreliable for high contrast ratio >10:1 as the glaring produced by an excessive contrast has not been accounted for.
The web interface
The output value of estimated recognition time has to be compared to the target value of 800ms that is the expected average duration necessary for the correct recognition (80% threshold) in "favourable conditions" of four underscore random characters composed in Microsoft Times New Roman with font size set at 0.4 degrees of visual angle (24 arc-minutes) and distance between characters of 2 degrees (3/4 saccades required for a total of approximately 800ms). A significant departure from this value has to be interpreted as a drop in readability.
Display white point luminance cd/m2: Luminous flux per unit solid angle per unit projected source area (cd/ m2 or Nit). Often referred to as Brightness in displays specifications.
Display static contrast ratio: the ratio of the luminance of the brightest colour (white) compared to that of the darkest colour (black) that the system is capable of producing at the same time.
Display black point luminance cd/m2: luminance of the darkest colour (black) that the system is capable of producing. The reference veiling glare luminance specified in the IEC 61966-2-1 document is 0.2 cd/m2 (this is the reference viewer-observed black point luminance) and can be used if either the contrast ratio or the display black-point are unknown.
Display Reflectance: Normalised value (0-1) of the proportion of ambient light reflecting off the display. Typical values can be 0.1 for a matte display or as low as 0.047 for a treated glass display (iPhone 7).
Ambient Illuminant: The total luminous flux incident on the display surface (Daylight can be as bright as 20000lux, an office environment would usually measure 300/500lux).
A few reference values, mostly from Displaymate.com:
(max brightness cd/m2)
reflectance iPhone X 726 0 4.5 Galaxy S9 544 0 4.4 Galaxy Note8 601 0 4.6 iPhone 7 602 0.34 4.4 iPhone 6 Plus 566 0.39 4.6 iPhone 6 558 0.35 4.6 iPhone 5 556 0.41 4.6 iPad mini 4 450 0.34 2.0 iPad Air 2 415 0.39 2.5 iPad Pro 424 0.26 2.6 Microsoft Surface Pro 4 436 0.31 5.6 Apple Watch Sapphire 482 0 8.2 Apple Watch Glass 473 0 4.7
The result is unfortunately not (yet) a reliable tool for colour evaluation, further research will be needed to understand how the equation should perform at ambient contrast ration of more than 5:1 and possibly increase the number of independent variables (such as character size and visual acuity). Hopefully, this and other works will increase interest over light aware User Interfaces making the adoption of such technologies more common in the future.
Special thanks to Peter Nussbaum and Philip John Green for the help setting up the experiment and technical supervision.
go back home