1
00:00:00,000 --> 00:00:04,888
[MUSIC]

2
00:00:04,888 --> 00:00:08,664
Design systems provide color
documentation for three reasons.

3
00:00:08,664 --> 00:00:14,936
To limit the number of colors implemented
by designers, to define context for

4
00:00:14,936 --> 00:00:20,650
color usage, and to make sure colors
are used in an accessible manner.

5
00:00:23,093 --> 00:00:27,688
The goal of Adobe's Spectrum design
system is to help product designers

6
00:00:27,688 --> 00:00:29,810
create cohesive applications.

7
00:00:30,850 --> 00:00:36,720
If I've designed a grayscale wireframe for
an Adobe application and reached the stage

8
00:00:36,720 --> 00:00:42,120
where I wanted to apply color to the wire
frame, I couldn't choose just any color.

9
00:00:43,220 --> 00:00:46,660
To give Adobe's products a uniform feel,

10
00:00:46,660 --> 00:00:51,110
designers are limited to
a specific set of grays and

11
00:00:51,110 --> 00:00:57,730
a small range of values of just four
colors, blue, red, orange, and green.

12
00:00:58,930 --> 00:01:03,614
The lightest value of
each hue is named 400 and

13
00:01:03,614 --> 00:01:07,050
the darkest value is named 700.

14
00:01:07,050 --> 00:01:13,210
To enable designer developer handoff,
colors are defined two ways here.

15
00:01:13,210 --> 00:01:18,110
I can toggle between viewing RGB values,
the mixture of red,

16
00:01:18,110 --> 00:01:21,610
green, and
blue blended together to form this color.

17
00:01:22,850 --> 00:01:28,135
And hexadecimal color values,
in which developers use a six character

18
00:01:28,135 --> 00:01:34,290
alphanumeric code to specify those same
proportions of red, green, and blue.

19
00:01:35,830 --> 00:01:41,545
When individual design language elements
are purposefully defined for rapid

20
00:01:41,545 --> 00:01:47,960
cross-platform developer implementation,
this is called a design token.

21
00:01:47,960 --> 00:01:53,060
I've included links to more information
about hexadecimal values and

22
00:01:53,060 --> 00:01:55,330
design tokens in the teacher's notes.

23
00:01:56,940 --> 00:02:00,470
In terms of defining context for
my colors,

24
00:02:00,470 --> 00:02:07,210
Adobe provides a clear explanation
under a heading called Semantic colors.

25
00:02:07,210 --> 00:02:12,960
Semantics on the web has to do with making
decisions based on content meaning,

26
00:02:12,960 --> 00:02:14,280
not just presentation.

27
00:02:15,720 --> 00:02:20,470
Using color to semantically
reinforce meaning is to apply color

28
00:02:20,470 --> 00:02:24,460
the way Adobe suggests,
sparingly and intentionally.

29
00:02:25,470 --> 00:02:30,440
In other words, Spectrum doesn't just
specify a particular set of hues and

30
00:02:30,440 --> 00:02:31,520
values.

31
00:02:31,520 --> 00:02:36,083
It also requires applying
colors consistently in a manner

32
00:02:36,083 --> 00:02:40,097
appropriate to the information
being delivered.

33
00:02:40,097 --> 00:02:43,960
Blue represents informative content.

34
00:02:43,960 --> 00:02:49,130
Spectrum uses red for negative feedback,
like error messaging,

35
00:02:49,130 --> 00:02:54,470
and green for positive feedback,
like a successfully completed task.

36
00:02:54,470 --> 00:02:58,490
A bit like a traffic light,
red means stop and green means go.

37
00:03:00,380 --> 00:03:02,620
Orange is like a yellow caution light.

38
00:03:02,620 --> 00:03:05,810
The user should take notice
of the information, but

39
00:03:05,810 --> 00:03:09,400
it's not necessarily positive or negative.

40
00:03:09,400 --> 00:03:14,130
For example, an orange notice might
be used to warn about a feature

41
00:03:14,130 --> 00:03:17,560
that's set to expire or
become outdated soon.

42
00:03:18,840 --> 00:03:22,310
Color is experienced
differently by many people.

43
00:03:22,310 --> 00:03:25,260
For example, users with low vision

44
00:03:25,260 --> 00:03:30,080
struggle to read text with insufficient
color contrast against its background.

45
00:03:31,500 --> 00:03:37,250
One organization, WebAIM, or
Web Accessibility In Mind, provides

46
00:03:37,250 --> 00:03:42,390
resources to help you make web content,
including color choice, more accessible.

47
00:03:44,460 --> 00:03:48,750
Here's a tool called
the WebAIM Color Contrast checker.

48
00:03:48,750 --> 00:03:53,590
With it, you can compare a foreground
color against a background color

49
00:03:53,590 --> 00:03:56,100
to determine color contrast ratio.

50
00:03:57,570 --> 00:04:04,520
The largest color contrast ratio is 21 to
1, which is pure black against pure white.

51
00:04:05,740 --> 00:04:08,160
Because the contrast is strong and

52
00:04:08,160 --> 00:04:13,280
easy to read, pure black on pure white
provides a passing accessibility score.

53
00:04:14,730 --> 00:04:19,415
Let's try Adobe's blue 400,

54
00:04:19,415 --> 00:04:22,730
and oops, fail.

55
00:04:22,730 --> 00:04:27,720
Adobe fortunately realizes this
contrast isn't sufficient and

56
00:04:27,720 --> 00:04:31,990
provides, under a heading
called Static colors,

57
00:04:31,990 --> 00:04:37,990
a link to the WCAG, or
Web Content Accessibility Guidelines.

58
00:04:39,170 --> 00:04:45,280
When contrasting with a white background,
you would need to use at least

59
00:04:45,280 --> 00:04:52,140
blue 500 to achieve a passing contrast
ratio for the AA accessibility standard.

60
00:04:52,140 --> 00:04:53,441
So I'll try that.

61
00:04:59,885 --> 00:05:03,022
And the combination of blue 500 and

62
00:05:03,022 --> 00:05:08,620
the white is enough to meet
the minimum 4.5 to 1 contrast ratio.

63
00:05:10,670 --> 00:05:14,771
A different WebAIM article,
linked in the teacher's notes below,

64
00:05:14,771 --> 00:05:18,230
discusses designing for colorblind users.

65
00:05:18,230 --> 00:05:23,360
Red and green are often indistinguishable
to those with color blindness.

66
00:05:23,360 --> 00:05:28,490
Which is a challenge for designers
since we so often use red for stop,

67
00:05:28,490 --> 00:05:33,590
cancel, or error indication and
green for go or success messaging.

68
00:05:35,340 --> 00:05:40,060
Interestingly, the recommended
solution isn't based on color choice.

69
00:05:40,060 --> 00:05:42,450
To assist colorblind users,

70
00:05:42,450 --> 00:05:48,080
make sure that colors are not your only
method of conveying important information.

71
00:05:48,080 --> 00:05:53,690
The text content and visual content should
additionally reinforce your messaging.