What is color luminance?

Color luminance is the perceived brightness of a color, taking into account how the human eye perceives different wavelengths of light. For example, we perceive green as brighter than blue at the same intensity level.

How is WCAG contrast ratio calculated?

WCAG contrast ratio is calculated by comparing the relative luminance of two colors. The formula is (L1 + 0.05) / (L2 + 0.05), where L1 is the lighter color's luminance and L2 is the darker color's luminance. The ratio ranges from 1:1 to 21:1.

What are the WCAG contrast requirements?

WCAG 2.1 requires a minimum contrast ratio of 4.5:1 for normal text and 3:1 for large text (18pt or 14pt bold). For enhanced contrast (Level AAA), the requirements are 7:1 for normal text and 4.5:1 for large text.

What's the difference between brightness and luminance?

Brightness is the absolute amount of light emitted or reflected by a color, while luminance accounts for human perception of different colors. For example, yellow appears brighter than blue even at the same brightness level due to how our eyes process different wavelengths.

Luminance & Brightness Comparator

Compare colors based on their luminance, brightness, and contrast ratios. Ensure your color combinations meet WCAG accessibility guidelines and understand how different colors are perceived by the human eye.

Color Analysis

Compare two colors to analyze their luminance, brightness, and contrast ratio

Foreground Color

Background Color

Color 1

Foreground color metrics

HEX#000000

RGB0, 0, 0

HSL0°, 0%, 0%

Relative Luminance0.000

Perceived Brightness0.0%

Color 2

Background color metrics

HEX#ffffff

RGB255, 255, 255

HSL0°, 0%, 100%

Relative Luminance1.000

Perceived Brightness100.0%

Contrast Analysis

WCAG compliance results

Contrast Ratio: 21.00:1

Normal Text

AAA

The quick brown fox jumps over the lazy dog

Large Text

AAA

Large Text Example

WCAG 2.1 Requirements

Level AA requires 4.5:1 for normal text and 3:1 for large text
Level AAA requires 7:1 for normal text and 4.5:1 for large text
Large text is defined as 18pt+ or 14pt+ bold

Understanding Color Perception

Human eyes are most sensitive to green light
Yellow appears brighter than blue at equal intensity
Contrast is more important than absolute brightness
Color perception varies among individuals
Environmental factors affect color appearance
Screen calibration impacts color display

Accessibility Guidelines

Normal text requires 4.5:1 minimum contrast (AA)
Large text requires 3:1 minimum contrast (AA)
Enhanced contrast requires 7:1 for normal text (AAA)
Consider color blindness when choosing combinations
Test in different lighting conditions
Provide alternative visual indicators besides color