Learn

/

Color

Color

4 patterns

Contrast ratios, limited palettes, and accessible color choices that work for all users. You'll hit this when text becomes hard to read on colored backgrounds or when a UI feels visually noisy.

Avoid

Payment received

$2,400.00 from Acme Corp for Invoice #1042 has been deposited into your account.


Prefer

Payment received

$2,400.00 from Acme Corp for Invoice #1042 has been deposited into your account.

Why avoid

Low-contrast text may look sleek in a design mockup, but it fails real users. People with even mild vision impairment struggle to read light grey text on white backgrounds. Accessibility is not optional, and contrast is the most basic requirement.

Why prefer

WCAG requires a minimum contrast ratio of 4.5:1 for normal text and 3:1 for large text. Meeting these thresholds ensures that text remains readable for users with low vision, color blindness, or screens viewed in bright sunlight.

WCAG 2.1: Understanding contrast minimum
Avoid

Landing Page Redesign

In Progress

Redesign the hero section and feature grid for better conversion rates.


Due: Mar 28, 2026

@daniel


Prefer

Landing Page Redesign

In Progress

Redesign the hero section and feature grid for better conversion rates.


Due: Mar 28, 2026

@daniel

Why avoid

Using too many colors creates visual chaos. Every color competes for the user's attention, and nothing stands out as important. A cluttered palette also makes it harder to maintain consistency as the interface grows, because there are no clear rules for when to use which color.

Why prefer

A limited color palette (one primary, one accent, and a few neutral shades) keeps the interface cohesive and makes it easy to establish visual hierarchy. When color is used sparingly, it becomes a powerful tool for drawing attention to key elements.

Refactoring UI: Choosing a color palette
Avoid

Go Pro for $9/month

Unlimited projects, priority support, and advanced analytics. Cancel anytime.


Prefer

Go Pro for $9/month

Unlimited projects, priority support, and advanced analytics. Cancel anytime.

Why avoid

Plain grey text on a colored background looks washed out and disconnected from the surrounding design. The grey clashes subtly with the background hue, creating an unintentional dull appearance. Tinting the text to match the background produces a much more polished result.

Why prefer

On colored backgrounds, secondary text looks best when you tint it with the background color rather than using plain grey. A tinted version (such as a lighter or more transparent shade of the background hue) feels natural and cohesive, maintaining the overall color harmony.

Refactoring UI: Text on colored backgrounds
Avoid

Notification Preferences

Control which alerts you receive by email, push, or SMS. You can also set quiet hours to pause all notifications.


Prefer

Notification Preferences

Control which alerts you receive by email, push, or SMS. You can also set quiet hours to pause all notifications.

Why avoid

Pure black (#000) on pure white (#fff) creates the maximum possible contrast, which can cause eye strain during long reading sessions. The harsh contrast produces a vibrating effect at text edges on some displays. A dark grey provides a more comfortable reading experience without sacrificing legibility.

Why prefer

Dark grey text (such as #333 or #374151) on a white background provides excellent readability while feeling softer and more comfortable than pure black. The slightly reduced contrast is still well above WCAG requirements and reduces eye strain during extended reading.

UX Movement: Why you should never use pure black for text