Color Design
Color System
Color is the fastest signal in your interface — faster than text, faster than shape. A deliberate palette with ten colors communicates more than a generous one with forty. This tool shows a reference palette, a contrast checker, and six common mistakes that ship under the name "brand expression."
pixel / color
Color is not decoration.
It is the fastest signal in your interface. Faster than text. Faster than shape. Which means when you get it wrong, you get it wrong at maximum speed.
The palette
Click any swatch to set as foreground color below.
Contrast checker
The quick brown fox.
Body text at this size must pass AA. If you are reading this without effort, the contrast is working. If you are squinting, it is not.
Caption text is the hardest to get right. Small size, same contrast requirement.
Color sins
The rule: If you need more than three colors to explain your interface, your interface is not explained. It is illustrated.
Why Systems, Not Palettes
A palette is a collection. A system is a set of rules about how that collection behaves. The difference matters at scale: a palette tells you which blue to use. A system tells you when to use blue, what it means when you do, and what breaks if you use it somewhere else.
Most color problems are not about choosing the wrong hue. They are about using the right hue in too many places. When your accent color appears on buttons, links, badges, icons, and decorative borders, it has stopped being an accent. It is wallpaper.
The reference palette above uses ten colors. Three grays for text hierarchy. Three for surfaces. One white. Three functional colors — accent, danger, success — each with a single purpose. That constraint is the system.
Contrast Is the Foundation
WCAG 2.1 Ratios
The checker above uses WCAG 2.1 luminance ratios: 4.5:1 for normal text, 3:1 for large text, 7:1 for enhanced. These are the legal minimum. Passing AA does not mean your text is comfortable to read — it means it is not exclusionary.
Beyond Ratios: APCA
WCAG ratios treat dark-on-light and light-on-dark identically. Human vision does not. APCA (Accessible Perceptual Contrast Algorithm) models how people actually perceive contrast, accounting for polarity, spatial frequency, and font weight. The APCA page goes deep.
Functional Color
Every color in a system should answer: what does this mean? Red for errors. Green for confirmation. Blue for action. If a color exists only because "it looks nice," it will create confusion the first time a user tries to decode your interface.
Gray as Structure
Gray is not one color. It is a hierarchy: primary text, secondary text, disabled states, dividers, surfaces. A system needs at least four grays, each with a defined role. The palette above uses five — from near-black to near-white — and each one has a job.
The Constraint
If you need more than three colors to explain your interface, your interface is not explained — it is illustrated. Illustration invites interpretation. Explanation directs behavior. Design systems should direct.
The hardest part of building a color system is not picking colors. It is refusing to add more. Every color you add is a decision someone else will have to make every time they build a screen. Ten colors means ten decisions. Forty means paralysis disguised as flexibility.