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