Color Luminance

A certain color can be defined by hue (0° - 360°), saturation
(0% - 100%) and lightness (0% - 100%). Luminance on the other
hand is a measure to describe the perceived brightness of a
color (Encyclopædia Britannica: "luminance,
or visually perceived brightness"). You can lighten or darken a
color by adjusting its lightness value, but lightness is not the only
dimension to consider for luminance. That is because each hue
naturally has an individual luminance value.

In HSL color space pure hue is defined at a saturation level
of 100% and a lightness level of 50%. To visualize the individual
luminance of hue, let's have a look at the main hues of a color
wheel with constant saturation and lightness levels converted
to grayscale. This way three dimensions of a color are mapped
to one dimension, i.e. light(ness), with a reference to
white = 100%.

You can see that blue has the lowest and yellow has the highest
luminance value. Yellow is actually just six percentage steps
away from white. It's good advice to roughly remember the luminance
values of the main hues, as it helps to work more intuitively with
color.

If luminance is dependent on hue, it's also dependent on saturation.
Reducing the saturation level of any pure hue to 0% results in a
50%-gray and a 50% value in luminance respectively. So for hues
with natural luminance above 50%, luminance decreases when the
saturation level decreases. For hues with natural luminance below
50%, luminance increases when the saturation level decreases.

In conclusion, luminance is dependent on all three dimensions of
color. Now you also get a good idea of how color information is
handled in grayscale images.

Luminance improves your color choices

When you know luminance values, you also know the amount of contrast
between two colors. Contrast as in the distance of luminance between
two colors. For one color you always know the contrast value in
relation to any grayscale value.

Color decisions need to consider luminance / contrast because it is key
to usability. It's the most powerful visual information - before
hue and saturation - and therefore best capable of guiding
attention. Furthermore, it's much more effective to counteract color
deficiency confusion by testing for contrast, than trying to choose
the "right" color hue.

What does that mean in practice? Test for contrast from how people
experience a composition. Starting from a single element, to other
elements, sectionwise, levelwise, finally to the overall
composition and then the other way round. Compositions in this
context can be everything from what you wear to a website, or product
packaging.

To test a composition for contrast, make a screenshot or take a
picture and convert it to grayscale (the Black and White Picture
Converter can handle .jpg and .png files).
When you are about to make color choices, tools like the HSL Color Picker let you monitor luminance
values to manage contrast from the beginning.