Luminance, Colour Contrast, and Accessibility requirements

 

Luminance

Luminance, also known as brightness, is a measure of the intensity of light emitted or reflected by a colour. It refers to the perceived brightness of a colour, or how much light it appears to emit or reflect.

Luminance is typically measured on a scale from 0 to 1, where 0 represents black (no light) and 1 represents white (maximum light). Colours with higher luminance values appear brighter, while those with lower values appear darker. For example, a bright yellow colour would have a higher luminance value than a dark blue colour.

Luminance is an important factor to consider in design, especially for digital interfaces and printed materials. Ensuring appropriate contrast between foreground and background colours based on their luminance values is important for ensuring readability and accessibility for all users, including those with visual impairments.

Luminance is typically calculated using the following formula:

Luminance = 0.2126 * R + 0.7152 * G + 0.0722 * B

where R, G, and B represent the red, green, and blue colour components of a given colour, respectively. The values for R, G, and B can range from 0 to 1 (also represented from 0 to 255), with 0 representing no colour intensity and 1 representing the maximum colour intensity.

The values 0.2126, 0.7152, and 0.0722 are weights that are applied to the red, green, and blue colour components, respectively. These weights are based on the relative sensitivity of the human eye's three colour receptors (cones) to different wavelengths of light.

The resulting luminance value ranges from 0 to 1, with 0 representing the absence of light and 1 representing the brightest possible light. Note that this formula calculates relative luminance, which is used in determining colour contrast for accessibility purposes. Other variations of this formula take into account the gamma correction of display devices, but the formula above is a common starting point.

Colour Contrast and Designing for Accessibility

Colour contrast is typically calculated using the following formula:

((L1 + 0.05) / (L2 + 0.05))

where L1 is the relative luminance of the lighter colour and L2 is the relative luminance of the darker colour. The "+ 0.05" term is added to prevent the result from being zero, which could cause errors in subsequent calculations.

The result of this formula is a contrast ratio, expressed as a decimal value. The contrast ratio ranges from 1:1 (worst contrast) to 21:1 (maximum/best contrast). The higher the contrast ratio, the more visible the text or other visual element is against its background.

Colour Contrast Accessibility Guidelines

For web accessibility purposes, the Web Content Accessibility Guidelines (WCAG) 2.1 specify specific minimum contrast ratios that must be met for text and other visual elements in order to be considered accessible.

The colour contrast requirement for text varies based on its size, as the readability of text can be affected by its size. Here are the general colour contrast requirements for text:

Large Text: For text that is at least 18pt (or 14pt bold) or 24px (or 18.5px bold), the colour contrast ratio between the text and its background should be at least 3:1. This means that the luminance (brightness) of the text should be at least three times greater or less than the luminance of the background.

Small Text: For text that is smaller than 18pt (or 14pt bold) or 24px (or 18.5px bold), the colour contrast ratio should be at least 4.5:1. This higher contrast requirement is because small text can be more difficult to read and requires higher contrast to ensure readability.

These colour contrast requirements are based on the Web Content Accessibility Guidelines (WCAG) 2.1, which provides standards for web accessibility. However, it is worth noting that some organizations or jurisdictions may have their own specific requirements or standards for colour contrast.

At Tynge, we have developed a colour contrast checker which can help designers evaluate the accessibility of their design. Simply enter the colour of your text and background and our tool will calculate the contrast ratio and evaluate its accessibility for small and large text. Visit Tynge's colour contrast checker to evaluate your design colours today.