Go back to top

Toggle Light / Dark / Auto color theme

Toggle accessibility options

Toggle page contents sidebar

DDQ THU 2023-04-06

35. Color: Accessibility & Culture

35.1. Agenda

Released	Category	Assignment	Day	Date
2023-01-10	Term Project	Milestone 0: IRB Training	FRI	2023-01-20
2023-01-19	Paper Pres.	Register a Presentation Date	THU	2023-01-26
2023-01-19	Term Project	Milestone 1: Problem Proposal (Part 1)	FRI	2023-01-27
2023-01-19	Paper Pres.	Pick a Paper	THU	2023-02-09
2023-01-19	Term Project	Milestone 1: Problem Proposal (Part 2)	FRI	2023-02-10
2023-02-07	Exams	Prepare for Exam 1 Quiz	FRI	2023-02-10
2023-02-07	Exams	Exam 1	TUE	2023-02-14
2023-02-16	Term Project	Milestone 2: Definition & Related Work	FRI	2023-03-17
2023-03-20	Term Project	Milestone 3: Design Alternatives	FRI	2023-04-14
2023-03-28	Exams	Prepare for Exam 2 Quiz	FRI	2023-04-21
2023-03-28	Exams	Exam 2	THU	2023-04-27
2023-03-28	Term Project	Milestone 4: Prototyping & Testing	TUE	2023-05-09

1. General Announcements

2. Activity

35.2. Activity

35.2.1. Contrast & Accessibility

Color is an important asset in design of Web content, enhancing its aesthetic appeal, its usability, and its accessibility. However, some users have difficulty perceiving color. People with partial sight often experience limited color vision, and many older users do not see color well. In addition, people using text-only, limited-color or monochrome displays and browsers will be unable to access information that is presented only in color.

—Understanding WCAG 2.0: Use of Color

According to the Web Content Accessibility Guidelines (WCAG), content visible on the Web must meet certain criteria to be considered accessible. For example, here is one criteria governing the minimum color contrast ratio for text:

The visual presentation of text and images of text [must have] a contrast ratio of at least 4.5:1, except for the following:

• Large Text: Large-scale text and images of large-scale text have a contrast ratio of at least 3:1;

• Incidental: Text or images of text that are part of an inactive user interface component, that are pure decoration, that are not visible to anyone, or that are part of a picture that contains significant other visual content, have no contrast requirement.

• Logotypes: Text that is part of a logo or brand name has no contrast requirement.

—WCAG 2.1: Success Criterion 1.4.3 Contrast (Minimum)

contrast ratio

(L1 + 0.05) / (L2 + 0.05), where

• L1 is the relative luminance of the lighter of the colors, and

• L2 is the relative luminance of the darker of the colors.

relative luminance

R * 0.2126 + G * 0.7152 + B * 0.0722, where R, G, and B are the normalized (between 0 and 1) red, green, and blue components of a color in the RGB color model.

The formulas provided above can be tedious to implement correctly in many cases since colors are seen expressed in different ways (hue, RGB value, HSL value, etc.). The “developer mode” of most web browsers can be used to determine contrast ratios for text on a web page. The Contrast Ratio website is also a good option.

35.2.2. Color Blindness

People with color blindness see colors differently than most people.

color blindness

The decreased ability to see color or differences in color.

Fig. 35.1 An Ishihara color test plate. With properly configured computer displays, people with normal vision should see the number “74”. Viewers with red-green color blindness will read it as “21”, and those with total color blindness may not see any numbers. – https://en.wikipedia.org/wiki/Color_blindness

• COBLIS – Color BLIndness Simulator

35.2.3. Color, Psychology, Emotion, and Culture

Wegman and Said (2011) [color:1] discus how different colors can evoke different emotions or result in different impressions. Here are some mappings drawn from various sources that are primarily based on Western culture:

Red

• urgency
• passion
• heat
• love
• blood

Purple

• wealth
• royalty
• sophistication
• intelligence
• spirituality

Blue

• truth
• dignity
• power
• coolness
• melancholy

Black

• formality
• death
• rebellion
• strength
• evil*

White

• emptiness
• lightness
• clean
• honest
• pure*

Yellow

• warmth
• cowardice
• brightness
• creativity
• cheer

Green

• nature
• health
• money
• cheerfulness
• quality

Remember, the information presented above is based on Western cultures. For example, in many Western cultures, white is associated with purity and hope; however, in some Asian culures, white is associated with death and bad luck.

Also, while the color black has traditionally been associated with concepts like death or evil in Western cultures, other associations have started to emerage and gain traction. For example, the color black is often associated with darkness, and dark color schemes have gained popularity recently for enabling a “calm” and potentially “less jarring” experience that even has health benefits related to reduced eye strain and less interference with users’ natural production of melatonin.

35.2.4. Favorite Color

A survey conducted by YouGov reveals that blue is the most popular color in 10 countries across four continents – including China.

Fig. 35.2 Results of YouGov Survey; Used here under Academic Fair Use.

35.2.5. Resources

You may find the following resources useful:

• Color-Hex

• Apple’s Human Interface Guidelines on Color

• Material Design Color System

• UGA Brand Style Guide: Visual Style

35.2.6. Work Period

The remainder of the period will be used a project work period. Please take this time to meet with your Term Project group, see how everyone is doing, discuss any relevant changes to people’s schedules, and work on Term Project: Milestone 3: Design Alternatives.

1. Meet with your Term Project group.

2. Work on your project.

3. After your meeting, individually report on your progress as described below in the “After Class” section.

35.2.6.1. Breakout Groups

There is no in-class breakout group activity today; however, there is an after-class component for today’s DDQ, so be sure to complete that to receive credit for today.

35.2.6.2. After Breakout Groups

N/A.

35.3. After Class

1. Before the next class period, individually reply to the following in a followup discussion to Piazza @104.

   1. What term project group are you in?

   2. Who attended your group meeting today?

   3. What steps have you personally taken to overcome the challenges you mentioned in your last progress report? You should refer to the followup post you submitted for the last DDQ that included a “Work Period” before answering.

   4. In your own words, provide a brief progress report for the current project milestone or your planning for the next milestone that includes any challenges you or your group are facing and you will attempt to overcome them.

2. Continue reading the Practicum module.

3. Read the abstracts for upcoming paper presentations – the schedule can be found here.

4. Here is a list of current assignments:

   Released	Category	Assignment	Day	Date
   2023-01-10	Term Project	Milestone 0: IRB Training	FRI	2023-01-20
   2023-01-19	Paper Pres.	Register a Presentation Date	THU	2023-01-26
   2023-01-19	Term Project	Milestone 1: Problem Proposal (Part 1)	FRI	2023-01-27
   2023-01-19	Paper Pres.	Pick a Paper	THU	2023-02-09
   2023-01-19	Term Project	Milestone 1: Problem Proposal (Part 2)	FRI	2023-02-10
   2023-02-07	Exams	Prepare for Exam 1 Quiz	FRI	2023-02-10
   2023-02-07	Exams	Exam 1	TUE	2023-02-14
   2023-02-16	Term Project	Milestone 2: Definition & Related Work	FRI	2023-03-17
   2023-03-20	Term Project	Milestone 3: Design Alternatives	FRI	2023-04-14
   2023-03-28	Exams	Prepare for Exam 2 Quiz	FRI	2023-04-21
   2023-03-28	Exams	Exam 2	THU	2023-04-27
   2023-03-28	Term Project	Milestone 4: Prototyping & Testing	TUE	2023-05-09