Insufficient color contrast - Githubissues

inveniosoftware / invenio-app-rdm

Turn-key research data management platform.

https://inveniordm.docs.cern.ch

MIT License

109 stars 149 forks source link

Insufficient color contrast #1362

Open jennur opened 2 years ago

jennur commented 2 years ago

The color contrast is not sufficient on some elements (global issue).

Useful tools

axe DevTools to identify contrast issues.
Webaim color contrast checker. The contrast should at least satisfy the WCAG AA requirement.

Some examples:

Screenshot 2022-03-04 at 09 53 23

Screenshot 2022-03-04 at 09 53 12

github-actions[bot] commented 2 years ago

This issue was automatically marked as stale.

amccollo commented 2 months ago

More information:

The visual presentation of text and images of text should have a contrast ratio of at least 4.5:1

If needed, I can supply hex codes for the closest color matches that are compliant (email: aaron.mccollough@ubiquitypress.com).

On search results pages:

Number of results found = 3.76:1 against gray background
Number of results in facet lists = 3.76:1 against gray background
Deposit date label (White lettering on blue field) = 4.06:1
Resource type label (white lettering on gray field) = 4.03:1
Metadata-only label (while lettering on teal field) = 2.56:1

On upload form:

invenio-accordion-field dividers (white lettering on blue background) = 4.06:1
Storage available labels (gray text on gray field) = 3.76:1
default field text prompts (gray on white background) = 1.68:1

On community setup form:

invenio-accordion-field dividers (white lettering on blue background) = 4.06:1
default field text prompts (gray on white background) = 1.68:1

On published record page:

Technical metadata (gray text on gray background) = 4.44:1
Resource type label (white lettering on gray field) = 4.03:1
Metadata-only label (while lettering on teal field) = 2.56:1