btn-light active and not active colors are almost same
Created by: AucT
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
<div class="btn-group">
<a href="#" class="btn btn-light active" aria-current="page">Active link</a>
<a href="#" class="btn btn-light">Link</a>
<a href="#" class="btn btn-light">Link</a>
</div>
Bootstrap 5 active color is almost same as not active. In bootstrap 4 was much better.
Bootstrap 5 background colors: .btn-light #F8F9FA .btn-light.active #F9FAFB
Bootstrap 4 btn-light background colors: .btn-light #F8F9FA .btn-light.active #DAE0E5
I override in my styles but imo it should be better contrast between active and not active by default
Reduced test cases
Bootstrap 4 is good https://codepen.io/AucT/pen/eYEgLMp
Bootstrap 5 is bad https://codepen.io/AucT/pen/GRvrXxG
What operating system(s) are you seeing the problem on?
Windows
What browser(s) are you seeing the problem on?
Chrome
What version of Bootstrap are you using?
v5.1.3