Relative luminance is a measure of how bright a color appears to the human eye, defined by the W3C Web Content Accessibility Guidelines (WCAG). It ranges from 0 (pure black) to 1 (pure white). Unlike simple brightness, relative luminance accounts for the fact that the human eye perceives green light as brighter than red or blue light. The formula uses weighted coefficients: 0.2126 × R + 0.7152 × G + 0.0722 × B, where R, G, and B are linearized sRGB values.

The contrast ratio between two colors is calculated using the formula: (L1 + 0.05) / (L2 + 0.05), where L1 is the relative luminance of the lighter color and L2 is the relative luminance of the darker color. The result ranges from 1:1 (identical colors) to 21:1 (pure black vs pure white). The +0.05 offset prevents division by zero and accounts for ambient light scattering in real-world viewing conditions.

• AA - Normal text (less than 18px or 14px bold): contrast ratio ≥ 4.5:1
• AA - Large text (≥18px or ≥14px bold): contrast ratio ≥ 3:1
• AAA - Normal text: contrast ratio ≥ 7:1
• AAA - Large text: contrast ratio ≥ 4.5:1

AAA is the highest accessibility standard. Most projects aim for at least AA compliance for all essential content.

This is based on the CIE 1931 photopic luminosity function, which models human visual perception. The human eye has approximately 60% green-sensitive cones, 30% red-sensitive cones, and only 10% blue-sensitive cones. This is why a pure green (#00FF00) has a relative luminance of ~0.7152, while pure blue (#0000FF) has only ~0.0722 — green appears much brighter to us than blue at the same intensity.

Colors in digital displays use gamma-compressed sRGB values (0-255 per channel). To calculate true luminance, each channel must be linearized. For 8-bit sRGB values scaled to 0-1: if the value ≤ 0.04045, divide by 12.92; otherwise, apply ((value + 0.055) / 1.055)^2.4. This linearization removes the gamma encoding used by displays, giving physically accurate luminance values for the WCAG formula.

If your contrast ratio is too low, try these strategies:

• Darken the foreground or lighten the background to increase separation.
• For light text on dark backgrounds, increase the background darkness or make the text brighter.
• Avoid using similar hues with only slight brightness differences (e.g., light gray text on a white background).
• Use this tool to test different shades until you reach at least 4.5:1 for body text.
• Consider using a slightly larger font size, which triggers the lower 3:1 AA threshold for large text.

Yes. WCAG 2.1 requires a 3:1 minimum contrast ratio for UI components (buttons, form borders, icons) and graphical objects that are essential for understanding content. This ensures that users with low vision can distinguish interactive elements. Our tool can help you verify contrast for any two colors used in your interface.

Relative luminance is a standardized, objective measurement defined by WCAG for accessibility compliance. Perceived brightness is subjective and varies between individuals and viewing conditions. Two colors might appear equally bright to one person but measurably different in luminance. For compliance, always use the mathematical WCAG formula rather than subjective judgment. That said, relative luminance is designed to approximate human visual perception as closely as possible.