Accessibility: Improve contrast of text styling in default UI

Feature
1

As a user with less-than-perfect eyesight, I want to be able to read text and links on Discourse with a contrast ratio that allows me to differentiate types of text, so that I can better understand the purpose of that text.

i.e., Discourse should support Web Content Accessibility Guidelines (WCAG) 2.0 to at least level AA. Level AA requires a contrast ratio of 4.5:1 for normal text, and 3:1 for large text.

If it was desirable to reach to an even higher level of accessibility, level AAA requires a contrast ratio of 7:1 for normal text and 4.5:1 for large text.

Here are some current examples contrast ratios for the home page against the white #ffffff background:

  • “Dark grey” #333333 un-visited topic titles: 12.6:1 (passes)
  • “Light grey” #8c8c8c visited topic titles : 3.4:1 (fails)
  • “Light blue” #33bbff cold map dates: 2.2:1 (fails)

A few resources (many others exist):

5 Likes
2

Not much to say here really. The light gray is indeed very problematic for users with eye sight problems to see, and I’d like it to be fixed by making the gray darker, or maybe black or light blue even.

2 Likes
3

Here are some updated examples for the most recent (AFAICT) colors used in coldmapping on the /latest page against the white #ffffff background.

TL;DR: As with the above items, people with less-than-perfect vision may not be able to see any difference in any of these colors.

  • “Light blue” #91cdf5 cold map dates: 1.71:1 (fails at WCAG AA and AAA for large and small text)
  • “Dark blue” #91afd2 cold map dates: 2.27:1 (fails at WCAG AA and AAA for large and small text)
  • “Grey” #919191 cold map dates: 3.15:1 (fails at WCAG AAA for large and small, and AAA for small, and but passes AA for large text)

Note: The contrast ratio between the two blues is also only 1.32:1 which fails all measures.

  • “Bright orange” #fe7a15 heat map values: 2.62:1 (fails at WCAG AA and AAA for large and small text)
  • “Dark orange” #cf7721 heat map values: 3.33:1 (fails at WCAG AAA for large and small, and AAA for small, and but passes AA for large text)
  • “Brown” #9b764f heat map values: 4.12:1 (fails at WCAG AAA for large and small, and AAA for small, and but passes AA for large text)
  • “Grey” #919191 heat map values: 3.15:1 (fails at WCAG AAA for large and small, and AAA for small, and but passes AA for large text)

Note: The contrast ratio between the bright orange and dark orange is 1.27:1 and between dark orange and brown is 1.24:1 which also fail all measures.

3 Likes