Module 06: Color in UI — Design & Code Foundations

01

Semantic Colors

Colors that communicate meaning and status in interfaces.

Success!

Your changes have been saved successfully.

Success States

Green universally signals success, go, positive. Use for: confirmations, completed actions, positive feedback, online status, form validation pass.

Key point: Green = success, go, positive, complete

Warning

Your session will expire in 5 minutes.

Warning States

Yellow/orange signals caution. Use for: warnings, important notices, unsaved changes, pending states, things that need attention but aren't errors.

Key point: Yellow/Orange = caution, attention needed

Error

Please enter a valid email address.

Error States

Red signals error, danger, stop. Use for: validation errors, destructive actions, critical alerts, required fields. Use sparingly - too much red feels alarming.

Key point: Red = error, danger, stop, critical

Information

Your password must be at least 8 characters.

Informational States

Blue signals information, neutral notice. Use for: tips, instructions, informational alerts, links, neutral feedback. Safe, trustworthy, non-urgent.

Key point: Blue = information, neutral, trustworthy

02

Color Contrast

Ensuring text and UI elements are readable for everyone.

Normal text (under 18px)4.5:1 minimum

Large text (18px+ or 14px bold)3:1 minimum

UI components & graphics3:1 minimum

Contrast Requirements

WCAG 2.1 Level AA requires these contrast ratios. Level AAA requires 7:1 for normal text. Higher contrast is always better for readability.

Key point: 4.5:1 is the minimum for body text

Gray on white

4.0:1 - FAILS AA

Darker gray on white

5.9:1 - PASSES AA

Light blue on blue

2.5:1 - FAILS AA

White on blue

5.3:1 - PASSES AA

Contrast Examples

Common failures: gray text on white, colored text on colored backgrounds. Always check contrast ratios with a tool.

Key point: Test every text/background combination

RECOMMENDED TOOLS:

WebAIM Contrast Checker
Stark (Figma plugin)
Colour Contrast Analyser (desktop)
Chrome DevTools (built-in)

Contrast Checkers

Never guess at contrast. Use tools to verify. Chrome DevTools shows contrast ratios in the color picker. Figma plugins check as you design.

Key point: Always verify with tools, never guess

Regular weight

Same ratio, harder to read

Semibold weight

Same ratio, easier to read

More Than Numbers

Contrast ratio is a minimum, not a guarantee. Thin fonts, small sizes, and busy backgrounds all reduce effective readability even at passing ratios.

Key point: Ratio is minimum - actual readability may need more

03

Color Systems

Organizing colors into a scalable, consistent system.

PRIMARY

Brand color, CTAs, links

NEUTRAL

Text, backgrounds, borders

SEMANTIC

Success, warning, error, info

Color System Structure

A color system includes: Primary (brand), Secondary (optional), Neutrals (grays), and Semantic (status) colors. Each has a range of tints/shades.

Key point: Systematic colors ensure consistency

BLUE SCALE (50-900)

50

100

200

300

400

500

600

700

800

900

Color Scales

Each color has a scale from light (50) to dark (900). 500 is typically the base. Lighter shades for backgrounds, darker for text and hover states.

Key point: 50-900 scale gives you flexibility for all use cases

/* Primitive tokens */
--blue-500: #2196f3;
--gray-100: #f5f5f5;

/* Semantic tokens */
--color-primary: var(--blue-500);
--color-bg-surface: var(--gray-100);

/* Component tokens */
--button-bg: var(--color-primary);
--card-bg: var(--color-bg-surface);

Design Tokens

Design tokens are named variables. Primitive tokens define raw colors. Semantic tokens define meaning. Component tokens define usage. This enables theming.

Key point: Tokens create a single source of truth

Primary: CTAs, links, active states

Gray-100: Page backgrounds

White: Card surfaces, inputs

Gray-900: Primary text

Gray-500: Secondary text

Color Usage Guidelines

Document when to use each color. This ensures consistency across team members and prevents ad-hoc color choices.

Key point: Documentation prevents color chaos

04

Dark Mode

Designing for dark interfaces requires rethinking your entire color approach.

WRONG: Pure inversion

White text on pure black is too harsh

RIGHT: Elevated surfaces

Off-white on dark gray is comfortable

More Than Inversion

Don't just swap black and white. Pure black (#000) is too dark. Pure white (#fff) text is too bright. Use dark grays and off-white for comfortable viewing.

Key point: Dark mode ≠ inversion

Base

0dp

Card

1dp

Modal

8dp

Dialog

24dp

Surface Elevation

In dark mode, elevation is shown by lighter surfaces, not shadows. Higher elements = lighter background. Material Design recommends specific elevations.

Key point: Elevation = lighter surfaces in dark mode

LIGHT MODE

hsl(207, 90%, 54%)

DARK MODE

hsl(207, 70%, 68%)

Adjusting Colors

Colors need adjustment for dark backgrounds. Desaturate (reduce by 15-30%) and lighten. Highly saturated colors on dark backgrounds appear to vibrate.

Key point: Desaturate and lighten colors for dark mode

:root {
  --bg: #ffffff;
  --surface: #f5f5f5;
  --text: #212121;
  --primary: hsl(207, 90%, 54%);
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg: #121212;
    --surface: #1e1e1e;
    --text: #e0e0e0;
    --primary: hsl(207, 70%, 68%);
  }
}

CSS Implementation

Use CSS custom properties with @media (prefers-color-scheme: dark). This automatically follows system preferences. Add a manual toggle for user control.

Key point: prefers-color-scheme respects user preferences

05

Color Accessibility

Ensuring your color choices work for everyone.

Deuteranopia (green-blind) - 6% of men

Protanopia (red-blind) - 2% of men

Tritanopia (blue-blind) - rare

Types of Color Blindness

8% of men and 0.5% of women have color vision deficiency. Red-green confusion is most common. Never rely on color alone to convey information.

Key point: 8% of men have some form of color blindness

BAD

Status shown by color only

GOOD

Color + icon + text

OK OnlineX Offline

Color + Other Cues

Always pair color with another indicator: icons, text, patterns, or position. A color-blind user should still understand the interface.

Key point: Color is enhancement, not the only signal

TESTING TOOLS:

Chrome DevTools > Rendering > Emulate vision deficiencies
Figma: Color Blind plugin
Stark accessibility plugin
Sim Daltonism (macOS app)

Testing for Color Blindness

Modern browsers can simulate color blindness. Test your designs to ensure information is conveyed through more than just color.

Key point: Test with simulation tools before shipping

GENERALLY DISTINGUISHABLE:

Blue

Orange

Black

White

Blue-orange is safer than red-green

Color-Safe Choices

Blue and orange are distinguishable by most color-blind users. Avoid red-green combinations for critical information. Use lightness differences, not just hue.

Key point: Blue-orange is a safer contrast than red-green

14

CSS Color Implementation

Production-ready color code patterns.

:root {
  /* Primary */
  --primary-50: hsl(207, 90%, 95%);
  --primary-500: hsl(207, 90%, 54%);
  --primary-700: hsl(207, 90%, 40%);
  
  /* Neutrals */
  --gray-50: hsl(210, 20%, 98%);
  --gray-500: hsl(210, 10%, 50%);
  --gray-900: hsl(210, 20%, 10%);
  
  /* Semantic */
  --success: hsl(142, 70%, 45%);
  --warning: hsl(38, 95%, 50%);
  --error: hsl(0, 80%, 50%);
}

Complete Color System via CSS

HSL format - Easy to adjust lightness/saturation
Numbered scales - 50-900 range for flexibility
Semantic naming - Meaning-based color names

Tip: Start with HSL. Adjusting one value is intuitive.

:root {
  --bg: #ffffff;
  --text: #212121;
  --primary: hsl(207, 90%, 54%);
}

[data-theme='dark'] {
  --bg: #121212;
  --text: #e0e0e0;
  --primary: hsl(207, 70%, 68%);
}

/* Also respect system preference */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme='light']) {
    --bg: #121212;
    --text: #e0e0e0;
    --primary: hsl(207, 70%, 68%);
  }
}

Dark Mode Toggle via CSS

data-theme attribute - Manual toggle control
prefers-color-scheme - System preference
:not() selector - Don't override explicit choice

Tip: Respect system preference by default, allow manual override.

.alert {
  padding: 1rem;
  border-radius: 4px;
  border-left: 4px solid;
}

.alert-success {
  background: hsl(142, 70%, 95%);
  border-color: hsl(142, 70%, 45%);
  color: hsl(142, 70%, 25%);
}

.alert-error {
  background: hsl(0, 80%, 95%);
  border-color: hsl(0, 80%, 50%);
  color: hsl(0, 80%, 30%);
}

Semantic Alert Colors via CSS

Background tint - Very light (95% lightness)
Border accent - Main color (45-50% lightness)
Text dark - Dark variant (25-30% lightness)

Tip: Use the same hue at different lightness levels for cohesive alerts.

:focus-visible {
  outline: 2px solid var(--primary-500);
  outline-offset: 2px;
}

/* Remove outline for mouse users */
:focus:not(:focus-visible) {
  outline: none;
}

/* High contrast mode */
@media (forced-colors: active) {
  :focus-visible {
    outline: 2px solid CanvasText;
  }
}

Focus States via CSS

:focus-visible - Only shows for keyboard nav
outline-offset - Space between element and outline
forced-colors - Supports Windows high contrast

Tip: :focus-visible shows outlines only for keyboard users.

15

Self-Assessment

Test your UI color knowledge.

Q1

What is the minimum contrast ratio for body text according to WCAG AA?

Click to reveal

Q2

Why shouldn't you rely on color alone to convey information?

Click to reveal

Q3

How do you adjust colors for dark mode?

Click to reveal

Q4

What is a design token?

Click to reveal

Q5

What's the difference between light and dark mode elevation?

Click to reveal

Color in UI

Core Concepts

Semantic Colors

Color Contrast

Color Systems

Dark Mode

Color Accessibility

CSS Implementation

CSS Color Implementation

Self-Assessment

Self-Assessment

Key Takeaways