Contrast ratio
Contrast ratio is calculated using the relative luminance of two colors, typically a foreground color (text) and a background color. The formula used is based on the WCAG (Web Content Accessibility Guidelines) standard.
Contrast Ratio Formula:
Where:
L₁ = Relative luminance of the lighter color
L₂ = Relative luminance of the darker color
Luminance values range from 0 (black) to 1 (white).
The +0.05 is added to avoid division by zero.
How to Calculate Relative Luminance:
The relative luminance of an sRGB color is calculated using its red, green, and blue (RGB) values, which must first be converted to a linear space using the formula:
Where:
R, G, and B are the gamma-corrected values of the respective color channels.
If an RGB component value is ≤ 0.03928, use:
If an RGB component value is > 0.03928, use:
RGB values must be normalized to 0–1 range before calculations.
Contrast Ratio Guidelines (WCAG 2.1):
4.5:1 = Minimum for normal text (small text)
3:1 = Minimum for large text (≥18pt or 14pt bold)
7:1 = Enhanced contrast for better accessibility