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

Accessibility: Insufficient color contrast of some elements #362

Open
dgodongm opened this issue Jun 27, 2023 · 4 comments · May be fixed by #370
Open

Accessibility: Insufficient color contrast of some elements #362

dgodongm opened this issue Jun 27, 2023 · 4 comments · May be fixed by #370
Labels
a11y-and-ux Accessibility or UX issues and PRs

Comments

@dgodongm
Copy link

Text on numerous buttons and a paragraph element have insufficient color contrast against their background.

Repro Steps:

  1. Navigate to https://joinmastodon.org/
  2. Run Axe DevTools or other A11Y tools

Results:
9 elements flagged as having insufficient color contrast: 8 buttons which are only slightly below WCAG 2 AA 4.5:1 guidance at 4.37:1; and a

element with text that only has 2.77:1

Screenshot 2023-06-27 at 12 58 03 PM

Expected Results:
All elements should meet WCAG 2 AA guidance on color contrast to better ensure content is accessible
@dgodongm
Copy link
Author

Similar/same issues occur throughout https://joinmastodon.org/ pages

@dgodongm
Copy link
Author

dgodongm commented Jun 27, 2023 •
edited
Loading

Seems addressing this may be challenging given Mastodon's branding colors.

@varun-s22 varun-s22 linked a pull request Jul 7, 2023 that will close this issue
Open
@andypiper andypiper added the a11y-and-ux Accessibility or UX issues and PRs label Jul 13, 2023
varun-s22 added a commit to varun-s22/joinmastodon that referenced this issue Jul 19, 2023
@varun-s22
Merge branch 'insufficient-color-contrast-mastodon#362' of https://gi…
97616f8 
…thub.com/varun-s22/joinmastodon into insufficient-color-contrast-mastodon#362
@alireza-hariri
Copy link

alireza-hariri commented Oct 23, 2024 •
edited
Loading

The contrast ratio requirement for a font size larger than 18px is 3 (not 4.5)

according to this.

@dgodongm
Copy link
Author

@alireza-hariri The text noted in the issue is 16px

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
a11y-and-ux Accessibility or UX issues and PRs
Projects
None yet
Milestone
No milestone
Development

Successfully merging a pull request may close this issue.

Fix: Insufficient color contrast of some elements varun-s22/joinmastodon
3 participants
@andypiper @alireza-hariri @dgodongm