Building Visual Hierarchy with Accent Colour Discipline

Most designers starting out treat accent colour as decoration: pick a few hues that look good together, apply them to buttons, links, icons, headings, dividers, and call it done. The result is a layout where nothing stands out because everything does. Colour hierarchy accent discipline flips that instinct. It treats accent colour as a scarce resource. Every additional accent competes for attention, and the page loses hierarchy. The WCAG 2.2 ratio for every colour pair discussed here is calculated against the neutral background. The 3:1 non-text contrast requirement for UI component boundaries applies to every button border, focus indicator, and icon outline.

Visual hierarchy in interface design relies on colour proportion. The 60-30-10 rule assigns 60% of the surface area to a neutral palette, 30% to a supporting colour, and 10% to an accent. The neutral palette operates at 0 to 8% saturation. The supporting colour, used for backgrounds of cards or less critical sections, stays in the 10 to 40% saturation range. The accent, reserved for primary actions and critical information, runs at 70 to 100% saturation.

Each of these colour pairs must meet WCAG 2.2 minimums. For normal text on a neutral background, the ratio must be at least 4.5:1. For large text (18 pt bold or 24 pt regular), the minimum drops to 3:1. The accent applied to a call-to-action button must achieve a 3:1 ratio against the adjacent colours of its boundary, satisfying the non-text contrast requirement. This is not optional: WCAG 2.2 defines a 3:1 minimum for UI component boundaries and a 2 CSS pixel minimum thickness for focus indicators.

Five Accents, Zero Hierarchy

Start with a layout carrying five competing accent colours: a red primary button, a blue supporting button, a green success badge, an orange warning icon, and a purple link. Set against a neutral background of #F5F5F5 (relative luminance 0.892), each accent is measured for ratio using the WCAG formula: (L1 + 0.05) / (L2 + 0.05), where L1 is the lighter colour. Red #D32F2F (luminance 0.092) gives 6.8:1. Blue #1976D2 (luminance 0.107) gives 5.8:1. Green #388E3C (luminance 0.139) gives 4.5:1. Orange #F57C00 (luminance 0.253) gives 2.6:1, failing the 3:1 non-text minimum for UI component boundaries. Purple #7B1FA2 (luminance 0.091) gives 6.9:1.

The failure is not the failing orange. The failure is that five accent colours compete for the same attention budget. The eye cannot decide which element is most important.

One Accent, Clear Priority

Reduce to one accent. In the revised layout, the primary button uses a single hue at #1565C0 (luminance 0.078, ratio 7.9:1). All other interactive elements, supporting buttons, badges, icons, links, use the same hue at a lower saturation or a tinted version that still passes contrast. The supporting button uses #64B5F6 (luminance 0.363), which fails at 1.9:1 against the neutral background. To pass, place that button on a darker container, or set its text to the full-strength accent. The result: one dominant colour role, one supporting role, one neutral palette. The user's eye moves to the primary action first.

In any interface, the dominant colour carries the most weight. It is the primary action, the brand anchor, the element that demands the user's first glance. The supporting colour assists without competing. The accent is the scarcest resource: apply it to no more than 10% of the surface area. This proportion is not aesthetic; it is cognitive. A layout with equal colour weight across elements increases cognitive load because the user must parse each element individually to determine priority.

Figure-Ground Relationship And Colour Weight

The figure-ground relationship in colour design means the accent must sit clearly separated from the neutral ground. If the accent's relative luminance is too close to the background's, the element disappears. The WCAG 2.2 relative luminance calculation in sRGB colour space is: L = 0.2126 × R + 0.7152 × G + 0.0722 × B, after linearization. The linearization step: if the channel value (0 to 1) is ≤ 0.04045, divide by 12.92; otherwise, raise ((channel + 0.055) / 1.055) to the power of 2.4. Every ratio on this page derives from that formula.

Call-To-Action Placement And Saturation

The call-to-action button must use the accent at its highest saturation, 70 to 100%. It must also meet the 3:1 non-text minimum against its own border or adjacent background. For a filled button, the text inside must reach 4.5:1 against the fill. For an outline style, the border itself must reach 3:1 against the page background. The same applies to focus indicators: a 2 CSS pixel thick outline at 3:1 against the adjacent colours.

Neutral Palette Saturation Limits

Neutral colours in a UI palette should not exceed 8% saturation. Above that threshold, they read as tinted and introduce visual noise. The neutral palette provides the ground against which the accent is measured. If the neutral itself has noticeable saturation, every contrast calculation changes and the hierarchy collapses. Keep neutrals at 0 to 8% saturation. Verify each against the accent using the WCAG formula.

WCAG 2.2, published 2023-10-05 by the W3C, adds the 3:1 non-text contrast requirement for UI component boundaries. Every button border, icon outline, form field edge, and focus indicator must achieve a 3:1 ratio against its adjacent colours. The requirement applies regardless of the component's function. A disabled button with a grey border at 1.5:1 fails, even if the user cannot click it.

For colour hierarchy, this requirement forces a decision: every accent you add to a component must pass 3:1 against the background. Use a low-saturation accent for a supporting button, and its border will likely fail. The solution: use the full-strength accent for all interactive component boundaries. Reserve lower saturation for non-interactive decorative elements. This is not a design choice; it is a compliance requirement.