Accessibility: Improve contrast of text styling in default UI

Contribute Feature

AI-generated summary

The discussion focuses on improving the contrast of text styling in Discourse’s default UI to meet the Web Content Accessibility Guidelines (WCAG) 2.0. downey points out that the current contrast ratios for certain text elements, such as visited topic titles and cold map dates, are too low and fail to meet the required 4.5:1 ratio for normal text and 3:1 for large text.

Specifically, the following elements have inadequate contrast ratios:

  • “Light grey” #8c8c8c visited topic titles: 3.4:1 (fails)
  • “Light blue” #33bbff cold map dates: 2.2:1 (fails)
  • “Light blue” #91cdf5 cold map dates: 1.71:1 (fails)
  • “Dark blue” #91afd2 cold map dates: 2.27:1 (fails)
  • “Bright orange” #fe7a15 heat map values: 2.62:1 (fails)
  • “Dark orange” #cf7721 heat map values: 3.33:1 (fails)

downey provides updated examples and images to illustrate the issue.

dev221117 agrees that the light grey is problematic and suggests making it darker or changing it to black or light blue.

Overall, the discussion highlights the need to improve the contrast of text styling in Discourse’s default UI to make it more accessible for users with less-than-perfect eyesight.

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
Contrast and accessibility
Accessibility: Color contrast
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
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
Accessibility audit and shepherd for making improvements