Color Considerations on a Dark Background
Transcript of Color Considerations on a Dark Background
![Page 1: Color Considerations on a Dark Background](https://reader031.fdocuments.in/reader031/viewer/2022021813/588143701a28abf65a8b6b8b/html5/thumbnails/1.jpg)
Color considerations on a dark background
Group 1Jeff Ernst, Faye Huang, Yen Chang, Jimmy Lin
![Page 2: Color Considerations on a Dark Background](https://reader031.fdocuments.in/reader031/viewer/2022021813/588143701a28abf65a8b6b8b/html5/thumbnails/2.jpg)
Clear
Straightforward
0
1
2
3
4
5
Jan Feb Mar Apr May
Usually We Use a White Background
![Page 3: Color Considerations on a Dark Background](https://reader031.fdocuments.in/reader031/viewer/2022021813/588143701a28abf65a8b6b8b/html5/thumbnails/3.jpg)
Dark Backgrounds are Cumbersome
0
1
2
3
4
5
Jan Feb Mar Apr May
Distraction from data itself
Heavy background
Visual fatigue
![Page 4: Color Considerations on a Dark Background](https://reader031.fdocuments.in/reader031/viewer/2022021813/588143701a28abf65a8b6b8b/html5/thumbnails/4.jpg)
Distraction from data itself
Heavy background
Visual fatigue
0
1
2
3
4
5
Jan Feb Mar Apr May
Dark Backgrounds are Cumbersome
![Page 5: Color Considerations on a Dark Background](https://reader031.fdocuments.in/reader031/viewer/2022021813/588143701a28abf65a8b6b8b/html5/thumbnails/5.jpg)
Distraction from data itself
Heavy background
Visual fatigue
0
1
2
3
4
5
Jan Feb Mar Apr May
Dark Backgrounds are Cumbersome
![Page 6: Color Considerations on a Dark Background](https://reader031.fdocuments.in/reader031/viewer/2022021813/588143701a28abf65a8b6b8b/html5/thumbnails/6.jpg)
Dark Backgrounds are Cumbersome
Distraction from data itself
Heavy background
Visual fatigue
0
1
2
3
4
5
Jan Feb Mar Apr May
![Page 7: Color Considerations on a Dark Background](https://reader031.fdocuments.in/reader031/viewer/2022021813/588143701a28abf65a8b6b8b/html5/thumbnails/7.jpg)
But There Are Some Exceptions
Tone, brand awareness, given conditions…etc
![Page 8: Color Considerations on a Dark Background](https://reader031.fdocuments.in/reader031/viewer/2022021813/588143701a28abf65a8b6b8b/html5/thumbnails/8.jpg)
Let’s Try to Use Black
Survey item A
Survey item B
Survey item C
Survey item D 9%
9%
12%
33%1%
5%
8%
11%
Survey Results: Team X
Strongly Disagree Disagree Neutral Agree Strongly AgreePercent of Total0% 20% 40% 60% 80% 100%
Survey item Aranked highest for team X
Dissatisfaction was greatest forSurvey item D
Examine the hierarchy
Adjust dark colors
Check the hue and contrast
Add gradience
![Page 9: Color Considerations on a Dark Background](https://reader031.fdocuments.in/reader031/viewer/2022021813/588143701a28abf65a8b6b8b/html5/thumbnails/9.jpg)
Preserve The Order of Information
Examine the hierarchy
Adjust dark colors
Check the hue and contrast
Add gradience
Survey item A
Survey item B
Survey item C
Survey item D 9%
9%
12%
33%1%
5%
8%
11%
Survey Results: Team X
Strongly Disagree Disagree Neutral Agree Strongly AgreePercent of Total0% 20% 40% 60% 80% 100%
Survey item Aranked highest for team X
Dissatisfaction was greatest forSurvey item D
![Page 10: Color Considerations on a Dark Background](https://reader031.fdocuments.in/reader031/viewer/2022021813/588143701a28abf65a8b6b8b/html5/thumbnails/10.jpg)
Survey item A
Survey item B
Survey item C
Survey item D 9%
9%
12%
33%1%
5%
8%
11%
Survey Results: Team X
Strongly Disagree Disagree Neutral Agree Strongly AgreePercent of Total0% 20% 40% 60% 80% 100%
Survey item Aranked highest for team X
Dissatisfaction was greatest forSurvey item D
Preserve The Order of Information
Examine the hierarchy:
Adjust dark colors
Check the hue and contrast
Add gradience
Title
Cat. 1
UpperText
Cat. 2
Label
Cat. 3
Cate-gory
5 colors for 7 purposes
![Page 11: Color Considerations on a Dark Background](https://reader031.fdocuments.in/reader031/viewer/2022021813/588143701a28abf65a8b6b8b/html5/thumbnails/11.jpg)
Survey item A
Survey item B
Survey item C
Survey item D 9%
9%
12%
33%1%
5%
8%
11%
Survey Results: Team X
Strongly Disagree Disagree Neutral Agree Strongly AgreePercent of Total0% 20% 40% 60% 80% 100%
Survey item Aranked highest for team X
Dissatisfaction was greatest forSurvey item D
Avoid Poor Color Combinations
Title
Cat. 1 Cat. 2 Cat. 3
Cate-gory
Examine the hierarchy
Adjust dark colors to
Check the hue and contrast
Add gradience
brighter ones
UpperText
Label
![Page 12: Color Considerations on a Dark Background](https://reader031.fdocuments.in/reader031/viewer/2022021813/588143701a28abf65a8b6b8b/html5/thumbnails/12.jpg)
Use Color Sparingly
Survey item A
Survey item B
Survey item C
Survey item D 9%
9%
12%
33%1%
5%
8%
11%
Survey Results: Team X
Strongly Disagree Disagree Neutral Agree Strongly AgreePercent of Total0% 20% 40% 60% 80% 100%
Survey item Aranked highest for team X
Dissatisfaction was greatest forSurvey item D
Examine the hierarchy
Adjust dark colors
Check the hue and contrast
Add gradience
![Page 13: Color Considerations on a Dark Background](https://reader031.fdocuments.in/reader031/viewer/2022021813/588143701a28abf65a8b6b8b/html5/thumbnails/13.jpg)
Use Color Sparingly
Survey item A
Survey item B
Survey item C
Survey item D 9%
9%
12%
33%1%
5%
8%
11%
Survey Results: Team X
Strongly Disagree Disagree Neutral Agree Strongly AgreePercent of Total0% 20% 40% 60% 80% 100%
Survey item Aranked highest for team X
Dissatisfaction was greatest forSurvey item D
brighter darker remove the color
Examine the hierarchy
Adjust dark colors
Check the hue and contrast
Add gradience
![Page 14: Color Considerations on a Dark Background](https://reader031.fdocuments.in/reader031/viewer/2022021813/588143701a28abf65a8b6b8b/html5/thumbnails/14.jpg)
Shed Some Light on Your Audience
Survey item A
Survey item B
Survey item C
Survey item D 9%
9%
12%
33%1%
5%
8%
11%
Survey Results: Team X
Strongly Disagree Disagree Neutral Agree Strongly AgreePercent of Total0% 20% 40% 60% 80% 100%
Survey item Aranked highest for team X
Dissatisfaction was greatest forSurvey item D
brighter darker remove the color
Examine the hierarchy
Adjust dark colors
Check the hue and contrast
Add gradience
![Page 15: Color Considerations on a Dark Background](https://reader031.fdocuments.in/reader031/viewer/2022021813/588143701a28abf65a8b6b8b/html5/thumbnails/15.jpg)
Make Your Dark Charts Successful
Consider the hue and contrast
Use greyscale
Use gradient background
![Page 16: Color Considerations on a Dark Background](https://reader031.fdocuments.in/reader031/viewer/2022021813/588143701a28abf65a8b6b8b/html5/thumbnails/16.jpg)
Make Your Dark Charts Successful
Consider the hue and contrast
![Page 17: Color Considerations on a Dark Background](https://reader031.fdocuments.in/reader031/viewer/2022021813/588143701a28abf65a8b6b8b/html5/thumbnails/17.jpg)
Make Your Dark Charts Successful
Consider the hue and contrast
Use greyscale
Use gradient background
![Page 18: Color Considerations on a Dark Background](https://reader031.fdocuments.in/reader031/viewer/2022021813/588143701a28abf65a8b6b8b/html5/thumbnails/18.jpg)
Make Your Dark Charts Successful
Consider the hue and contrast
Use greyscale
Use gradient background
![Page 19: Color Considerations on a Dark Background](https://reader031.fdocuments.in/reader031/viewer/2022021813/588143701a28abf65a8b6b8b/html5/thumbnails/19.jpg)
Thanks