Building a colour palette
nobody misreads

On the final screens, all text passes WCAG level AAA, the international standard for digital accessibility. Contrast is measured as a ratio between the brightness of the text and that of the background. 4.5:1 is the accepted minimum and 7:1 is the highest level.

Primary text at 14.61:1, secondary at 9.21:1, status labels between 7.09:1 and 12.62:1. One single exception, declared. In the previous palette, chart labels sat close to 3.5:1, below the minimum.

HSL is the industry standard and it gets lightness wrong. With the same recipe, 60% saturation and 40% lightness, the green lands at 3.25:1 on white and fails. The red lands at 7.23:1 and passes the highest level. The number is the same, the brightness the eye sees is not.

I chose OKLCH, a model that describes colour by lightness, chroma and hue following how the eye perceives it, not how the screen emits light. In it, the scale stops being a collection of picked colours and becomes a function. Shade 600 has a lightness of 0.61 across all six colour families. That is a measurement, not an approximation.

The steps from one shade to the next now range from 0.034 to 0.081. Twice as regular as before.

Green for up and red for down is the strongest convention in financial markets and one of the worst for accessibility. It is the classic case of colour blindness, which affects around 8% of men. Here the mistake is not aesthetic, it is someone’s balance.

Dropping the convention was not an option, because traders read the colour before the number. The way out was never to leave colour on its own. The plus or minus sign always sits right next to the number, and on charts each series gets its own line style and marker.

This is where OKLCH paid for itself. The green and red for up and down sit on the same shade of the scale, 800, with the same lightness, 0.45. The down line does not look heavier than the up line for no reason. The cost of that choice is that, without hue, the two become the same tone. The sign stopped being a detail and became a rule.

No. Highly saturated colour on a dark background seems to vibrate and lift off the surface, an effect that tires the eye quickly during long reading. Those colours were left out of dark mode, with the Atlassian design system as the tonal reference. The dark surfaces went from three levels to four.

Instead of redefining the same variables depending on context, I built two complete sets of primitives, the raw colours the whole system refers to. One for light backgrounds, one for dark. The alternative would have made the file leaner and broken the handoff to development, because Figma’s Dev Mode loses track of a value that changes meaning depending on where it sits. A smaller file is not worth a worse handoff.

A living document in eight sections, the kind a team looks up instead of asking. Properties, palette, typographic accessibility, a token matrix at AAA level, contrast for non-text elements, focus appearance, chart series and the migration guide from the previous version.

In Figma, 224 variables in three collections. Primitives with the raw colours, semantic tokens with the meaning of each use, such as background, text, up and down, and components. Two modes, light and dark.

The declared exception is the placeholder text in the search field, at 5.75:1. It passes AA but not AAA. It is documented as an exception instead of being rounded up, because a system that hides its own exception stops being verifiable.