Skip to content

Improved default theme color contrast #375

@amyjko

Description

@amyjko

Expected behavior

Contrast should be high enough on any screen, for any person.

Actual behavior

What's the problem?

Some of the default themes have low contrast in dark mode. For example, we had to change the following for the _Teaching Accessible Computing Book:

Muted color (#666666, used in captions) on dark background (#010101) = 3.64:1, fails AA and AAA (passes AA only if bolded) Changed #666666 to #A1A1A1 = 8.27:1

Small highlight/link color (#B36363) in the sidebar on dark background (#010101) = 4.85:1 (meets WCAG AA, fails WCAG AAA) Changed #B36363 to #F76E79

Highlight/link color (#B36363) on Block Background (#333333) = 2.93:1
Changed #B36363 to #F76E79 as per above; then changed #333333 to #222222 (note, this meets AA with the new red but not AAA. TODO is to make it AAA compliant.

What's the design idea?

Change the defaults to improve contrast.

Who benefits?

Anyone with low vision contrast issues, or on low contrast screens.

Metadata

Metadata

Assignees

Labels

defectSomething isn't working as intendedwritingRelated to book authoring.

Projects

Status
No status

Milestone

No milestone

Relationships

None yet

Development

No branches or pull requests

Issue actions