Color in interfaces is not defined by contrast alone
In digital product design, two colors may be correctly specified and still behave differently once they are applied to a real interface. The gap between what a numerical value describes and what the user actually perceives is one of the key considerations when defining accessible color palettes.
This becomes especially relevant in design systems with multiple components, states, surfaces, hierarchy levels and usage scenarios. A color may work well in isolation and lose effectiveness when applied to a dense table, a secondary button, a selected state, an alert or a multi-category chart.
For this reason, designing an accessible palette is not only about meeting contrast ratios. It also means building a color system capable of supporting readability, hierarchy, functional differentiation and visual consistency under real conditions of use.Seen this way, an accessible palette stops being a closed visual deliverable and starts functioning as experience infrastructure: a shared foundation that helps the interface remain understandable, coherent and scalable as it grows across components, screens and contexts of use.
The limitation of working only with numerical values
Color models allow us to specify color with precision, but they do not all support design decision-making in the same way. Two colors may be numerically close and yet be perceived very differently on screen.
It can also happen that two hues share a similar apparent lightness value but do not carry the same visual weight. This difference is especially relevant when color is used to define information levels, interactive states or text-to-background relationships.
In complex interfaces, the question is not only which color is used, but what role it plays within the system and how it relates to the rest of the visual decisions.
RGB: suitable for representation, limited for system-level design decisions
RGB is the model screens use to represent color. It is precise for encoding color, but it is not designed to reason about color from a perceptual logic.
From a product design perspective, its main limitation is that it describes a mix of red, green and blue, rather than providing a structure that helps anticipate hierarchy, contrast or visual progression between steps in a scale.
RGB allows a color to be specified accurately. However, it does not help answer common questions within a design system:
- what happens when a hue is made lighter,
- how its visual weight changes,
- how it relates to other levels in the scale,
- or whether a variation will be sufficiently perceptible in a real component.
For this reason, although RGB is essential for the technical representation of color, it is insufficient as the primary tool for building an accessible palette.
HSL: easier to manipulate, but not fully perceptual
HSL translates color into three dimensions that are more legible for design: hue, saturation and lightness. This structure is more intuitive and enables quick adjustments, especially during visual exploration or the initial definition of a palette.
The issue is that this ease of use does not guarantee perceptual uniformity. In HSL, two colors with the same lightness value are not necessarily perceived as equally light, nor do they necessarily generate equivalent contrast.
This creates an important challenge in design systems: a scale may look orderly in the design tool and still present irregular visual jumps when applied to text, iconography, backgrounds, borders or states.
HSL improves color manipulation, but it does not fully solve how visual perception behaves in the interface.
HSLuv: more perceptually consistent, but not definitive
HSLuv is useful because it maintains a logic that is understandable for design — hue, saturation and lightness — while relying on a structure that is closer to perceptual uniformity.
Its value is not in automating color decisions or replacing contextual validation. Its value lies in providing a more stable foundation for building scales where the shifts between steps feel more consistent to human perception.
This is especially useful when a palette needs to become a system: tonal ramps, tokens, states, light and dark themes, reusable components and data visualization.
HSLuv does not decide which color should take on each function, but it helps reduce arbitrariness when building scales and provides a more coherent base when color needs to operate across multiple contexts.
Luminance as the axis of visual hierarchy
In interfaces, the most decisive variable for visual hierarchy is often not hue, but luminance. It largely determines readability, separation between information levels and the perception of emphasis.
A system may have a palette that is well aligned with the visual identity and still fail if the luminance difference between its steps is not sufficiently calibrated. In those cases, text, borders, backgrounds and states can become compressed into a contrast range that is too narrow.
The result is an interface where hierarchy becomes less reliable: several elements appear to have the same weight, states are difficult to distinguish, or visual priorities are not interpreted quickly enough.
| For this reason, an accessible palette should be designed as a relationship between hue, luminance, function and context. Color does not operate in isolation; it is part of a visual structure that must remain stable in use. |
Three objectives an accessible palette should meet
1. Accessibility
Minimum contrast is a necessary condition, but not a sufficient one. An accessible palette must support readability, hierarchy and functional differentiation.
This means the system should make it possible to:
- read text and icons clearly,
- distinguish states quickly,
- separate information levels,
- identify visual priorities,
- and avoid making meaning depend exclusively on color.
An interface may meet a technical threshold and still provide an unclear experience if states are too subtle, hierarchy becomes diluted or several elements compete with similar visual weight.
2. Flexibility
A useful palette is not limited to a primary color and a few variants. It must provide enough range to address very different use cases: backgrounds, surfaces, borders, text, actions, states, overlays, data visualization and display modes.
Flexibility also depends on combinatorial capacity. A color does not only function on white or on an ideal surface. It must behave consistently across different backgrounds, dense components, dark themes and contexts where multiple layers of information coexist.
For this reason, building the scale means anticipating relationships, not only defining individual values.
3. Palette family coherence
A product palette coexists with branding, communication, illustration, marketing and corporate identity. Designing accessible color does not mean disconnecting from the brand, but translating it into an operational system for the interface.
Consistency does not require using exactly the same colors in every context. It requires maintaining a recognizable relationship between visual identity and functional use.
A brand color may have a strong presence in communication and, at the same time, require adaptations for interface use: luminance variants, restricted usage, specific roles or complementary scales that ensure readability and stability.
Conclusion
Color accessibility starts before contrast ratios are applied. It starts with how the scale is built, which color model is used to make decisions and how visual perception is understood within the design system.
In complex digital products, color is not just an expressive layer. It is a structural component of the experience because it organizes information, communicates states, supports hierarchies and enables the interface to be interpreted clearly.
In the second part, we will look at how to move from these criteria to a usable product palette: how to build a scale, assign roles, define states and validate the system in real components.
