01 THINKHow does he reason?

The colour was calculated, not chosen

Instead of picking the accent by eye, it was worked backwards from a contrast target — and the constraint became the art direction itself.

Art direction usually picks a palette first and checks accessibility later. That order got reversed.

With #FF4D00 set as the accent, measuring it on the paper ground gave 2.92:1. Not body text, and not even the 3:1 large-text threshold.

There were two options.

  1. Darken the accent — the chosen colour changes
  2. Lighten the ground — the accent stays

The ground went from #F2F0EB to #F7F5F0. 3.05:1. Pass. The floor moved so the colour could stay.

Where the constraint became the direction

Something interesting happens here. The accent is 3.05:1 on the light ground, so it can only be used as a field; on the dark ground it is 5.91:1, so it can be type.

Same orange, different jobs depending on the ground. On paper it can only be painted; on ink it can also become a letter.

Paper ground · 3.05:1A field worksType does notInk ground · 5.91:1Type works tooAnd a fieldOne colour. Invert the ground and what that colour can do changes.That is how the inversion becomes a rhythm — not a workaround, but what the constraint gave.

So the same colour appears as a slab on the light side and as a letterform on the dark side. This is not a way around the contrast constraint; the constraint produced the inversion rhythm.

A good constraint does not reduce the options. It makes the remaining ones clearer.

The rules that came out of it

  • Type on an accent field is ink in both tones. The paper colour fails at 2.92:1.
  • The focus ring is one value, #CC3E00 — 4.53:1 on paper, 3.99:1 on ink. The inversion does not touch it.

pnpm check:contrast recalculates these numbers on every run. If a value written in the docs disagrees with the real one, the build breaks.

design-systemaccessibilitycolor

Record

First committed 2026.08.24, and changed 2 times since.

  • 9cf738eContent: 어려운 대목 넷을 그림으로 바꿨다
  • 029cadaTopics: a controlled axis to browse by, and a filter that costs no JavaScript
  • 8987da1Phase 2: Personal System

The full build record →