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

Inaccessibility: Low contrast .c-card__additional in Featured Resource Card #1208

Closed
kelsS opened this issue Mar 12, 2021 · 7 comments · May be fixed by #1265
Closed

Inaccessibility: Low contrast .c-card__additional in Featured Resource Card #1208

kelsS opened this issue Mar 12, 2021 · 7 comments · May be fixed by #1265
Assignees
@ericwbailey
Labels
accessibility Issues dealing with accessibility. resource Links to external sites. styling Issues dealing with our Sass/CSS.

Comments

@kelsS
Copy link

kelsS commented Mar 12, 2021

Please review our Contributing guidelines:
https://a11yproject.com/contributing-guidelines/

Summary

When you right-click on the featured resource card link the text for the .c-card__additional paragraph changes to white over the green background of the card and has very low contrast.

Brief description of the issue. Please identify specific steps.

  1. Navigate to https://www.a11yproject.com/resources/
  2. Hover over the main link in the featured resource card
  3. Right-click on the main link in the featured resource card

Expected result

Expect that the text color for .c-card__additional does not change to white.

Actual result

The text turns to white and is then not readable.

color-contrast-issue-a11yproject

Additional Information

To help us try and reproduce the issue, please provide the following information:

  1. What device were you using? (laptop, phone, tablet, etc.)
    Macbook Pro 16 inch
  1. Operating System version.
    macOS Big Sur 11.2.3
  1. Browser(s) and version(s).
    Firefox Developer Edition, latest version.
  1. Assistive technology used (if applicable)

Additional Information

Note anything else you think would be important to know that didn't fall into an above category.
@boring-cyborg
Copy link

boring-cyborg bot commented Mar 12, 2021

Thanks for opening your first Issue! Please make sure you've read our Code of Conduct and Contributing guidelines.

@ericwbailey
Copy link
Member

Great catch, @kelsS! I'll get on this right now.

@ericwbailey ericwbailey self-assigned this Mar 14, 2021
@ericwbailey ericwbailey added accessibility Issues dealing with accessibility. resource Links to external sites. styling Issues dealing with our Sass/CSS. labels Mar 14, 2021
@ericwbailey ericwbailey mentioned this issue Mar 17, 2021
Merged
@ericwbailey
Copy link
Member

Closed via #1213. Thank you for reporting this!

@kelsS
Copy link
Author

kelsS commented Mar 17, 2021

Awesome! Thanks @ericwbailey :)

@ericwbailey ericwbailey reopened this Mar 19, 2021
@ericwbailey
Copy link
Member

Reopened via #1213 (comment).

@ericwbailey ericwbailey mentioned this issue Mar 23, 2021
Closed
@mxmason
Copy link
Member

mxmason commented Apr 22, 2021

Hey, @ericwbailey, is this still an issue? I tabbed through the cards on all current macOS browsers and couldn't get the contrast issue to appear. I see that #1220 is claimed, but if you don't have time, I'm happy to give it a shot.

@ericwbailey
Copy link
Member

@mxmason Forgot to close this, but good to have it checked by a second person! Closed via #1239.

@mxmason mxmason mentioned this issue Apr 29, 2021
Open
@kelsS kelsS closed this as completed Mar 29, 2023
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees

@ericwbailey ericwbailey

Labels
accessibility Issues dealing with accessibility. resource Links to external sites. styling Issues dealing with our Sass/CSS.
Projects
None yet
Milestone
No milestone
Development

Successfully merging a pull request may close this issue.

Fix card focus edge cases a11yproject/a11yproject.com
3 participants
@ericwbailey @mxmason @kelsS