# Skill: Build a restrained UI color palette with proper contrast and a readable dark mode

> Master this to define role-based palettes, meet WCAG contrast minimums, and build dark modes that do not tire eyes; apply whenever choosing or reviewing colors for any UI screen.

Source: sodigi*learn -- inspiration/cvet-kontrast-temnaya-tema * https://sodigi.io/learn/inspiration/cvet-kontrast-temnaya-tema

## When to use

- Starting a new color palette for a product, page, or component.
- An existing layout looks like a "carnival" with too many competing colors.
- Text is hard to read or fails accessibility contrast checks.
- Building or reviewing a dark mode version of an interface.
- Briefing an AI assistant on colors and needing precise, predictable output.

## Core rules

- A palette is roles, not favorite colors: neutrals (background, body text, borders) do the grunt work; one or two accents lead the eye.
- 60/30/10 rule: ~60% dominant neutral (background), ~30% secondary neutral (cards, body text), ~10% accent (buttons, links, highlights). Accent must be rare to function as accent.
- Maximum one primary accent; a second counterpoint accent is acceptable. A third almost always steals from the first instead of reinforcing it.
- Regular text on background: minimum 4.5:1 contrast ratio. Large text (large headings, bold): minimum 3:1.
- Never convey meaning with color alone -- always back it up with text, an icon, or both.
- Dark mode base must be a warm dark gray (around #121212-#1A1A1A), not pure #000000. Pure black amplifies text vibration.
- Dark mode text must be off-white (light gray), not pure #FFFFFF. Secondary text should be dimmer still to create hierarchy.
- Dark mode accents must be desaturated and slightly lightened versus their light-mode counterparts. A bright accent that works on white will slice on black.

## Procedure

1. Define roles before picking shades: background, surface/card, body text, secondary text, border, primary accent, (optional) secondary accent.
2. Choose neutrals: a background shade, a slightly darker card surface, a near-black for text, and two or three grays for secondary text and borders.
3. Choose one accent color. Add a second only if there is a clear semantic reason (e.g., destructive action needs a distinct red).
4. Check contrast for every text-background combination: use a contrast checker or the quick eyeball test below.
5. For dark mode: shift background to warm dark gray (~#121212-#1C1C1E), shift body text to off-white (~#E0E0E0), shift accents to desaturated + slightly lighter variants.
6. Verify each dark mode text/background pair still meets 4.5:1 for body and 3:1 for large text.
7. Wherever color signals a state (error, success, warning), add a text label or icon as a non-color fallback.

Quick readability test (no tools required):
- Squint at the text from a distance. Letters blurring to mush = not enough contrast.
- Convert a screenshot to grayscale. Text vanishing = color was carrying all the brightness signal.
- View outdoors on a phone in daylight. If it survives, it passes.

## Ready-to-use prompt

```
Build the color system for this UI using role-based palette design.

Roles to define:
- Background (dominant neutral, ~60% of area)
- Surface/card (secondary neutral, ~30%)
- Body text (near-black on light / off-white on dark)
- Secondary text (dimmer)
- Border/divider
- Primary accent (one color only, for main CTAs and links)

Light mode:
- No default purple-blue gradient.
- One accent color: [name or hex].
- All other colors: neutrals (grays, near-white background, near-black text).
- Accent used sparingly: buttons, active states, highlights only.

Dark mode:
- Background: warm dark gray (~#121212), NOT pure black.
- Body text: off-white light gray (~#E0E0E0), NOT pure white.
- Secondary text: dimmer still for hierarchy.
- Accent: desaturated and slightly lightened from the light-mode version.

Contrast requirements:
- Body text on background: at least 4.5:1.
- Large headings and bold text: at least 3:1.
- Every color-coded state (error, success) must also have a text label or icon.

Output the palette as named design tokens with hex values.
```

## Pitfalls

- Five or more bright colors at once: when everything shouts, nothing is heard. One accent, mute the rest.
- Weak contrast for aesthetics: light gray text on white looks airy but is unreadable. Pretty and unreadable equals just unreadable.
- Meaning by color alone: a significant share of users cannot distinguish colors well, and many view screens in bright sunlight or with inverted modes.
- Pure black (#000000) in dark mode: combined with white text it creates a harsh vibration that tires eyes within minutes.
- Saturated bright accents on dark backgrounds: a color that worked beautifully on white will feel aggressive and hard to look at on dark. Desaturate and lighten it.
- Mixing warm and cool accent hues without a reason: they can clash. Stay within one temperature family unless there is clear semantic justification.