diff --git a/app/assets/stylesheets/framework/nav.scss b/app/assets/stylesheets/framework/nav.scss
index 1839ffa09760df169ba344b7b8d2bb278f12d55f..40b696774a4761d5b310f5f1d450734f69c19893 100644
--- a/app/assets/stylesheets/framework/nav.scss
+++ b/app/assets/stylesheets/framework/nav.scss
@@ -75,10 +75,14 @@
 
     .badge {
       font-weight: normal;
-      background-color: #eee;
+      background-color: #f3f3f3;
       color: $btn-transparent-color;
       vertical-align: baseline;
     }
+
+    .badge-dark {
+      background-color: #eee;
+    }
   }
 
   &.sub-nav {
diff --git a/app/assets/stylesheets/pages/environments.scss b/app/assets/stylesheets/pages/environments.scss
index 4b382e8adaf633718bf4b0f4397bfb891bdd7292..658aec5e6093dfcb7c8f0f16da1d736091334569 100644
--- a/app/assets/stylesheets/pages/environments.scss
+++ b/app/assets/stylesheets/pages/environments.scss
@@ -116,7 +116,7 @@
 
     .badge {
       font-weight: normal;
-      background-color: $gray-darker;
+      background-color: #f3f3f3;
       color: $gl-placeholder-color;
       vertical-align: baseline;
     }
diff --git a/app/assets/stylesheets/pages/pipelines.scss b/app/assets/stylesheets/pages/pipelines.scss
index 0027d2caf22f2ff1fddf59854c2d48d5370b8ad7..651e82b7b4585b8614c6e890e485065c1212ee99 100644
--- a/app/assets/stylesheets/pages/pipelines.scss
+++ b/app/assets/stylesheets/pages/pipelines.scss
@@ -507,7 +507,7 @@
       }
 
       .badge {
-        background-color: $gray-darker;
+        background-color: #f3f3f3;
         color: $gl-text-color-light;
         font-weight: normal;
         margin-left: $btn-xs-side-margin;
diff --git a/app/views/layouts/nav/_admin.html.haml b/app/views/layouts/nav/_admin.html.haml
index ac04f57e2172c1899ca883413b4bef8e2385ae60..b69114c96cc75d1f64dc521642bae968ba1f19a8 100644
--- a/app/views/layouts/nav/_admin.html.haml
+++ b/app/views/layouts/nav/_admin.html.haml
@@ -31,7 +31,7 @@
       = link_to admin_abuse_reports_path, title: "Abuse Reports" do
         %span
           Abuse Reports
-          %span.badge.count= number_with_delimiter(AbuseReport.count(:all))
+          %span.badge.badge-dark.count= number_with_delimiter(AbuseReport.count(:all))
 
     - if askimet_enabled?
       = nav_link(controller: :spam_logs) do
diff --git a/app/views/layouts/nav/_group.html.haml b/app/views/layouts/nav/_group.html.haml
index f7edb47b6663d15d306f6d914a51fedf7573d58b..c866767a2be4dfa352d3c3a45f0296f244cd9c33 100644
--- a/app/views/layouts/nav/_group.html.haml
+++ b/app/views/layouts/nav/_group.html.haml
@@ -26,13 +26,13 @@
         %span
           Issues
           - issues = IssuesFinder.new(current_user, group_id: @group.id, state: 'opened').execute
-          %span.badge.count= number_with_delimiter(issues.count)
+          %span.badge.badge-dark.count= number_with_delimiter(issues.count)
     = nav_link(path: 'groups#merge_requests') do
       = link_to merge_requests_group_path(@group), title: 'Merge Requests' do
         %span
           Merge Requests
           - merge_requests = MergeRequestsFinder.new(current_user, group_id: @group.id, state: 'opened').execute
-          %span.badge.count= number_with_delimiter(merge_requests.count)
+          %span.badge.badge-dark.count= number_with_delimiter(merge_requests.count)
     = nav_link(controller: [:group_members]) do
       = link_to group_group_members_path(@group), title: 'Members' do
         %span
diff --git a/app/views/layouts/nav/_project.html.haml b/app/views/layouts/nav/_project.html.haml
index 701bcd3ab71391eced00f72bfeafda5ab2bfd358..a67a63adba84c97388823af05210209a257b416e 100644
--- a/app/views/layouts/nav/_project.html.haml
+++ b/app/views/layouts/nav/_project.html.haml
@@ -70,14 +70,14 @@
           %span
             Issues
             - if @project.default_issues_tracker?
-              %span.badge.count.issue_counter= number_with_delimiter(IssuesFinder.new(current_user, project_id: @project.id).execute.opened.count)
+              %span.badge.badge-dark.count.issue_counter= number_with_delimiter(IssuesFinder.new(current_user, project_id: @project.id).execute.opened.count)
 
     - if project_nav_tab? :merge_requests
       = nav_link(controller: :merge_requests) do
         = link_to namespace_project_merge_requests_path(@project.namespace, @project), title: 'Merge Requests', class: 'shortcuts-merge_requests' do
           %span
             Merge Requests
-            %span.badge.count.merge_counter= number_with_delimiter(@project.merge_requests.opened.count)
+            %span.badge.badge-dark.count.merge_counter= number_with_delimiter(@project.merge_requests.opened.count)
 
     - if project_nav_tab? :wiki
       = nav_link(controller: :wikis) do
diff --git a/changelogs/unreleased/badge-color-on-white-bg.yml b/changelogs/unreleased/badge-color-on-white-bg.yml
new file mode 100644
index 0000000000000000000000000000000000000000..680d7ff11f0c0f7fca6fcf977e94f762e02a5d36
--- /dev/null
+++ b/changelogs/unreleased/badge-color-on-white-bg.yml
@@ -0,0 +1,4 @@
+---
+title: Added lighter count badge background-color for on white backgrounds
+merge_request: 7873
+author: