KLD Institute
Menu
Course mapOpen slides

Week 7 study 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 focus

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.

Learning materials

Draft materials are being expanded before release.

Study notes

Guided tutorial path

Work through the lesson by section. Each stop names the evidence to produce before the final readiness gate.

5 required stops
40 min
Lesson contents
1Study path8 minRequired

Lecture spine

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

Produces: Study notes

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.

2Study path8 minRequired

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.

Produces: Study notes

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.

3Study path8 minRequired

AI critique lab

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

Produces: Study notes

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.
4Study path8 minRequired

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.

Produces: Study notes

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.
5Study path8 minRequired

References

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

Produces: Study notes

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.

Resources and submission

Keep the review materials close, but separate from the main path.

Use these blocks when preparing the final artifact or checking optional references after the guided tutorial.

Artifact, self-check, and base prompt
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
Self-check 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.
References and web examples