Accessibility: Improve contrast of text styling in default UI

feature
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