[Deque Analysis] Avoid using "text_muted", as it has insufficient color contrast on a white background

[tdonohue]

Deque Analysis Summary

The text_muted style is used in a number of scenarios, and it's contrast is insufficient on a white background. A few of the scenarios where it is used include:

• Displays of objects in lists...often the displayed non-Title metadata (e.g. date, authors, etc) uses text_muted.
• Placeholder text in input fields use text_muted.

The contrast error is common in all these scenarios:

"Element has insufficient color contrast of 2.99 (foreground color: #959595, background color: #ffffff). Contrast must be 4.5 or more."

1. Search Results (9 tickets)
   • https://demo7.dspace.org/search?spc.page=1&query=test&spc.sf=score&spc.sd=DESC
   • Locations:
     • Date/Author metadata displayed in results uses text_muted
     • Placeholder text in all input boxes (in filters sidebar & in search box itself) uses text_muted
   • Deque issue ticket IDs: 468512, 468513, 468514, 468515, 468516, 468517, 468518, 468519, 468520, 468521, 468522, 468928
2. Header Search box / Login module (2 ticket)
   • (on all pages)
   • Locations: Placeholder text in search box & in email/password of login field use text_muted
   • Deque issue ticket IDs: 469254, 469332
3. Browse by Comm/Coll (1 ticket)
   • https://demo7.dspace.org/community-list
   • Locations: Community/Collection descriptions use text_muted
   • Deque issue ticket IDs: 470068
4. Homepage (3 tickets)
   • https://demo7.dspace.org/home
   • Locations: Placeholder text in search box, and Community/Collection descriptions use text_muted
   • Deque issue ticket IDs: 469553, 469470, 469471
5. Submission (16 tickets)
   • https://demo7.dspace.org/submit
   • Locations:
     • Drag & drop files text (at top)
     • Hint text under all fields
     • Placeholder text in input fields
     • Labels/hints for edit file name/description (after uploading a file)
     • File size (KB/MB) text next to any uploaded files
   • Deque issue ticket IDs: 469504, 469507, 469509, 469511, 469513, 469515, 469517, 469520, 469522, 469523, 469525, 469527, 469529, 469530, 469977, 470000, 470006
6. Collection homepage (5 tickets)
   • https://demo7.dspace.org/collections/0f58a9e3-254a-4a38-a6ea-8c1922762475
   • Locations:
     • Date/Author information in all Item lists
     • Placeholder text in input fields (of Browse by Date, Title, Author, Subject
   • Deque issue ticket IDs: 469638, 469639, 469640, 469641, 469642
7. Community homepage (2 tickets)
   • https://demo7.dspace.org/communities/8b632938-77c2-487c-81f0-e804f63e68e6
   • Locations:
     • In the Settings dropdown, the "section header" for "Results Per Page" and "Sort Options" (this same settings dropdown appears other places as well & was also reported in "Browse by Author")
   • Deque issue ticket IDs: 470092, 469381
8. Edit Collection (1 ticket )
   • https://demo7.dspace.org/collections/0f58a9e3-254a-4a38-a6ea-8c1922762475/edit/metadata
   • Locations: Text in the drag & drop box "Drop a Collection Logo to upload"
   • Deque issue ticket IDs: 470081
9. MyDSpace (18 tickets)
   • https://demo7.dspace.org/mydspace?configuration=workspace&spc.sf=score&spc.sd=DESC
   • Locations: "No Title" text in item list, along with date/authors in item list
   • Deque issue ticket IDs: 470125, 470126, 470127, 470128, 470129, 470130, 470131, 470132, 470133, 470134, 470135, 470136, 470137, 470138, 470139, 470140, 470141, 470142

Recommended Fix

As discussed in recent meetings, we may want to move away from using text_muted at all (and recommend against it in our style guide).

• For text which is secondary (e.g. dates, author text), we may wish to use the secondary color & ensure it has proper color contrast on a white background (must be 4.5 or greater). This means that if we want the secondary color to remain gray, it may need to minimally be #757575. However, other secondary colors are welcome, provided it meets AA compliance (AAA is not required) using this tool: https://dequeuniversity.com/rules/axe/4.1/color-contrast?application=axeAPI
• For placeholder text, Deque recommended considering making it italics rather than making it appear lighter via text_muted. However, obviously we should ensure once text is typed in the box, it is no longer in italics.

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

[mwoodiupui]

Something to think about for the future: perhaps we have this problem because the class is incomplete. IMHO "muted text" should define both the foreground and the background color, and should not be a class itself but a consideration when designing a class. This suggests to me that we should be thinking in terms of the basic functional blocks of a page and defining classes that style everything which goes into them.

[tdonohue]

@mwoodiupui : text-muted isn't a concept we (DSpace) created. It's something we are using from Bootstrap: https://getbootstrap.com/docs/4.0/utilities/colors/#color So, I'm just noting here that Bootstrap's text-muted class shouldn't be used, as it isn't sufficient on a white background (which we use). While I get your point, this isn't a problem we can really solve ourselves...Bootstrap only has one class of this name, and ideally, it would have separate classes for dark vs light backgrounds.

[tdonohue]

@artlowel : Assigning this to you for you/your team to investigate (as it sounded like you had an interest in replacing our usages of text-muted with something like text-secondary or similar).

Please also keep in mind that, fixing this ticket will require updating the style of "placeholder" text in form fields (as it widely uses text-muted), but you should not worry about fixing the color of the form fields themselves (as that will be handled by #1151).

[mwoodiupui]

I won't drag this thread out, but I did understand that text-muted is from Bootstrap. "Muted text" is not; it's a styling concept, and its meaning is dependent on the styling of adjacent and related elements. In the long term we can solve this ourselves, at the cost of less dependence on Bootstrap. (But not in this ticket, so I'll quiet down now.)

[artlowel]

The default bootstrap has for $gray-600 (which is used for text-muted) does have enough contrast against a white background to pass. I propose we stick to bootstrap's default gray values in the base and dspace themes. That will fix this issue and likely a few of the other contrast tickets as well

This can be done in 1 hour.

[tdonohue]

Sounds good @artlowel and thanks for digging into that. That sounds like a clean solution. Adding 1 hour estimate & assigning to you for your team to fix.