v6-alpha-1. Accessibility color contrast on primrary button and links.
Maintainers usually reply within 1 day
Nobody has claimed this yet.
Assessment
- Difficulty
- 3/5
- Estimated time
- 1-2 days
- Newbie friendliness
- 57/100
- Issue type
- Bug
- Clarity
- Mostly clear
- Activity status
- Active
- Tech stack
- bootstrap, css, sass, scss
- Domain
- accessibility, design
Research direction
Start at the Bootstrap 6 button playground linked in the issue and inspect the primary button, light mode links, success backgrounds, and dark mode pagination disabled color. Compare their text and background contrast with the stated WCAG 2.2 AA 4.5:1 threshold; the issue suggests --bs-blue-600 for primary. Done when the affected combinations meet the stated contrast requirement.
Written by the indexing model from the issue text.
Description
Prerequisites
- I have searched for duplicate or closed issues
- I have validated any HTML to avoid common problems
- I have read the contributing guidelines
Describe the issue
WCAG 2.2 AA contrast guide: https://www.w3.org/WAI/WCAG22/Understanding/contrast-minimum.html
Bootstrap 6-alpha1's default primary color (#0087fe) only gives 3.56:1 contrast against white text, failing the a11y check, which expects 4.5:1. This affects both buttons and light-mode links.
Other places;
- white text on Bootstrap 6's success bg (green-500) is under 4.5:1
- The default dark-mode disabled color (gray-500) is just under 4.5:1 on the pagination background
Possible solution: --bs-blue-600 gives ~5.9:1 contrast
--bs-primary-base: var(--bs-blue-600);
--bs-primary-bg: var(--bs-blue-600);
Reduced test cases
Just go to https://getbootstrap.com/docs/6.0/components/button/#playground
What operating system(s) are you seeing the problem on?
macOS
What browser(s) are you seeing the problem on?
Firefox
What version of Bootstrap are you using?
6.0.0.alpha1
- Dominant language
- MDX
- Stars
- 175k
- Forks
- 78.7k
- Avg merge
- 1d 7h
- Merged PRs (30d)
- 103
Getting set up
- No Dockerfile or Docker Compose file
- Has a pull request template
- Read the contributing guide
First steps
- Read the whole issue, then the project's contributing guide.
- Comment on the issue to say you are picking it up — it saves two people doing the same work.
- Fork the repository and make your change on a branch.
- Open a pull request that references the issue number.
More from twbs/bootstrap
-
Select input form caret wrong position on RTL modePossibly taken A pull request linked to this issue is open or already merged. Openbug confirmed css v6
Difficulty 2/5 1-3 hours Newbie friendliness 65/100
twbs/bootstrap#43327 · 1 comment ·
Maintainers usually reply within 1 day
-
v6: OTP input keeps the rest of a selection when you type over itPossibly taken @thejesh23 claimed this 2 days ago. Openbug confirmed has-pr js v6
Difficulty 2/5 1-3 hours Newbie friendliness 82/100
twbs/bootstrap#43323 · 2 comments ·
Maintainers usually reply within 1 day
-
v6: Strength ignores common symbols as special charactersPossibly taken @thejesh23 claimed this 2 days ago. Openbug confirmed docs has-pr js v6
Difficulty 2/5 1-3 hours Newbie friendliness 76/100
twbs/bootstrap#43322 · 1 comment ·
Maintainers usually reply within 1 day
-
v6 alpha - hover-lift effect on menu dropdown only works when mouse is over the buttonPossibly taken @Aryan9891 claimed this 5 days ago. Openbug confirmed css has-pr v6
Difficulty 2/5 1-3 hours Newbie friendliness 67/100
Maintainers usually reply within 1 day
-
Dialog closes when a file input inside it has its picker cancelledPossibly taken @samyferhat claimed this 5 days ago. Openbug confirmed has-pr js v6
Difficulty 2/5 1-3 hours Newbie friendliness 85/100
twbs/bootstrap#43278 · 1 comment · 1 reaction ·
Maintainers usually reply within 1 day
Similar issues
-
Difficulty 2/5 1-3 hours Newbie friendliness 76/100
-
feature/enhancement
Difficulty 2/5 1-3 hours Newbie friendliness 78/100
meilisearch/documentation#3754 ·
Maintainers usually reply within 2 days
-
Difficulty 2/5 1-3 hours Newbie friendliness 72/100
mattermost/compass-design#224 ·
Maintainers usually reply within 1 day
-
Difficulty 2/5 1-3 hours Newbie friendliness 86/100
hypothesis/product-backlog#1766 ·
-
Difficulty 2/5 1-3 hours Newbie friendliness 68/100
GSA/resources.data.gov#1214 ·
Maintainers usually reply within 1 day