colorize

Choose 2-4 colors beyond neutrals and assign each a semantic role, such as green for success or blue for info. Apply a 60/30/10 distribution with one dominant color, and keep neutrals for structure so color guides attention instead of overwhelming it.

Use OKLCH color values because they are perceptually uniform, meaning equal lightness steps look equal to the eye. Define a dominant brand color, a supporting secondary, and a high-contrast accent, then derive tints and shades from that scale.

Yes, every colored text and component must meet WCAG contrast ratios of 4.5:1 for text and 3:1 for UI components. Color should never be the only indicator of state; pair it with icons, labels, or patterns so colorblind users are not excluded.

Pure gray lacks saturation and clashes with saturated backgrounds, reducing perceived contrast. Use a darker shade of the background color or a transparency-based tone instead so the text feels native to the surface.

Avoid adding color when the palette already exceeds a few hues, when colors carry no semantic meaning, or when everything becomes colorful and hierarchy collapses. Restraint matters more than variety; every color should have a defined purpose.