Skip to content
๐Ÿ’ก

Color Luminance Checker

Color

Check relative luminance and brightness of any color to predict contrast on light or dark backgrounds.

0
0
Color Luminance Checker
Aa
Black
#000000
0.0%
Relative Luminance
Light Text
Aa
White
#FFFFFF
100.0%
Relative Luminance
Dark Text
Aa
Gray
#808080
21.6%
Relative Luminance
Dark Text
Relative luminance (WCAG) determines whether light or dark text should be used on a background. Values above 17.9% are treated as light backgrounds.

Relative luminance isn't the same thing as how bright a color looks at a glance, it's a specifically weighted calculation where green contributes far more to the perceived brightness value than blue does, which is exactly why a pure, vivid blue can have surprisingly low luminance despite looking bold and eye-catching, a mismatch that trips people up guessing at contrast by eye rather than calculating it. This tool calculates a single color's relative luminance directly, predicting how it will read against both light and dark backgrounds before a second color even gets chosen.

See more about the Color Luminance Checker

Useful for checking whether a specific color leans toward working better on a light or dark background before building a contrast pair around it, understanding why a vivid color reads as darker than expected in an actual contrast calculation, or getting a single color's luminance value to reason about ahead of picking what to pair it with.

Key features

  • Clean interface
  • Fast processing
  • No signup required
  • Works offline

Quick answers for Color Luminance Checker

How is this different from the Color Luminance Calculator?
The Calculator focuses on one color at a time with a detailed contrast-ratio and lightness-scale breakdown. This tool instead lets you build a list of named colors and compare their luminance side by side.
How does it decide whether to recommend light or dark text?
It uses the real WCAG-based 17.9% relative luminance cutoff, colors above that threshold get a light-background recommendation of dark text, and vice versa.
Can I label the colors I add?
Yes, an optional name field lets you label each color (like "Brand Blue"), otherwise the hex code itself is shown as the label.