Measurements & formulas

Relative luminance

A relative measurement of luminance, defined by the Y value in XYZ color space.

A comparison of relative luminance is used by the Web Content Accessibility Guidelines (WCAG) for calculating lightness contrast.

Contrast ratio: 1.81:1

How it affects UI design

Relative luminance formula is used for contrast calculations to ensure text and components are distinguishable. Check contrast for colors to ensure you are in compliance with WCAG 1.4.3 (contrast minimum).

Contrast is a complex perceptual element of sighted user experiences. Learn more about contrast sensitivity when evaluating contrast for your user interface.

Relative luminance contrast performs poorly for evaluating contrast in dark color themes or dark mode. Light text colors on dark backgrounds need increased relative luminance contrast.

A more perceptually accurate formula for measuring contrast is currently in development for WCAG 3 called APCA (accessible perceptual contrast algorithm) which uses an alternative to relative luminance when calculating contrast.

Sources:

  1. RGB/XYZ Matrices. Bruce Lindbloom. http://www.brucelindbloom.com/index.html?Eqn_RGB_XYZ_Matrix.html
  2. How to convert between sRGB and CIEXYZ. Image Engineering. https://www.image-engineering.de/library/technotes/958-how-to-convert-between-srgb-and-ciexyz
  3. Relative luminance. w3c.org. https://www.w3.org/WAI/GL/wiki/Relative_luminance
  4. Relative luminance. Wikipedia. https://en.wikipedia.org/wiki/Relative_luminance