Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Text in 'Committed to Openness' Section is Hard to Read Due to Low Contrast #26

Open
shantanuk7 opened this issue Nov 15, 2024 · 6 comments · May be fixed by #30
Open

Text in 'Committed to Openness' Section is Hard to Read Due to Low Contrast #26

shantanuk7 opened this issue Nov 15, 2024 · 6 comments · May be fixed by #30
Assignees
@mdaatifayman786
Labels
bug Something isn't working good first issue Good for newcomers

Comments

@shantanuk7
Copy link

On the landing page, the "Committed to Openness" section has low contrast between the text (light grey/white) and the background, making it unreadable. The issue is particularly severe for the title text, where phrases like "Committed to" and "from Day One" are almost invisible.

Image

Additionally, the GitHub logo used in this section violates GitHub's branding guidelines, which allow only black or white logos (reference).

Suggested Solution:

  • Increase the text contrast to meet WCAG 2.1 AA standards for accessibility.
  • Replace the GitHub logo with a compliant black or white version.

According to WebAIM - Web Accessibility's Contrast Checker Tool: https://webaim.org/resources/contrastchecker/?fcolor=D1D5DB&bcolor=FFFFFF The current text-background contrast ratio is 1.47:1, which fails WCAG AA standards. The suggested fix improves it to 4.83:1.

Until a better UI design is implemented, here's a proposed interim fix:
Proposed Fix Screenshot

If this solution seems acceptable, I'd be happy to work on this. Please assign the issue to me.
@sainak sainak added bug Something isn't working good first issue Good for newcomers labels Nov 15, 2024
@sainak sainak added this to Care Nov 15, 2024
@github-project-automation github-project-automation bot moved this to Triage in Care Nov 15, 2024
@bodhish
Copy link
Member

bodhish commented Nov 19, 2024

@shantanuk7 thanks for the issue. Do you want to take it up?

@mdaatifayman786
Copy link

I want to work on this. Can you assign me? @bodhish @sainak

@shantanuk7
Copy link
Author

The issue, it seems, still persists. I have researched more and found that the dark mode looks good but it is not working in Google Chrome browser. It works on Firefox (When user theme preferences have been set to dark theme). However, it seems to be a separate issue.

@shantanuk7 thanks for the issue. Do you want to take it up?

@bodhish @sainak I apologise for not replying earlier. I’d be happy to work on resolving the light mode issue if it’s still available for contribution.

@nithish1018
Copy link
Contributor

nithish1018 commented Nov 26, 2024 •
edited
Loading

@bodhish @sainak Can I work on this issue and make it look like this, irrespective of light mode or dark mode?

Image

@rithviknishad
Copy link
Member

Yup

@nithish1018
Copy link
Contributor

Yup

Ok, I'll raise the PR, please assign the issue to me

@nithish1018 nithish1018 linked a pull request Nov 27, 2024 that will close this issue
Open
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees

@mdaatifayman786 mdaatifayman786

Labels
bug Something isn't working good first issue Good for newcomers
Projects
Care
Status: Triage
Milestone
No milestone
Development

Successfully merging a pull request may close this issue.

Fixed Openness section view in light/dark mode nithish1018/landing
6 participants
@bodhish @rithviknishad @sainak @nithish1018 @shantanuk7 @mdaatifayman786