diff --git a/src/ol/control/ScaleLine.js b/src/ol/control/ScaleLine.js
index 04fe9fd8c7..852ec120c7 100644
--- a/src/ol/control/ScaleLine.js
+++ b/src/ol/control/ScaleLine.js
@@ -379,7 +379,7 @@ class ScaleLine extends Control {
       '1 : ' + Math.round(this.getScaleForResolution()).toLocaleString();
     const scaleSteps = [];
     const stepWidth = width / this.scaleBarSteps_;
-    let backgroundColor = 'ol-scale-line-bar-light';
+    let backgroundColor = 'ol-scale-singlebar-odd';
     for (let i = 0; i < this.scaleBarSteps_; i++) {
       if (i === 0) {
         // create the first marker at position 0
@@ -412,9 +412,9 @@ class ScaleLine extends Control {
       }
       // switch style of steps
       backgroundColor =
-        backgroundColor === 'ol-scale-line-bar-light'
-          ? 'ol-scale-line-bar-dark'
-          : 'ol-scale-line-bar-light';
+        backgroundColor === 'ol-scale-singlebar-odd'
+          ? 'ol-scale-singlebar-even'
+          : 'ol-scale-singlebar-odd';
     }
 
     let scaleBarText;
diff --git a/src/ol/ol.css b/src/ol/ol.css
index 7c3b4ba55a..593775377c 100644
--- a/src/ol/ol.css
+++ b/src/ol/ol.css
@@ -29,10 +29,10 @@
   will-change: contents, width;
   transition: all 0.25s;
 }
-.ol-scale-line-bar-dark{
+.ol-scale-singlebar-even{
   background-color: #000000;
 }
-.ol-scale-line-bar-light{
+.ol-scale-singlebar-odd{
   background-color: #ffffff;
 }
 .ol-scale-bar {