Created a euiPaletteColorBlindBehindText variant of the color blind palette

CHANGELOG.md

@@ -12,6 +12,7 @@
 - Added `legend` prop to `EuiCheckboxGroup` and `EuiRadioGroup` to add `EuiFieldset` wrappers for title the groups ([#2739](https://github.com/elastic/eui/pull/2739))
 - Changed `EuiNavDrawerFlyout` to close after child nav items are clicked ([#2749](https://github.com/elastic/eui/pull/2749))
 - Changed `EuiNavDrawerFlyout` to trap focus while navigating via keyboard ([#2749](https://github.com/elastic/eui/pull/2749))
+- Created a `euiPaletteColorBlindBehindText` variant of the color blind palette ([#2750](https://github.com/elastic/eui/pull/2750))
 
 **Bug fixes**
 

src-docs/src/views/color_palette/color_palette.js

@@ -5,9 +5,14 @@ import {
   EuiFlexItem,
   EuiTitle,
   EuiSpacer,
+  EuiBadge,
+  EuiFlexGrid,
 } from '../../../../src/components';
 
-import { euiPaletteColorBlind } from '../../../../src/services';
+import {
+  euiPaletteColorBlind,
+  euiPaletteColorBlindBehindText,
+} from '../../../../src/services';
 import { ColorPaletteFlexItem, ColorPaletteCopyCode } from './shared';
 
 const customPalettes = [
@@ -65,5 +70,28 @@ export default () => (
         <EuiSpacer size="xl" />
       </Fragment>
     ))}
+    <EuiTitle size="xxs">
+      <h3>Behind text variant</h3>
+    </EuiTitle>
+    <EuiSpacer size="s" />
+    <EuiFlexGroup alignItems="center">
+      <EuiFlexItem grow={false} style={{ maxWidth: 240 }}>
+        <EuiFlexGrid columns={4} gutterSize="s">
+          {euiPaletteColorBlindBehindText().map((color, i) => (
+            <EuiFlexItem key={i} grow={false}>
+              <span>
+                <EuiBadge color={color}>Text</EuiBadge>
+              </span>
+            </EuiFlexItem>
+          ))}
+        </EuiFlexGrid>
+      </EuiFlexItem>
+      <EuiFlexItem>
+        <ColorPaletteCopyCode
+          textToCopy={'euiPaletteColorBlindBehindText()'}
+          code={'euiPaletteColorBlindBehindText()'}
+        />
+      </EuiFlexItem>
+    </EuiFlexGroup>
   </Fragment>
 );

src-docs/src/views/color_palette/color_palette_example.js

@@ -5,7 +5,12 @@ import { renderToHtml } from '../../services';
 
 import { GuideSectionTypes } from '../../components';
 
-import { EuiCode, EuiText, EuiSpacer } from '../../../../src/components';
+import {
+  EuiCode,
+  EuiText,
+  EuiSpacer,
+  EuiCallOut,
+} from '../../../../src/components';
 
 import ColorPalette from './color_palette';
 const colorPaletteSource = require('!!raw-loader!./color_palette');
@@ -58,6 +63,14 @@ export const ColorPaletteExample = {
             more groups of 10 which are alternates of the original. This is
             better than allowing the initial set to loop.
           </p>
+          <p>
+            These colors are meant to be used as graphics and contrasted against
+            the value of <EuiCode>euiColorEmptyShade</EuiCode> for the current
+            theme. When placing text on top of these colors, use the{' '}
+            <EuiCode>euiPaletteColorBlindBehindText()</EuiCode> variant. It is a
+            brightened version of the base palette to create better contrast
+            with text.
+          </p>
         </div>
       ),
       demo: <ColorPalette />,
@@ -88,6 +101,11 @@ export const ColorPaletteExample = {
             in the number of steps needed and the function will interpolate
             between the colors.
           </p>
+          <EuiCallOut
+            color="warning"
+            iconType="accessibility"
+            title="The palette for status is the only palette that has proper contrast ratios. When using the other palettes, consider adding another form of the data for screen readers."
+          />
         </div>
       ),
       demo: <ColorPaletteQuant />,

src-docs/src/views/combo_box/colors.js

@@ -1,58 +1,61 @@
 import React, { Component } from 'react';
 
 import { EuiComboBox } from '../../../../src/components';
+import { euiPaletteColorBlindBehindText } from '../../../../src/services';
 
 export default class extends Component {
   constructor(props) {
     super(props);
 
+    this.visColorsBehindText = euiPaletteColorBlindBehindText();
+
     this.options = [
       {
         label: 'Titan',
         'data-test-subj': 'titanOption',
-        color: 'primary',
+        color: this.visColorsBehindText[0],
       },
       {
         label: 'Enceladus',
-        color: 'secondary',
+        color: this.visColorsBehindText[1],
       },
       {
         label: 'Mimas',
-        color: '#D36086',
+        color: this.visColorsBehindText[2],
       },
       {
         label: 'Dione',
-        color: 'accent',
+        color: this.visColorsBehindText[3],
       },
       {
         label: 'Iapetus',
-        color: 'warning',
+        color: this.visColorsBehindText[4],
       },
       {
         label: 'Phoebe',
-        color: 'danger',
+        color: this.visColorsBehindText[5],
       },
       {
         label: 'Rhea',
-        color: 'default',
+        color: this.visColorsBehindText[6],
       },
       {
         label:
           "Pandora is one of Saturn's moons, named for a Titaness of Greek mythology",
-        color: '#DA8B45',
+        color: this.visColorsBehindText[7],
       },
       {
         label: 'Tethys',
-        color: '#CA8EAE',
+        color: this.visColorsBehindText[8],
       },
       {
         label: 'Hyperion',
-        color: '#B9A888',
+        color: this.visColorsBehindText[9],
       },
     ];
 
     this.state = {
-      selectedOptions: [this.options[2], this.options[4]],
+      selectedOptions: [this.options[2], this.options[5]],
     };
   }
 

src-docs/src/views/combo_box/render_option.js

@@ -5,88 +5,95 @@ import {
   EuiHighlight,
   EuiHealth,
 } from '../../../../src/components';
+import {
+  euiPaletteColorBlind,
+  euiPaletteColorBlindBehindText,
+} from '../../../../src/services';
 
 export default class extends Component {
   constructor(props) {
     super(props);
 
+    this.visColors = euiPaletteColorBlind();
+    this.visColorsBehindText = euiPaletteColorBlindBehindText();
+
     this.options = [
       {
         value: {
           size: 5,
         },
         label: 'Titan',
         'data-test-subj': 'titanOption',
-        color: 'primary',
+        color: this.visColorsBehindText[0],
       },
       {
         value: {
           size: 2,
         },
         label: 'Enceladus',
-        color: 'secondary',
+        color: this.visColorsBehindText[1],
       },
       {
         value: {
           size: 15,
         },
         label: 'Mimas',
-        color: '#D36086',
+        color: this.visColorsBehindText[2],
       },
       {
         value: {
           size: 1,
         },
         label: 'Dione',
-        color: 'accent',
+        color: this.visColorsBehindText[3],
       },
       {
         value: {
           size: 8,
         },
         label: 'Iapetus',
-        color: 'warning',
+        color: this.visColorsBehindText[4],
       },
       {
         value: {
           size: 2,
         },
         label: 'Phoebe',
-        color: 'danger',
+        color: this.visColorsBehindText[5],
       },
       {
         value: {
           size: 33,
         },
         label: 'Rhea',
-        color: 'default',
+        color: this.visColorsBehindText[6],
       },
       {
         value: {
           size: 18,
         },
         label:
           "Pandora is one of Saturn's moons, named for a Titaness of Greek mythology",
-        color: '#DA8B45',
+        color: this.visColorsBehindText[7],
       },
       {
         value: {
           size: 9,
         },
         label: 'Tethys',
-        color: '#CA8EAE',
+        color: this.visColorsBehindText[8],
       },
       {
         value: {
           size: 4,
         },
         label: 'Hyperion',
-        color: '#B9A888',
+        color: this.visColorsBehindText[9],
       },
     ];
 
     this.state = {
-      selectedOptions: [this.options[2], this.options[4]],
+      selectedOptions: [this.options[2], this.options[5]],
     };
   }
 
@@ -129,8 +136,9 @@ export default class extends Component {
 
   renderOption = (option, searchValue, contentClassName) => {
     const { color, label, value } = option;
+    const dotColor = this.visColors[this.visColorsBehindText.indexOf(color)];
     return (
-      <EuiHealth color={color}>
+      <EuiHealth color={dotColor}>
         <span className={contentClassName}>
           <EuiHighlight search={searchValue}>{label}</EuiHighlight>
           &nbsp;