Week 2 tutorial notes

Color: Roles, Contrast, State, Accessibility, and Trust

Explain color as roles, contrast, state, accessibility, restraint, and product meaning, then create a color role sheet and one evidence-backed color decision.

Lesson thesis

Color is product meaning. It communicates hierarchy, state, trust, risk, brand mood, and accessibility. A palette becomes useful only when colors have clear roles and pass contrast and state checks.

Preparation status

Outline only. Research pass still required before teaching.

Study notes

1. Lecture spine

This lesson should become a full color studio. It teaches role, meaning, contrast, state, restraint, accessibility, and AI palette critique.

The learner should leave with a practical habit: never approve color because it looks nice until role, contrast, and state meaning have been checked.

2. Vocabulary

Color vocabulary helps the learner separate mood from meaning. A strong color critique names what a color is doing, whether users can read it, and whether state or risk is clear.

Color role

The job a color performs in the interface.

Example: Primary action, text, surface, border, error, warning, success, or focus.

Semantic color

A color used to communicate state or meaning.

Example: Error red, warning amber, success green, selected blue.

Contrast

The visible difference between foreground and background.

Example: Dark text on a light surface that passes a contrast check.

Redundant cue

Meaning expressed through more than color alone.

Example: An error uses color, text, icon, and placement.

3. AI critique lab

The AI prompt should make color concrete. The learner should ask for roles, state examples, contrast risk, and one disciplined improvement.

Color prompt lab

I am learning color for product interfaces.

Screen or rough UI:
[describe the screen or paste a screenshot description]

Please review the color system in practical design language.
Return:
1. Color roles: primary, secondary, surface, text, border, state, success, warning, error, and disabled.
2. Meaning: what each important color is communicating.
3. Contrast: text/background combinations that may fail or feel weak.
4. State clarity: whether actions, errors, success, warnings, links, and disabled states are clear.
5. Accessibility risk: where meaning depends on color alone.
6. Brand versus usability: where mood helps or hurts the task.
7. Palette discipline: which colors should be removed, renamed, or assigned a clearer role.
8. AI risk: where a generated palette may look attractive but fail the product task.
9. One improvement: the first color decision I should make and why.

Rules:
- Do not judge color only by taste.
- Do not suggest a large palette.
- Include contrast and state communication.
- Mark assumptions clearly.
- Finish with one color decision sentence.

Check before accepting

Does the output assign color roles?
Does it identify contrast risks?
Does it inspect action, error, success, warning, disabled, and focus states?
Does it check whether meaning depends on color alone?
Does it recommend restraint instead of adding a bigger palette?

Reject or revise when

The answer says only that the palette should be calmer or more vibrant.
The answer ignores contrast.
The answer uses one color for several conflicting meanings.
The answer treats state colors as decoration.

4. Studio exercise

The studio output is a color role and contrast sheet. It should show the current palette, role names, contrast checks, state risks, AI critique notes, and one final decision.

Studio output

Sample current colors from one screen.
Name each color by interface role.
Check at least two foreground/background contrast pairs.
Mark one place where meaning depends on color alone.
Define a smaller or clearer role-based palette.
Write one color decision sentence with product reason.

5. References

These references support the tutor. The lesson itself should teach color through role assignment, visible examples, contrast checks, and AI critique.

Reference spine

Apple Human Interface Guidelines: colorProfessional guidance for color roles, contrast, system colors, semantic meaning, and avoiding color-only communication.Material Design: colorA design-system model for color roles, schemes, tonal palettes, and semantic use across interface components.W3C WCAG: contrast minimumAccessibility guidance for minimum text contrast and readable foreground-background combinations.WebAIM Contrast CheckerA practical tool for checking text and background contrast ratios during the lesson.Adobe Color Contrast AnalyzerA practical color tool for palette exploration and accessibility contrast checking.

References

Apple Human Interface Guidelines: color

Professional guidance for color roles, contrast, system colors, semantic meaning, and avoiding color-only communication.

Material Design: color

A design-system model for color roles, schemes, tonal palettes, and semantic use across interface components.

W3C WCAG: contrast minimum

Accessibility guidance for minimum text contrast and readable foreground-background combinations.

WebAIM Contrast Checker

A practical tool for checking text and background contrast ratios during the lesson.

Adobe Color Contrast Analyzer

A practical color tool for palette exploration and accessibility contrast checking.

Web examples

Apple DeveloperColor

Use this to show that color should communicate state, hierarchy, and brand while still preserving clarity and accessibility.

Material DesignColor overview

Use Material color roles to teach that a palette needs jobs: primary, secondary, surface, error, outline, and on-colors.

WebAIMContrast Checker

Use WebAIM as the hands-on contrast checker. Learners should test at least one normal text pair and one small label pair.

Adobe ColorContrast Analyzer

Use Adobe Color for palette exploration, then connect the palette back to roles and contrast instead of mood alone.

Guided practice

Choose one screen, sample colors, assign roles, run a contrast check, run the color prompt, refine one state or palette decision, and write one color decision sentence.

Artifact: Color role and contrast sheet with palette roles, state meanings, accessibility checks, AI critique, and one color decision

Tutor review questions

Can the learner name color roles instead of judging palette taste?
Can the learner explain primary, surface, text, border, semantic, and disabled colors?
Can the learner check contrast on important foreground/background pairs?
Can the learner identify when meaning depends on color alone?
Can the learner explain brand mood as a constraint rather than the whole decision?
Can the learner use AI palette suggestions while checking role, contrast, and state?

AI prompt

I am learning color for product interfaces.

Screen or rough UI:
[describe the screen or paste a screenshot description]

Please review the color system in practical design language.
Return:
1. Color roles: primary, secondary, surface, text, border, state, success, warning, error, and disabled.
2. Meaning: what each important color is communicating.
3. Contrast: text/background combinations that may fail or feel weak.
4. State clarity: whether actions, errors, success, warnings, links, and disabled states are clear.
5. Accessibility risk: where meaning depends on color alone.
6. Brand versus usability: where mood helps or hurts the task.
7. Palette discipline: which colors should be removed, renamed, or assigned a clearer role.
8. AI risk: where a generated palette may look attractive but fail the product task.
9. One improvement: the first color decision I should make and why.

Rules:
- Do not judge color only by taste.
- Do not suggest a large palette.
- Include contrast and state communication.
- Mark assumptions clearly.
- Finish with one color decision sentence.

Home study

Choose two safe product screens. For each, sample the visible colors, assign role names, check at least two contrast pairs, identify one color-only meaning risk, and write one color decision with a product reason.