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

Frequently Asked Questions

Related Color and Design Tools Tools

Glassmorphism CSS Generator

Easily generate CSS for the popular glassmorphism effect. Customize blur, transparency, and color to create stunning frosted-glass interfaces for your website or app.

Hue Rotation Playground

Experiment with CSS hue-rotate filters and color transformations in real-time with our interactive playground.

Hue Rotation Playground

Experiment with CSS hue-rotate filters and color transformations. Understand how hue rotation affects different colors and create dynamic color effects for your web projects.

Image to Color Palette Extractor - Extract Colors from Images

Extract color palettes from any image. Get HEX codes, RGB values, and create harmonious color schemes.

Luminance & Brightness Comparator

Compare and analyze color luminance and brightness values. Essential for creating accessible designs and understanding color perception in digital interfaces.

Material Design Color Palette Tool - Generate Color Schemes

Create stunning and accessible Material Design color palettes. Use our interactive tool to select primary and secondary colors, generate a full range of shades, and preview your theme on a UI mockup. Perfect for developers and designers.

Neumorphism CSS Generator

Easily generate CSS for neumorphic (soft UI) designs. Customize size, shape, color, distance, blur, and intensity with our interactive tool to create beautiful, modern UI elements. Get the CSS code instantly.

Noise Texture Background Creator - Generate Procedural Patterns

Create stunning noise textures and procedural patterns for backgrounds. Generate Perlin noise, fractal patterns, and organic textures with customizable parameters.

Pixel Art Color Palette Tool - Retro Gaming Palettes & Color Extraction

Create perfect pixel art color palettes with classic retro gaming palettes, color extraction from images, and custom palette builders for pixel artists and game developers.

Random Aesthetic Palette Generator - Trendy Color Schemes

Generate beautiful, trendy color palettes inspired by popular aesthetics like vaporwave, cottagecore, dark academia, and more. Perfect for modern design projects.