You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
Copy file name to clipboardExpand all lines: docs/topics/design/color/use-of-color.md
+39-18Lines changed: 39 additions & 18 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -10,47 +10,68 @@ contributors:
10
10
- Rian Rietveld
11
11
---
12
12
13
-
# Using color
13
+
# The use of color
14
14
15
-
Using color to differentiate between elements on a page is fine. However, you should avoid using color as the only visual means to differentiate parts of a page.
15
+
Color is a powerful way to add meaning to elements on a page. However, you need to make sure color is not the **only way** users can get this additional information.
16
16
17
-
For example,
17
+
Users who are colorblind, are visually impaired, or who don't understand the intention of the color you chose, will otherwise miss the information. A color may not have the same meaning in every culture. Always add additional information when you use color in a meaningful way.
18
18
19
-
- Error, success, or notification messages, more info in [Write out an error message in text]({site.baseurl}}/docs/topics/forms/feedback/error-message-format/).
20
-
- Links in the content, more info in [Styling links]({site.baseurl}}/docs/topics/design/links/).
21
-
- Active, hover or focus states, more info in [Styling focus and hover states of interactive HTML elements]({site.baseurl}}/docs/topics/design/focus-hover/).
22
-
- Display information updates.
19
+
23
20
24
-
Use additional styling to indicate types of information including a change of shape or decoration.
21
+
In addition to color, use another way to add information. For example:
22
+
23
+
- Underline links in the content. More info in [Styling links]({site.baseurl}}/docs/topics/design/links/).
24
+
- Add an icon and additional text with status messages.
25
+
- Always add additional text with form errors. More info in [Write out an error message in text]({site.baseurl}}/docs/topics/forms/feedback/error-message-format/).
26
+
- Style hover and focus states of links and buttons using more than just color changes. More info in [Styling focus and hover states of interactive HTML elements]({site.baseurl}}/docs/topics/design/focus-hover/).
25
27
26
28
## Examples
27
29
28
-
### Correct
30
+
{: .callout .dont }
31
+
**Don't**: Use only color to distinguish the different items in a graph.
32
+
33
+
34
+
35
+
Source data: [Historical yearly trends in the usage statistics of content management systems](https://w3techs.com/technologies/history_overview/content_management/all/y) by W3Techs.
36
+
37
+
{: .callout .do }
38
+
**Do**: In addition to colors, use line shapes and/or symbols, so colorblind users can understand the data too.
39
+
40
+
41
+
42
+
{: .callout .dont }
43
+
**Don't**: Use only color to indicate a link in a paragraph of text. Visitors may miss important links.
44
+
45
+
<p>Forgotten vegetables are those <ahref="https://en.wikipedia.org/wiki/Neglected_and_underutilized_crop"style="color: green; text-decoration: none;">once-common crops</a> that have largely disappeared from modern diets. They were very common before, but now our food choices have changed.</p>
29
46
30
-
Use symbols and colors in graphics.
47
+
{: .callout .do }
48
+
**Do**: Underline the link a paragraph of text.
31
49
32
-
Graphic with differently shaped symbols in black in white:
33
-
34
-
50
+
<p>Forgotten vegetables are those <ahref="https://en.wikipedia.org/wiki/Neglected_and_underutilized_crop"style="color: green;">once-common crops</a> that have largely disappeared from modern diets. They were very common before, but now our food choices have changed.</p>
35
51
36
-
### Incorrect
52
+
##Check your design in gray scale
37
53
38
-
Color used as the only indicator for information or functionality:
39
-
40
-
54
+
To check if your website works for colorblind users, you can view it in grayscale. Without color information, you get a better sense for whether your site is easy to understand.
41
55
42
-
The easiest way to check whether your website may be usable by color-blind people is to test it in grayscale. When the color information is extracted, you can more easily see whether your website is still understandable.
56
+
Some tools to emulate how colorblind visitors view your website:
57
+
-[Sim Daltonism](https://michelf.ca/projects/sim-daltonism/), an open source color-blindness simulator for macOS and iOS.
58
+
-[Colorblind Web Page Filter](https://www.toptal.com/designers/colorfilter), a color-blindness emulating filter for a web page, by TopTal.
-[Sufficient color contrast of text and UI controls]({{site.baseurl}}/docs/accessibility-ready/theme-guidelines/sufficient-color-contrast/) in the Theme guidelines for the WordPress accessibility-ready program.
56
74
-[Underlined links in text]({{site.baseurl}}/docs/accessibility-ready/theme-guidelines/underlined-links/) in the Theme guidelines for the WordPress accessibility-ready program.
75
+
-[Styling links]({site.baseurl}}/docs/topics/design/links/) in Standards and best practice, Design & user experience.
76
+
-[Styling focus and hover states of interactive HTML elements]({site.baseurl}}/docs/topics/design/focus-hover/) in Standards and best practice, Design & user experience.
77
+
-[Write out an error message in text]({site.baseurl}/docs/topics/forms/feedback/error-message-format/) in Standards and best practice, Web forms.
0 commit comments