[Accessibility] Increase of color contrast on parts of site

[hostle83]

Describe the bug

According to WCAG 2.0, color contrast for large text (defined as 14 pt and bold or larger, or 18 point or larger) should at least be 3:1 (4:5:1 for normal text). Parts of the current site fail a color contrast check.

• On https://demo.dspace.org/mydspace?configuration=workspace: "Search the repository", "10" (under "Results per page"), and "Last modified Descending" (Under "Sort By")

• On https://demo.dspace.org/browse/srsc: "Filter results by typing the first few letters", "Search", and "Add"

• On https://demo.dspace.org/browse/subject: "Search the repository" and "Filter results by typing the first few letters" (small text below the search box)

• Also see screenshot:

To Reproduce

Steps to reproduce the behavior:
I used the Silktide plugin on demo.dspace.org to check color contrasts on each site.

Expected behavior

Increase color contrast to at least 3:1 for large text. Ideally (level AAA), to 4:5:1. See also https://webaim.org/resources/contrastchecker/

[Andrea-Guevara]

@hostle83, @tdonohue Good afternoon! we at Neki-it would like to help solve this problem. Before providing a pull we want to know if you agree with us adding the color $gray-700 (#495057) as the text color? currently the placeholder color is set to “lighten($gray-700, 10%)” but, we could leave only $gray-700 to try to improve the contrast! we would do the same for the other texts that are giving problems.

[hostle83]

Hi @Andrea-Guevara, this looks good to me. The contrast ratio will pass level AAA, which is great. Thank you for taking this on, much appreciated!

[Andrea-Guevara]

Good morning @hostle83! we've just released a pull that will help improve the color contrast of the placeholders.

This pull does not correct the color contrast of the buttons mentioned above, as they are initially disabled.

If necessary, we'll be happy to make any adjustments!