[a11y]: Background and foreground colors are not screen-reader friendly

[CBID2]

Has this bug been raised before?

• [X] I have checked "open" AND "closed" issues and this is not a duplicate

Where did you find this bug?

production

Description

I ran an accessibility test using Accessibility Insights and it came up with the following results:

Element has insufficient color contrast of 2.39 (foreground color: #4b5563, background color: #0f1623, font size: 9.0pt (12px), font weight: normal). Expected contrast ratio of 4.5:1

Steps to Reproduce

N/A

Screenshots

The red icons is where the color contrasts issue occurs.

Do you want to work on this issue?

Yes

If "yes" to above, please explain how you would technically implement this

I plan on using the following advice from the test: Use foreground color: #74859b and the original background color: #0f1623 to meet a contrast ratio of 4.81:1. However, I will test the colors in a color analyzer app to ensure that these colors are accessible.

[eddiejaoude]

Thank you for raising, what accessibility standards are these results for?

[CBID2]

Thank you for raising, what accessibility standards are these results for?

Hi there. Sorry for the late reply. These results are to ensure that the color contrasts adhere to WCAG 21.

[eddiejaoude]

Thanks @CBID2 👍

Element has insufficient color contrast of 2.39 (foreground color: #4b5563, background color: #0f1623, font size: 9.0pt (12px), font weight: normal). Expected contrast ratio of 4.5:1

[itsharshitrwt]

Hi I am very much new to opensource and want to contribute to this issue . If this issue is related to color contrast i have changed colors for activity feed by changing some css properties , So I am just asking if i am doing it correctly ? Also if I am not doing it correctly , Can you tell me how should i contribute to this issue . It will be really helpful.

[CBID2]

Hi @eddiejaoude I am very much new to opensource and want to contribute to this issue . If this issue is related to color contrast i have changed colors for activity feed by changing some css properties , So I am just asking if i am doing it correctly ? Also if I am not doing it correctly , Can you tell me how should i contribute to this issue . It will be really helpful.

Hi @itsharshitrwt. I expressed interest in completing this issue

[eddiejaoude]

Thanks @itsharshitrwt for showing an interest and giving a demo of your solution. From the issue description CBID2 the author of the issue is keen on solving this issue. Please read our contributing guide, this should explain our process of how to get issues assigned, any questions let us know.

@CBID2 thank you for replying (please note, can you not tag me in the quoted replies, people usually remove the @ otherwise my notifications increase further)

[CBID2]

Thanks @itsharshitrwt for showing an interest and giving a demo of your solution. From the issue description CBID2 the author of the issue is keen on solving this issue. Please read our contributing guide, this should explain our process of how to get issues assigned, any questions let us know.

@CBID2 thank you for replying (please note, can you not tag me in the quoted replies, people usually remove the @ otherwise my notifications increase further)

Hi Eddie. I did not tag you in the quoted reply. That was @itsharshitrwt.

[itsharshitrwt]

Extremely sorry folks, I was not aware of the contributing guidelines.

[eddiejaoude]

Extremely sorry Guys, I was not aware of the contributing guidelines.

no problem, here is the guide (please note I have updated your message with folks, as not everyone is a guy 😉 and we try to use inclusive language in EddieHub) https://github.com/EddieHubCommunity/RepoRater/blob/prototype/CONTRIBUTING.md

[eddiejaoude]

Hi Eddie. I did not tag you in the quoted reply. That was itsharshitrwt.

Hi @CBID2 , here is a screenshot with an arrow explaining it more - that your reply with the quote where you include the tag - if you are still unclear please let me know

I expressed interest in completing this issue

Btw @CBID2 I noticed you have another issue assigned to you, please do not block other users being assigned issues

@itsharshitrwt I have assigned it to you

[CBID2]

Hi Eddie. I did not tag you in the quoted reply. That was itsharshitrwt.

Hi @CBID2 , here is a screenshot with an arrow explaining it more - that your reply with the quote where you include the tag - if you are still unclear please let me know

I expressed interest in completing this issue

Btw @CBID2 I noticed you have another issue assigned to you, please do not block other users being assigned issues

@itsharshitrwt I have assigned it to you

Thanks for clarifying Eddie. As far as the other issue, I did a PR for it already. I believe you just approved it and all it needs is the approved deployment.

[CBID2]

Hi @itsharshitrwt. Any update on this? If you need help getting started, I’ll be happy to assist you :)

[itsharshitrwt]

Hi @CBID2 , I genuinely appreciate your offer of assistance. By now, I have cloned the repo from github but finding the file structure a bit difficult to understand. Also , Do I need to change some css properties because the issue is somewhat related to visibility ? Thanks again for being so supportive!

[CBID2]

Hi @CBID2 , I genuinely appreciate your offer of assistance. By now, I have cloned the repo from github but finding the file structure a bit difficult to understand.

Also , Do I need to change some css properties because the issue is somewhat related to visibility ?

Thanks again for being so supportive!

Based on my search, I think the changes could be made in the global.css file. I highly recommend joining the Discord server and sharing your questions there too: https://discord.com/invite/jZQs6Wu/

[itsharshitrwt]

Hi Folks , I have done some color changes for the Activity feed , please review and tell me if its correct.

[CBID2]

Hi Folks , I have done some color changes for the Activity feed , please review and tell me if its correct.

Do you do it as a Pull Request @itsharshitrwt?

[itsharshitrwt]

No , not now .It's just how it will look like. Also , asking if it is a good color to use??

[CBID2]

No , not now .It's just how it will look like.

Also , asking if it is a good color to use??

It'd be best to show this through a Pull Request @itsharshitrwt. You can add a screenshot that shows the changes. Doing so makes it easier for the maintainers and other contributors to give feedback on it before it gets merged. If you need help with this, check out my blog post, "How To Make a Pull Request Without Pulling Your Hair Out".

[itsharshitrwt]

Thanks for the blog , I will surely check it.

[itsharshitrwt]

Hi folks , I tried creating a pr but it says all checks are failed and (Vercel) someone need to authorize it, I didn't knew about that previously , so i closed the pr. Here is the screenshot of the error .

I don't know how to fix this , can someone please help me .

[CBID2]

Hi folks , I tried creating a pr but it says all checks are failed and (Vercel) someone need to authorize it, I didn't knew about that previously , so i closed the pr.

Here is the screenshot of the error .

I don't know how to fix this , can someone please help me .

@itsharshitrwt. It means that Eddie has to approve the deployment. You can reopen your PR.

[itsharshitrwt]

Hi @CBID2 , Does it mean i need to create a new pr ?? I can do that .

[CBID2]

Hi @CBID2 , Does it mean i need to create a new pr ?? I can do that .

No @itsharshitrwt. Just go down where it says reopen PR

[itsharshitrwt]

Ok @CBID2 . I just re-opened it .

[itsharshitrwt]

Hi folks , I have created a new pull request regarding the issue . I closed the previous one because my system was causing some errors . I hope this pull request is ok.

[itsharshitrwt]

Thanks @CBID2 for clarifying , I saw coderabbit's feedback . I have few questions to ask related the feedback provided.

1. In the (src) folder of the project I tried changing some tailwind colors in Activity.js file from "gray" to "white and green" and later I found this was not correct I have to use the color " #74859b " instead , I searched for this color to apply but this doesn't matches with any of the tailwind colors and the nearest color matches to this was "#64748b" slate-500 . Now , I'm quiet confused how to proceed further with this. Should I change color from "text-gray-600" to "text-slate-500" or create a custom color?

2. There was also a feedback regarding color analyzer , I didn't understand it properly , like do i need to paste a screenshot in my PR after comparing the colors in a color analyzer ?

Thank you

[CBID2]

Thanks @CBID2 for clarifying , I saw coderabbit's feedback . I have few questions to ask related the feedback provided.

1. In the (src) folder of the project I tried changing some tailwind colors in Activity.js file from "gray" to "white and green" and later I found this was not correct I have to use the color " #74859b " instead , I searched for this color to apply but this doesn't matches with any of the tailwind colors and the nearest color matches to this was "#64748b" slate-500 . Now , I'm quiet confused how to proceed further with this. Should I change color from "text-gray-600" to "text-slate-500" or create a custom color?

2. There was also a feedback regarding color analyzer , I didn't understand it properly , like do i need to paste a screenshot in my PR after comparing the colors in a color analyzer ?

Thank you

Good question @itsharshitrwt.🤔 I’m leaning towards the second option. Let's take this conversation in the contributor's channel in EddieHub’s Discord. We can get more opinions there: https://discord.gg/znsBqz8aAn Also, reopen that PR again. It's best to put it in draft mode when you are not finished with it. Here’s how to restore a deleted branch in a closed PR: https://docs.github.com/en/repositories/configuring-branches-and-merges-in-your-repository/managing-branches-in-your-repository/deleting-and-restoring-branches-in-a-pull-request#restoring-a-deleted-branch

[itsharshitrwt]

I created a custom color (#74859b) in tailwind.config.js and used that color in my Activity.js file .

Using the color in Activity.js File.

I hope this correct method. Also , I have joined the discord.

[github-actions[bot]]

Thank you all for contributing to RepoRater! Please take a moment to rate this repo's DX on EddieHub's RepoRater and give the repo a star ⭐