Repository navigation
Updated navbar focus styles are an accessibility regression #41395
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
The updated navbar focus styles introduced in #33125 provide insufficient contrast with the background.
Here's what the focus indicators looked like prior to that change when using the browser's default focus styles:
The focus indicator may not be pretty, but it's very very visible!
Reduced test cases
It's reproducible in the "Color schemes" section of the Navbar documentation: https://getbootstrap.com/docs/5.3/components/navbar/#color-schemes. In the following screenshot, I've forced the <a> elements for "Home" to display as :focus-visible:
In the first and third ones, the contrast is insufficient (1.29:1 and 1.37:1, respectively), and in the second, the focus indicator is completely invisible.
What operating system(s) are you seeing the problem on?
macOS
What browser(s) are you seeing the problem on?
Chrome, Safari, Firefox
What version of Bootstrap are you using?
v5.3.5
Activity
DhawalChaturvedi commentedon Apr 28, 2025
julien-deramond commentedon Apr 28, 2025
I'm mentioning this here as it could offer a more global solution: in Boosted at Orange (fork of Bootstrap), we implemented a double outline for visible focus states, ensuring there's always a fallback "security" outline. Since the Orange brand colors are mostly black/white or white/black, usually only one outline color is visible — but on colored backgrounds, both outlines show up, improving accessibility.
You can see the relevant implementation here:
https://github.com/Orange-OpenSource/Orange-Boosted-Bootstrap/blob/c06298eb9b4e6d026aef26fa49ead2c96ec29a44/scss/_variables.scss#L653-L662
I haven't tested it yet, but we could potentially set the outer border color to primary and the inner one to "bg body", which should cover most use cases. Something along those lines could work for a generic approach, but still customizable by users.
If we want to be more confident in the results, considering that most of Bootstrap's users don't use Sass to customize the rendering, defaulting to white and black — regardless of the brand — is probably the safest approach, as it tends probably to be more visible in any case.
nwalters512 commentedon Apr 28, 2025
A double black/white outline is pretty close to what the
autostyle does, at least in Chrome + Firefox (Safari uses a single blue color by default, which isn't super accessible). I think this is a very good option.If it's possible, it'd be nice for the colors involved to be CSS variables that we could override, either globally or in a particular context based on our knowledge of what would be accessible, look visually appealing, etc.
mdo commentedon Mar 8, 2026
This is better in v6. Unclear if it'll update in v5 due to how we were doing focus rings via box-shadow there.