Working with Color

Understanding color contrast, luminance, and accessibility requirements to create inclusive and readable color schemes.

Color accessibility

Color accessibility is a key aspect of designing inclusive user experiences. Ensuring sufficient contrast between text (or important graphical elements) and their background is essential for readability, especially for users with visual impairments such as color blindness or low vision.

Calculating luminance

The relative luminance is a measure of perceived brightness, normalized so 0 represents darkest black and 1 represents brightest white.

For the sRGB colorspace the luminance L is defined as:

In this formula, R, G and B are the linearized sRGB components (not the original 8‑bit channel values). To compute L from an 8‑bit RGB triplet (R8, G8, B8):

1. Normalize each channel to the 0–1 range:

   $R_s=\frac{\mathrm{R8}}{255}$ $G_s=\frac{\mathrm{G8}}{255}$ $B_s=\frac{\mathrm{B8}}{255}$

2. Linearize each normalized component Cs (where Cs is Rs, Gs or Bs):

   $C_{\mathrm{lin}}=\text{if}{C}^s\le 0.04045,\frac{C^s}{12.92}\text{otherwise}\left(\frac{C^s+0.055}{1.055}\right){}^{2.4}$

   In plain terms:

   • If Cs ≤ 0.04045 then C_lin = Cs / 12.92
   • Otherwise C_lin = ((Cs + 0.055) / 1.055) ^ 2.4
3. Plug the linearized values R_lin, G_lin, B_lin into the luminance formula above to get L (a number between 0 and 1). Multiply by 100 to express as a percentage.

Example (manual calculation): for RGB 77, 129, 87 convert to normalized values (≈0.302, 0.506, 0.341), linearize each, apply the weighted sum, and multiply by 100% to get the percentage luminance.

References:

• WCAG definition of relative luminance

Calculating contrast ratio

The contrast ratio compares the relative luminance of two colors to quantify how distinguishable they are to the human eye. WCAG defines the contrast ratio using the luminance values L_light (the lighter color) and L_dark (the darker color):

1. Use WCAG relative luminance values for each color (L between 0 and 1). If you have percentages, divide by 100.
2. Identify the lighter (L_light) and darker (L_dark) luminance.
3. Compute (L_light + 0.05) / (L_dark + 0.05). The result is reported as a ratio (for example 4.57:1).

Why the +0.05? WCAG includes the 0.05 offset to avoid division by zero for colors with zero luminance and to scale the metric so the maximum contrast (white vs black) is 21:1. It is part of the WCAG definition rather than an arbitrary algebraic trick.

Example calculations (using the luminance for RGB 77, 129, 87 from earlier):

• Contrast vs white (L = 1): (1 + 0.05) / (0.1796 + 0.05) ≈ 1.05 / 0.2296 ≈ 4.57:1
• Contrast vs ink (RGB 27,27,27; L ≈ 0.011): (0.1796 + 0.05) / (0.011 + 0.05) ≈ 0.2296 / 0.061 ≈ 3.76:1

WCAG thresholds (key requirements):

• Level AA (normal text): at least 4.5:1
• Level AA (large text): at least 3:1
• Level AAA (normal text): at least 7:1
• Level AAA (large text): at least 4.5:1
• Non-text contrast (UI components, graphical objects): at least 3:1

Notes:

• Report contrast as X:1 and round appropriately for presentation. WCAG examples typically show two decimal places.
• Contrast depends only on luminance values, so once you have those (0–1) you can compute any pairwise contrast quickly.

References:

• Contrast (Minimum) (Level AA)
• Contrast (Enhanced) (Level AAA)
• Non-text Contrast (Level AA)

More about color in Civic

• Theme colors theme
• State colors
• Civic color utilities
• USWDS System colors