Color considerations on a dark background
Group 1Jeff Ernst, Faye Huang, Yen Chang, Jimmy Lin
Clear
Straightforward
0
1
2
3
4
5
Jan Feb Mar Apr May
Usually We Use a White Background
Dark Backgrounds are Cumbersome
0
1
2
3
4
5
Jan Feb Mar Apr May
Distraction from data itself
Heavy background
Visual fatigue
Distraction from data itself
Heavy background
Visual fatigue
0
1
2
3
4
5
Jan Feb Mar Apr May
Dark Backgrounds are Cumbersome
Distraction from data itself
Heavy background
Visual fatigue
0
1
2
3
4
5
Jan Feb Mar Apr May
Dark Backgrounds are Cumbersome
Dark Backgrounds are Cumbersome
Distraction from data itself
Heavy background
Visual fatigue
0
1
2
3
4
5
Jan Feb Mar Apr May
But There Are Some Exceptions
Tone, brand awareness, given conditions…etc
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
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
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
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
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
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
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
Make Your Dark Charts Successful
Consider the hue and contrast
Use greyscale
Use gradient background
Make Your Dark Charts Successful
Consider the hue and contrast
Make Your Dark Charts Successful
Consider the hue and contrast
Use greyscale
Use gradient background
Make Your Dark Charts Successful
Consider the hue and contrast
Use greyscale
Use gradient background
Thanks