Color5:54 with Anwar Montasir
Design systems provide color documentation for three reasons: to limit the number of colors implemented by designers, to define context for color usage, and to make sure colors are used in an accessible manner.
Hexadecimal values: six-character alphanumeric code used by developers to specify proportions of red, green, and blue in a color
Design token: when individual design language elements are purposefully defined for rapid, cross-platform developer implementation
Semantics: making decisions based on content meaning, not just presentation
Color contrast ratio: numbers comparing the contrast of the foreground color and background color to measure accessibility
[MUSIC] 0:00 Design systems provide color documentation for three reasons. 0:04 To limit the number of colors implemented by designers, to define context for 0:08 color usage, and to make sure colors are used in an accessible manner. 0:14 The goal of Adobe's Spectrum design system is to help product designers 0:23 create cohesive applications. 0:27 If I've designed a grayscale wireframe for an Adobe application and reached the stage 0:30 where I wanted to apply color to the wire frame, I couldn't choose just any color. 0:36 To give Adobe's products a uniform feel, 0:43 designers are limited to a specific set of grays and 0:46 a small range of values of just four colors, blue, red, orange, and green. 0:51 The lightest value of each hue is named 400 and 0:58 the darkest value is named 700. 1:03 To enable designer developer handoff, colors are defined two ways here. 1:07 I can toggle between viewing RGB values, the mixture of red, 1:13 green, and blue blended together to form this color. 1:18 And hexadecimal color values, in which developers use a six character 1:22 alphanumeric code to specify those same proportions of red, green, and blue. 1:28 When individual design language elements are purposefully defined for rapid 1:35 cross-platform developer implementation, this is called a design token. 1:41 I've included links to more information about hexadecimal values and 1:47 design tokens in the teacher's notes. 1:53 In terms of defining context for my colors, 1:56 Adobe provides a clear explanation under a heading called Semantic colors. 2:00 Semantics on the web has to do with making decisions based on content meaning, 2:07 not just presentation. 2:12 Using color to semantically reinforce meaning is to apply color 2:15 the way Adobe suggests, sparingly and intentionally. 2:20 In other words, Spectrum doesn't just specify a particular set of hues and 2:25 values. 2:30 It also requires applying colors consistently in a manner 2:31 appropriate to the information being delivered. 2:36 Blue represents informative content. 2:40 Spectrum uses red for negative feedback, like error messaging, 2:43 and green for positive feedback, like a successfully completed task. 2:49 A bit like a traffic light, red means stop and green means go. 2:54 Orange is like a yellow caution light. 3:00 The user should take notice of the information, but 3:02 it's not necessarily positive or negative. 3:05 For example, an orange notice might be used to warn about a feature 3:09 that's set to expire or become outdated soon. 3:14 Color is experienced differently by many people. 3:18 For example, users with low vision 3:22 struggle to read text with insufficient color contrast against its background. 3:25 One organization, WebAIM, or Web Accessibility In Mind, provides 3:31 resources to help you make web content, including color choice, more accessible. 3:37 Here's a tool called the WebAIM Color Contrast checker. 3:44 With it, you can compare a foreground color against a background color 3:48 to determine color contrast ratio. 3:53 The largest color contrast ratio is 21 to 1, which is pure black against pure white. 3:57 Because the contrast is strong and 4:05 easy to read, pure black on pure white provides a passing accessibility score. 4:08 Let's try Adobe's blue 400, 4:14 and oops, fail. 4:19 Adobe fortunately realizes this contrast isn't sufficient and 4:22 provides, under a heading called Static colors, 4:27 a link to the WCAG, or Web Content Accessibility Guidelines. 4:31 When contrasting with a white background, you would need to use at least 4:39 blue 500 to achieve a passing contrast ratio for the AA accessibility standard. 4:45 So I'll try that. 4:52 And the combination of blue 500 and 4:59 the white is enough to meet the minimum 4.5 to 1 contrast ratio. 5:03 A different WebAIM article, linked in the teacher's notes below, 5:10 discusses designing for colorblind users. 5:14 Red and green are often indistinguishable to those with color blindness. 5:18 Which is a challenge for designers since we so often use red for stop, 5:23 cancel, or error indication and green for go or success messaging. 5:28 Interestingly, the recommended solution isn't based on color choice. 5:35 To assist colorblind users, 5:40 make sure that colors are not your only method of conveying important information. 5:42 The text content and visual content should additionally reinforce your messaging. 5:48
You need to sign up for Treehouse in order to download course files.Sign up