Clym Logo

Luminance Contrast Ratio

What does luminance contrast ratio mean?

Luminance contrast ratio is a critical metric in digital accessibility, measuring the difference in brightness between two colors, typically text and its background, to check readability for users, including those with visual impairments.

How does luminance contrast ratio work?

The contrast ratio is calculated using the following formula:

Contrast ratio = (L1 + 0.05) / (L2 + 0.05)

Where:

  • L1 is the relative luminance of the lighter color.
  • L2 is the relative luminance of the darker color.

Relative luminance values range from 0 (black) to 1 (white). The resulting contrast ratio ranges from 1:1 (no contrast) to 21:1 (maximum contrast).

Providing sufficient contrast between text and background is vital for readability and accessibility. The Web Content Accessibility Guidelines (WCAG) specify minimum contrast ratios to accommodate users with visual impairments:

  • Normal text: A minimum contrast ratio of 4.5:1 is required.
  • Large text: A minimum contrast ratio of 3:1 is acceptable for large-scale text (defined as 14pt bold or 18pt regular).
  • Enhanced contrast: For AAA compliance, a contrast ratio of at least 7:1 is recommended for normal text.

These standards help check that content is perceivable by users with various visual abilities.

FAQs about luminance contrast ratio

The maximum contrast ratio is 21:1, representing black text on a white background or vice versa.

Not necessarily. Two colors may appear different but still have insufficient luminance contrast. It's essential to calculate the contrast ratio to meet accessibility compliance.

Yes, tools like the WebAIM Contrast Checker allow you to input foreground and background colors to assess their contrast ratio.

Users with color vision deficiencies rely more on luminance differences than color hues. Providing adequate luminance contrast helps make content accessible to these users.

While higher contrast improves readability, excessively high contrast can cause eye strain. It's important to balance contrast to enhance readability without discomfort.