🚧 Under construction — VoTechWorks is being built. A free tech program — complimentary, as our commitment to get America working.
voTechWorksGrade 13 · a vocational technology learning center, by urbanicity
newSchoolWorks.com › VoTechWorks › Technology & Design › Graphic & Digital Media › Branding: Identity Design and Brand Systems › Lesson 3
TEC-DIGI47-03 · Lesson 3 · 11.5 clock hours · demo

Color Theory for Brand Systems: Palettes, Values, and Accessibility

Objective. Students construct a primary and secondary brand color palette in Adobe Illustrator, record accurate Pantone, CMYK, RGB, and HEX values, and verify all foreground/background pairings meet WCAG AA contrast ratio (4.5:1 for normal text)

⚠ Pending professional review

This lesson, its worked examples and its practice questions has not yet been verified by an industry-certified professional or by a certification or approval body. It is a study draft and may contain errors. Do not use it as instructions for work on a job site or on live equipment. Always follow your instructor, your supervising professional, and current official references and regulations.

VoTechWorks program approval and accreditation are still in progress. Credentials are issued only by the certifying bodies named in each program, after their own exams.

Color Theory for Brand Systems: Palettes, Values, and Accessibility

Color is one of the most immediate ways a brand communicates before a single word is read. Choosing colors intentionally — and documenting them precisely — ensures a brand looks consistent across every touchpoint, from a business card printed in CMYK to a social media banner displayed in RGB.

Why Brand Color Systems Use Multiple Color Values

No single color model works for every output. Each model describes color for a specific medium:

A professional brand style guide always records all four values for every brand color. Omitting any one of them forces future designers to guess, which introduces color drift across productions.

Global Swatches in Adobe Illustrator

In Illustrator, a global swatch is a named color that updates every object using it when you edit the swatch once. This is the correct way to store brand colors because it enforces consistency. When you add a global swatch:

1. Open the Swatches panel.

2. Double-click a swatch (or create a new one) to open Swatch Options.

3. Check Global.

4. Name the swatch (e.g., "Brand Primary Blue").

5. Enter your exact CMYK or RGB values.

Record the corresponding Pantone, RGB, CMYK, and HEX values in a swatch reference table within the same document. This becomes a living spec sheet for the brand.

Color Palette Strategies

Brand palettes are not random. Common harmony strategies include:

A typical brand palette has a primary palette (2–3 colors that dominate most applications) and a secondary palette (3–4 supporting colors used for variety, backgrounds, and data visualization).

Color Psychology and Brand Strategy

Color carries cultural and psychological associations that influence perception. Common associations in North American markets include:

Your rationale must connect specific color choices to your brand category's values, not just list associations. For example: "We chose a deep navy primary because our fintech brand must communicate trustworthiness to first-time investors" is a strategy point. "We chose blue because blue is calm" is not sufficient.

Accessibility: WCAG AA Contrast Requirements

Accessibility is a professional and legal responsibility. The Web Content Accessibility Guidelines (WCAG) 2.1 define minimum contrast ratios so that people with low vision or color-vision deficiency can read content. The standard most employers and clients require is Level AA:

Contrast ratio is calculated by comparing the relative luminance of two colors. You do not need to calculate this by hand — the WebAIM Contrast Checker (webaim.org/resources/contrastchecker) accepts HEX values and instantly reports the ratio and pass/fail status.

Important: A palette can be beautiful and still fail accessibility. Your brand system is not complete until every foreground/background text pairing passes. If a pair fails, adjust lightness or darkness of one color — hue shifts alone rarely fix contrast failures.

Safe Practices When Working in the Lab

This lesson is software-based, but lab safety still applies. Keep cables managed to prevent trip hazards. Adjust monitor brightness to a comfortable level — prolonged exposure to overly bright screens causes eye strain. Take a short break every 45–60 minutes when doing close color-matching work, because eye fatigue affects color perception and judgment. Do not share login credentials for school-licensed software.

Workflow Summary

1. Choose a brand category and a palette strategy.

2. Research color psychology; select your 6 colors.

3. Look up Pantone equivalents in the Color Bridge.

4. Build global swatches in Illustrator with CMYK values; record RGB and HEX from the color picker.

5. Export HEX values and test every foreground/background text pair in WebAIM Contrast Checker.

6. Adjust any failing pairs; re-test.

7. Write your rationale connecting palette choices to brand strategy.

Key terms10

Global SwatchA named color swatch in Adobe Illustrator that is linked to every object using it, so editing the swatch once updates all instances — the correct method for storing brand colors.
Pantone Matching System (PMS)A standardized proprietary system of numbered ink colors used in printing to ensure consistent, repeatable color regardless of the printer or press.
CMYKA subtractive color model using Cyan, Magenta, Yellow, and Black ink percentages (0–100%) used in four-color process printing.
HEX CodeA six-character hexadecimal string (e.g., #FF5733) that represents an RGB color value, used in web development and digital design.
WCAG 2.1Web Content Accessibility Guidelines version 2.1 — the internationally recognized standard that defines minimum contrast ratios and other criteria so digital content is accessible to people with disabilities.
Contrast RatioA numerical comparison of the relative luminance of two colors, used to measure whether text is readable against its background; WCAG AA requires at least 4.5:1 for normal text.
Relative LuminanceA measure of the perceived brightness of a color on a scale from 0 (black) to 1 (white), used as the basis for calculating contrast ratios.
Analogous Color HarmonyA palette strategy using colors that are adjacent to one another on the color wheel, producing a unified and visually cohesive result.
Split-Complementary HarmonyA palette strategy that pairs one base color with the two colors that flank its direct complement on the color wheel, offering high contrast with more color variety than a standard complementary scheme.
Color BridgeA Pantone reference guide that shows side-by-side comparisons of Pantone spot colors and their closest CMYK process equivalents, used to translate between printing systems.

Worked examples4

1. A designer enters HEX #1A3F6B (dark navy) as foreground text and HEX #FFFFFF (white) as the background into the WebAIM Contrast Checker. The tool reports a contrast ratio of 10.4:1. Does this pairing pass WCAG AA for normal text?
  1. Step 1: Recall the WCAG AA minimum for normal text (below 18pt regular or 14pt bold): the contrast ratio must be at least 4.5:1.
  2. Step 2: Compare the reported ratio (10.4:1) against the minimum (4.5:1). 10.4 is greater than 4.5.
  3. Step 3: Because the ratio exceeds the minimum threshold, the pairing passes.
Answer: Yes — a contrast ratio of 10.4:1 far exceeds the 4.5:1 minimum, so this pairing passes WCAG AA for normal text.
2. A designer wants to use a light-yellow background (HEX #FFF176) with white text (HEX #FFFFFF) for a call-to-action button label. The WebAIM checker returns a contrast ratio of 1.07:1. What must happen for this pairing to pass WCAG AA for normal text, and in which direction should the designer adjust the text color?
  1. Step 1: The required minimum ratio for normal text is 4.5:1. The current ratio is 1.07:1, which is a significant failure.
  2. Step 2: Both colors are very light — white text on a pale yellow background produces almost no contrast because their luminance values are nearly equal.
  3. Step 3: To increase contrast against a light background, the text color must be made substantially darker. A dark color (low luminance) against a light background (high luminance) produces a high contrast ratio.
  4. Step 4: Switch the text color from white (#FFFFFF) to a very dark value such as black (#000000) or a dark brand color, then re-test in WebAIM to confirm the new ratio meets or exceeds 4.5:1.
Answer: The designer must darken the text color dramatically — switching to a dark tone such as black against the light yellow background. The direction of adjustment is toward lower luminance (darker) for the foreground text.
3. A brand swatch is specified as CMYK 85, 50, 0, 10. The Illustrator color picker also shows RGB values of R 22, G 107, B 163. What is the HEX code for this color, and how is it assembled?
  1. Step 1: A HEX code is built from three pairs of hexadecimal digits representing Red, Green, and Blue channels respectively.
  2. Step 2: Convert Red (22 decimal) to hexadecimal: 22 ÷ 16 = 1 remainder 6, so hex = 16 (written as '16').
  3. Step 3: Convert Green (107 decimal) to hexadecimal: 107 ÷ 16 = 6 remainder 11; 11 in hex = B, so hex = 6B.
  4. Step 4: Convert Blue (163 decimal) to hexadecimal: 163 ÷ 16 = 10 remainder 3; 10 in hex = A, so hex = A3.
  5. Step 5: Assemble the three pairs in order: Red + Green + Blue = 16 + 6B + A3 = #166BA3.
Answer: The HEX code is #166BA3. Illustrator's color picker will display this value directly; knowing how it is assembled confirms that each pair of characters maps to one RGB channel.
4. A student's palette has six colors. They need to test all foreground/background text pairings. If they treat every color as a potential foreground AND every other color as a potential background, how many unique ordered pairs must be tested?
  1. Step 1: An ordered pair means color A on color B is different from color B on color A (white text on navy vs. navy text on white can yield different ratios because the ratio formula is symmetric, but professional thoroughness tests both reading directions).
  2. Step 2: With 6 colors, the number of ordered pairs where foreground ≠ background is 6 × 5 = 30.
  3. Step 3: However, contrast ratio is mathematically symmetric (swapping foreground and background does not change the ratio), so unique ratio calculations number 6 choose 2 = 15.
  4. Step 4: In practice, designers typically test all 15 unique color combinations and record one pass/fail result per pair, since the ratio is the same either way.
Answer: There are 15 unique foreground/background color pairs to test from a 6-color palette (calculated as 6 × 5 ÷ 2 = 15), because contrast ratio is symmetric.
In class: Instructor live demo: build a six-color palette swatch document in Illustrator, entering global swatches with all four color-mode values; students replicate step-by-step on their own machines · Accessibility check lab: students use the WebAIM Contrast Checker (webaim.org/resources/contrastchecker) to test every foreground/background combination in their palette, record pass/fail results in a provided table, and adjust any failing pairs until all achieve WCAG AA · Color psychology brief: students choose a fictitious brand category (healthcare, food truck, fintech, outdoor recreation), research color psychology associations, select a palette strategy (analogous, complementary, triadic, or split-complementary), and write a half-page rationale connecting color choices to brand strategy
Materials: Adobe Illustrator (current version, school license); Pantone color bridge guide (classroom copy or digital reference); WebAIM Contrast Checker (free, browser-based); WCAG 2.1 summary sheet (instructor-provided); Illustrator swatch template file
Check: Submitted Illustrator swatch file with all four color-mode values entered correctly for each swatch; all tested pairings documented as WCAG AA pass; written rationale must connect palette choice to at least two strategy points from the brief — graded pass/fail with all three components required to pass

Practice check8

Answer each question, then check it. Nothing is recorded; this is your own practice.

Visual Design
1. Which WCAG 2.1 Level AA minimum contrast ratio applies to normal-sized body text displayed on a web page?
Print and Digital Media Production
2. A designer sets up a brand color in Adobe Illustrator as a global swatch. What is the primary advantage of using a global swatch over a regular swatch?
Visual Design
3. A student's brand palette uses a bright orange (#FF8C00) as a background with white (#FFFFFF) text. The WebAIM Contrast Checker returns a ratio of 2.3:1. Which action correctly resolves this failure for normal text?
Branding and Identity
4. A fintech startup asks you to justify your brand color selection. Which of the following written statements best meets the standard of connecting color choice to brand strategy?
Visual Design
5. Which color palette strategy pairs one base color with the two colors that flank its direct complement on the color wheel?
Print and Digital Media Production
6. A brand style guide lists a color as CMYK 0, 72, 100, 0. This value is intended primarily for use in:
Print and Digital Media Production
7. A student converts RGB 255, 87, 51 to a HEX code. The Red channel (255) converts to FF in hexadecimal. The Green channel (87) converts to 57. The Blue channel (51) converts to 33. What is the correct HEX code?
Visual Design
8. When building a six-color brand palette, a designer wants to verify contrast for every unique foreground/background pairing. How many unique pairings must be tested?
Record this lesson on my transcript. Sign in with your key and enrollment email to record lessons (enroll free if you have no key). This page stays open to read and practise.
← Previous lessonProgram planNext lesson →