bookish icon indicating copy to clipboard operation
bookish copied to clipboard

Improved default theme color contrast

Open amyjko opened this issue 11 months ago • 0 comments

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.

amyjko avatar Mar 17 '24 20:03 amyjko