How to Create Visual Hierarchy with Color on a Website | Using Lightness Differences

When a website color scheme feels flat, you do not always need to add more hues. One effective option is to increase the difference between lighter and darker colors. In HSL (Hue, Saturation, and Lightness), changing lightness makes it easier to assign different roles to backgrounds, headings, and buttons while keeping the hue consistent. However, HSL lightness differences are not the same as WCAG contrast ratios, so use lightness to build hierarchy and verify readability with the actual color pair.

Changing lightness can separate roles even when the hue stays the same

For example, if hue stays at 220 degrees and saturation at 70%, changing only lightness produces colors such as 20% lightness dark blue ■#0F2757, 35% ■#1B4498, 50% ■#2662D9, 70% light blue ■#7DA1E8, and 90% pale blue ■#D4E0F7. In HSL, 0% lightness is black, 100% is white, and 50% is the normal lightness level for the hue.

You can use the darkest shade for headings, a medium blue for primary actions, and a pale blue for backgrounds. This creates hierarchy without introducing extra hues, helping the page stay cohesive while still gaining visual contrast.

Assign different lightness levels to the background, text, and CTA

On a service page, use a very pale blue ■#E9EFFB as the background, charcoal ■#1F2937 for body text, and dark blue ■#0F2757 for major headings. The contrast ratio, a numerical measure of the relative luminance difference between foreground and background, is about 12.72:1 for body text against the background and about 12.57:1 for the heading against the background.

For the CTA (Call to Action, the primary button that leads to an inquiry or sign-up), use medium blue ■#2662D9 with white text ■#FFFFFF. That pair has a contrast ratio of about 5.48:1, which exceeds the WCAG (Web Content Accessibility Guidelines) 4.5:1 minimum for normal-size text. A light background, dark body text and headings, and a medium-lightness primary action can create a clear visual order even within one hue family.

Even with a lightness difference, measure required contrast directly

HSL lightness is useful for adjusting color, but WCAG contrast ratios are calculated from relative luminance. For that reason, do not decide that a color pair is readable or compliant based only on the HSL lightness values. For example, pale blue ■#D4E0F7 against the background ■#E9EFFB has a contrast ratio of only about 1.15:1. Do not rely on such a small difference alone for an important card boundary or interactive state.

If a boundary is necessary to identify or operate a component, using a darker blue ■#5281E0 against ■#E9EFFB gives about 3.27:1. WCAG non-text contrast requires at least 3:1 for visual information needed to identify certain UI components or states. Do not rely on color alone for state changes; add borders, weight, icons, labels, or other visible cues when appropriate.

HueRoll shows the selected color’s HSL values along with tints, shades, and other palette suggestions. It also displays the selected color’s contrast against white and black, but it does not compare two arbitrary custom colors or automatically report WCAG AA or AAA conformance. After building a palette with lightness differences, check the actual text, background, and boundary color pairs separately.