processing-website icon indicating copy to clipboard operation
processing-website copied to clipboard

Low contrast between background and foreground colors (text)

Open SableRaf opened this issue 2 years ago • 5 comments

Description

According to a recent Lighthouse report, some text on the website has low contrast between the background and foreground colors, making it difficult or impossible for some users to read the text.

Impact

Low-contrast text is a significant barrier to accessibility for users with color blindness or visual impairments. It can cause strain on the eyes and make it difficult for some users to read and understand the content on the website.

Proposed Solution

To resolve this issue, the contrast ratio between the background and foreground colors should be increased to a level that meets the accessibility standards. The WCAG recommends a minimum contrast ratio of 4.5:1 for normal text and 3:1 for large text (18pt or 14pt bold).

Affected Elements

This issue spans the entirety of the website but here are some examples.

On the homepage, this is affecting the text in the card modules and the links in the footer. image image

Low contrast can also be found in other places such as the Table of Content title on mobile:

image

This is not an exhaustive list and we will need to take a closer look to find any other instance of low contrast text to ensure accessibility and usability of the website for all users.

SableRaf avatar Feb 01 '23 13:02 SableRaf

I can work on this! Can I be assigned?

Arya-Gupta avatar Feb 07 '23 19:02 Arya-Gupta

Sure! Thanks for volunteering @Arya-Gupta

SableRaf avatar Feb 08 '23 12:02 SableRaf

Can I work on this as well if there is no progress?

shahnoor-khan avatar Feb 13 '23 11:02 shahnoor-khan

I'd like to contribute to this issue and will start investigating the cause of the problem.

Let me know if you're also working on this. Excited to contribute!

nikhilhvr avatar Feb 24 '23 12:02 nikhilhvr

Hi @nikhilhvr and thanks for offer to help. @shahnoor-khan has already submitted a PR for this issue here: https://github.com/processing/processing-website/pull/441 It is awaiting review.

If you still wish to contribute I suggest looking at any of the other issues marked "help wanted": https://github.com/processing/processing-website/issues?q=is%3Aissue+is%3Aopen+label%3A%22Help+Wanted%22

SableRaf avatar Feb 24 '23 13:02 SableRaf