[Deque Analysis] On homepage of "dspace" theme, text over image has insufficient color contrast

[tdonohue]

Deque Analysis Summary

On homepage, text over image has insufficient color contrast (both for the regular text and the green hyperlinks).

https://demo7.dspace.org/home

1. Regular white text: "Text content lacks 4.5:1 contrast ratio. Text color: #FFFFFF Background color: #8C8C8C Contrast ratio: 3.4:1"
   • Deque issue ticket IDs: 469494
2. Green link text: "Text content lacks 4.5:1 contrast ratio. Link text color: #92C642 Background color: #8C8C8C Contrast ratio: 1.7:1"
   • Deque issue ticket IDs: 469540
3. Green link text (on hover over): "Text content lacks 4.5:1 contrast ratio. Link text color: #68902B Background color: #163B51
   Contrast ratio: 1.7:1"
   • Deque issue ticket IDs: 469550
4. Green link text is not sufficiently differentiated by color from white text. "Link text and static text are differentiated only by color. The contrast ratio between default link text and surrounding text is not at least 3:1."
   • Link text color: #92C642, Surrounding text color: #FFFFFF, Contrast ratio: 2:1
   • Fix is either to underline or outline links (to differentiate) or increase contrast.
   • Deque issue ticket IDs: 469548
5. "Photo by" small text: "Text content lacks 4.5:1 contrast ratio. Text color: #58707E (opacity 0.3 on defined color: #FFFFFF) Background color: #113246 Contrast ratio: 2.6:1"
   • Deque issue ticket IDs: 469544

Recommended Fix

We may need to darken the background overlay image
We may also need to consider making the green links lighter, or replacing them altogether with a different lighter color.
The "photo by" text is not important for the page. It could be lightened though to make it slightly more visible. Or, we could remove it (or move it into code comments in our "dspace" theme itself) as Pexels.com doesn't require it https://www.pexels.com/license/

Other ideas are welcome, as I admit this is a bit of a complex scenario.

More Information / Tools

• As necessary, see mentioned Issue IDs in our assessment results (requires login): https://axeauditor.dequecloud.com/test-run/0856438a-a19a-11eb-bc31-b7d5be387c86/issues
• Consider using Deque's free Chrome plugin to check your work
• Deque's color contrast tool: https://dequeuniversity.com/rules/axe/4.1/color-contrast?application=axeAPI

[tdonohue]

@artlowel : Assigning this to you for analysis, as it's all about the homepage image & overlay text. As you'll see above, I have a few early ideas for how to fix accessibility, but I'm open to other ideas here. (And we might need to remove the green link color if it's just too difficult to deal with)