[Deque Analysis] "No Thumbnail" SVG inline image has insufficient color contrast

[tdonohue]

Deque Analysis Summary

The "No Thumbnail" image displayed (e.g. on Item view page) when an Item is missing a thumbnail has color contrast issues.

Text content lacks 4.5:1 contrast ratio. Foreground: #AAAAAA Background: #FFFFFF The contrast ratio is: 2.3:1

Deque issue ticket IDs: 469999, 471020

NOTE: In a separate ticket, Deque also noted that this might be changed from a image to HTML (styled with CSS to perhaps look like an image) as that's more accessible than an inline image. See #1169

Recommended Fix

Make the foreground text darker. Likely something like #757575, though other colors that pass AA compliance are fine. See this tool https://dequeuniversity.com/rules/axe/4.1/color-contrast?application=axeAPI

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 / your team for analysis.

[artlowel]

Since the base64 string isn't exactly easy to change (for us in this case, but also for institutions that might want to customize it later) I'd go with the HTML approach:

Replacing the default fallback image with an HTML version using colors that pass contrast guidelines will take an estimated 2 hours.

This is best done at the same time as #1169

[tdonohue]

Thanks @artlowel . Sounds good...adding estimate (to both) and keeping assigned to you for your team to work on.