diff --git a/src-docs/src/views/guidelines/colors.js b/src-docs/src/views/guidelines/colors.js
index fb2994f3607..7aa9a3fe029 100644
--- a/src-docs/src/views/guidelines/colors.js
+++ b/src-docs/src/views/guidelines/colors.js
@@ -41,12 +41,6 @@ const allowedColors = [
   'euiColorAccent',
 ];
 
-const ratingAAA = <EuiBadge color="#000">AAA</EuiBadge>;
-
-const ratingAA = <EuiBadge color="#333">AA</EuiBadge>;
-
-const ratingAA18 = <EuiBadge color="#666">AA18</EuiBadge>;
-
 function renderPaletteColor(palette, color, index, key) {
   const hex = key ? palette[color][key] : palette[color];
   const name = key && key !== 'graphic' ? `${color}_${key}` : color;
@@ -95,8 +89,50 @@ function renderPaletteColor(palette, color, index, key) {
 export default class extends Component {
   constructor(props) {
     super(props);
+    this.state = {
+      value: '3',
+      behindTextVariant: false,
+    };
+  }
+
+  onChange = e => {
+    this.setState({
+      value: e.currentTarget.value,
+    });
+  };
+
+  onBehindTextVariantChange = e => {
+    this.setState({
+      behindTextVariant: e.target.checked,
+    });
+  };
 
-    this.levels = [
+  render() {
+    const { value, behindTextVariant } = this.state;
+    const { selectedTheme } = this.props;
+
+    const ratingAAA = (
+      <EuiBadge color={selectedTheme.includes('dark') ? '#EEE' : '#000'}>
+        AAA
+      </EuiBadge>
+    );
+    const ratingAA = (
+      <EuiBadge color={selectedTheme.includes('dark') ? '#666' : '#333'}>
+        AA
+      </EuiBadge>
+    );
+    const ratingAA18 = (
+      <EuiBadge color={selectedTheme.includes('dark') ? '#333' : '#666'}>
+        AA18
+      </EuiBadge>
+    );
+    const ratingAll = (
+      <EuiBadge color={selectedTheme.includes('dark') ? '#000' : '#EEE'}>
+        ALL
+      </EuiBadge>
+    );
+
+    const levels = [
       {
         min: 0,
         max: 2.8,
@@ -114,10 +150,10 @@ export default class extends Component {
       },
     ];
 
-    this.ticks = [
+    const ticks = [
       {
         value: 0,
-        label: <EuiBadge color="#eee">ALL</EuiBadge>,
+        label: ratingAll,
       },
       {
         value: 3,
@@ -133,28 +169,6 @@ export default class extends Component {
       },
     ];
 
-    this.state = {
-      value: '3',
-      behindTextVariant: false,
-    };
-  }
-
-  onChange = e => {
-    this.setState({
-      value: e.currentTarget.value,
-    });
-  };
-
-  onBehindTextVariantChange = e => {
-    this.setState({
-      behindTextVariant: e.target.checked,
-    });
-  };
-
-  render() {
-    const { value, behindTextVariant } = this.state;
-    const { selectedTheme } = this.props;
-
     let palette;
     if (selectedTheme === 'amsterdam-dark') {
       palette = darkAmsterdamColors;
@@ -271,8 +285,8 @@ export default class extends Component {
                 onChange={this.onChange}
                 showTicks
                 showValue
-                levels={this.levels}
-                ticks={this.ticks}
+                levels={levels}
+                ticks={ticks}
                 valueAppend="+"
               />
             </EuiFormRow>