HSL Lightness Is Not Contrast: Compare Equal-Lightness Hues

Separate HSL lightness from relative luminance

Moving an HSL lightness slider is a convenient way to edit a color. It does not measure how that color compares with a particular background. CSS Color 4 describes HSL as non-uniform: equal changes in its coordinates do not create equal perceived changes across hues. [1]

For an in-range sRGB color, the CSS conversion code calculates HSL lightness from the largest and smallest encoded RGB components: (maximum + minimum) / 2. WCAG relative luminance instead uses linearized sRGB components with unequal weights. These quantities have different definitions and different jobs. [2] [3]

Use HSL to choose a color; use the actual supported foreground/background pair to calculate contrast. Do not turn “L is 50%” into a readability approval.

Compare yellow and blue with the same HSL lightness

The constructed colors hsl(60 100% 50%) and hsl(240 100% 50%) are opaque sRGB yellow and blue. Yellow has normalized RGB (1, 1, 0); blue has (0, 0, 1). Both have minimum 0, maximum 1 and HSL lightness 0.5.

For these endpoint components, the sRGB linearized values are also 0 or 1. Yellow therefore has relative luminance 0.2126 + 0.7152 = 0.9278; blue has 0.0722. They share HSL lightness while giving very different luminance. [3]

On a phone, scroll inside the table. Its region can be focused and moved with the arrow keys.

These ratios are original calculations for the stated opaque colors and surfaces. They are not measurements of anti-aliased letter edges or a certificate for an interface.

Use the correct conversion and pair formula

s = RGB_byte / 255
linear(s) = s / 12.92, if s <= 0.04045
linear(s) = ((s + 0.055) / 1.055) ** 2.4, otherwise
L = 0.2126 * linear(R) + 0.7152 * linear(G) + 0.0722 * linear(B)
ratio = (lighter_L + 0.05) / (darker_L + 0.05)

Apply the conversion to each normalized component before weighting it. Do not weight encoded bytes directly for arbitrary intermediate colors, and do not average the two colors’ HSL lightness values. Keep enough precision for the intended comparison; the table’s shortened output is a display choice. [3] [4]

Change the backdrop before drawing a conclusion

White has relative luminance 1; black has 0. Against white, yellow’s ratio is 1.05 / 0.9778, while blue’s is 1.05 / 0.1222. Against black, use (L + 0.05) / 0.05. The same color therefore answers a different contrast question when its adjacent surface changes. [4]

The demonstration lets you compare six exact pure hues at saturation 100% and lightness 50%, against explicitly opaque white or black. The labels stay outside the color patches. Its results come from the stated sRGB model; the returned browser color strings are reported separately from the calculations.

A photograph, gradient, transparent color, group opacity or wide-gamut value needs its actual model. The transparent-text guide covers its narrower single solid-backdrop case. Do not apply this opaque-hue calculation to those different conditions.

Choose color roles, then review the actual pairs

Start with the real task: paragraph text on the page surface, a label inside a panel, or another specific adjacent pair. Identify both CSS colors and the relevant state. Choose a hue or role, calculate its pair and revise that pair as needed. Changing HSL lightness may help, but the ratio has to be recalculated rather than assumed.

Keep font size, weight, meaningful state cues and actual rendering in the wider review. A color-ratio calculation does not establish all text or interaction requirements. If a palette generator makes six hues share one lightness coordinate, review every pair used in the interface rather than approving the collection as a whole.

The patch itself is a bounded comparison aid. The selected backdrop defines the calculation; it does not recolor the surrounding page. Read the named backdrop and ratio in the output instead of guessing from the page’s paper color.

Try two complete comparison cases

These are original teaching cases with explicit color and backdrop assumptions.