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.

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

USWDS - Pagination: Borders around page number have poor color contrast #5939

Open
jfc3-dol opened this issue Dec 17, 2021 · 1 comment
Open
Assignees
Labels
Affects: Accessibility 🟡 Relates to the accessibility of our components Context: Sass Issue is in Sass Package: Pagination Role: Dev Development/engineering skills needed

Comments

@jfc3-dol
Copy link

Description

On the Pagination Page ( https://designsystem.digital.gov/components/pagination/ ), the borders around the page number have poor color contrast. The light gray ( #d1d1d1 ) on the white background in your example has a color contrast ratio of 1.5:1 or higher. I would think for those with poor vision, low vision, etc., it would be helpful to them to see how large the click or tap area is for the link. I would make the border color be at least #767676, which makes the color contrast ratio 4.5:1.

If you make changes here, you probably need to make the same changes to the code people can download and use.

@thisisdano thisisdano added Affects: Accessibility 🟡 Relates to the accessibility of our components Needs: Discussion We need to discuss an approach to this issue labels Jun 6, 2022
@mejiaj mejiaj added Needs: Confirmation We need to confirm that this is an issue and removed Needs: Discussion We need to discuss an approach to this issue labels May 23, 2024
@mejiaj
Copy link
Contributor

mejiaj commented May 23, 2024

This border color is being set in usa-pagination.scss:

border-color: color.adjust(color($pagination-current-color), $alpha: -0.8);

@mejiaj mejiaj removed the Needs: Confirmation We need to confirm that this is an issue label May 23, 2024
@mejiaj mejiaj transferred this issue from uswds/uswds-site May 23, 2024
@github-actions github-actions bot added the Status: Triage We're triaging this issue and grooming if necessary label May 23, 2024
@mejiaj mejiaj added Package: Pagination and removed Status: Triage We're triaging this issue and grooming if necessary labels May 23, 2024
@amyleadem amyleadem changed the title Pagination Page - Borders Around Page Number has Poor Color Contrast USWDS - Pagination: Borders around page number have poor color contrast Jun 26, 2024
@RachelCorsino RachelCorsino self-assigned this Jun 26, 2024
@mejiaj mejiaj added Role: Dev Development/engineering skills needed Context: Sass Issue is in Sass labels Jun 27, 2024
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Affects: Accessibility 🟡 Relates to the accessibility of our components Context: Sass Issue is in Sass Package: Pagination Role: Dev Development/engineering skills needed
Projects
Status: Ready to Schedule
Development

No branches or pull requests

4 participants