diff --git a/CHANGELOG.md b/CHANGELOG.md
index 0d305323b43a..530ed1a558e4 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -4,7 +4,8 @@
 - Make some proprties of `EuiFlyout` optional ([#1003](https://github.com/elastic/eui/pull/1003))
 - Add typings for `EuiFlyout`, `EuiFlyoutBody`, `EuiFlyoutHeader`, and `EuiFlyoutFooter` ([#1001](https://github.com/elastic/eui/pull/1001))
 - Gave `EuiFlyout` close button a data-test-subj ([#1000](https://github.com/elastic/eui/pull/1000))
-- Updated `react-vis` version to `1.10.2`. ([#999](https://github.com/elastic/eui/pull/999))
+- Updated `react-vis` version to `1.10.2` ([#999](https://github.com/elastic/eui/pull/999))
+- Added `component` prop to `EuiTextColor`
 
 **Breaking changes**
 
@@ -12,6 +13,10 @@
   - `EuiPageHeader` must now be contained within `EuiPageBody`
   - `EuiPageSideBar` must now be **outside** of `EuiPageBody`
 
+**Bug fixes**
+
+- `EuiDescribedFormGroup` renders its `description` inside of a `div` instead of a `span`
+
 ## [`1.2.1`](https://github.com/elastic/eui/tree/v1.2.1)
 
 **Bug fixes**
diff --git a/src-docs/src/views/form_layouts/described_form_group.js b/src-docs/src/views/form_layouts/described_form_group.js
index ba64963886b8..8e5c329f3d4d 100644
--- a/src-docs/src/views/form_layouts/described_form_group.js
+++ b/src-docs/src/views/form_layouts/described_form_group.js
@@ -1,5 +1,6 @@
 import React, {
   Component,
+  Fragment,
 } from 'react';
 
 import {
@@ -81,11 +82,11 @@ export default class extends Component {
           idAria="single-example-aria"
           title={<h3>Single text field</h3>}
           description={
-            <span>
+            <Fragment>
               When using this with a single form row where this text serves as the help text for the input,
               it is a good idea to pass <EuiCode>idAria=&quot;someID&quot;</EuiCode> to the form group and pass
               <EuiCode>describedByIds=&#123;[someID]&#125;</EuiCode> to its form row.
-            </span>
+            </Fragment>
           }
         >
           <EuiFormRow
@@ -141,11 +142,11 @@ export default class extends Component {
           title={<h2>Full width</h2>}
           titleSize="xxxs"
           description={
-            <span>
+            <Fragment>
               By default, <EuiCode>EuiDescribedFormGroup</EuiCode> will be double the default width of form elements.
               However, you can pass <EuiCode>fullWidth</EuiCode> prop to this, the individual field and row components
               to expand to their container.
-            </span>
+            </Fragment>
           }
           fullWidth
         >
diff --git a/src/components/form/described_form_group/__snapshots__/described_form_group.test.js.snap b/src/components/form/described_form_group/__snapshots__/described_form_group.test.js.snap
index 83602433b4f0..de5e412314ba 100644
--- a/src/components/form/described_form_group/__snapshots__/described_form_group.test.js.snap
+++ b/src/components/form/described_form_group/__snapshots__/described_form_group.test.js.snap
@@ -300,12 +300,13 @@ exports[`EuiDescribedFormGroup ties together parts for accessibility 1`] = `
               >
                 <EuiTextColor
                   color="subdued"
+                  component="div"
                 >
-                  <span
+                  <div
                     className="euiTextColor euiTextColor--subdued"
                   >
                     Test description
-                  </span>
+                  </div>
                 </EuiTextColor>
               </div>
             </EuiText>
diff --git a/src/components/text/text.js b/src/components/text/text.js
index 228664c2c8e5..aa2e08c24c14 100644
--- a/src/components/text/text.js
+++ b/src/components/text/text.js
@@ -32,7 +32,7 @@ export const EuiText = ({ size, color, grow, textAlign, children, className, ...
   let optionallyAlteredText;
   if (color) {
     optionallyAlteredText = (
-      <EuiTextColor color={color}>
+      <EuiTextColor color={color} component="div">
         {children}
       </EuiTextColor>
     );
diff --git a/src/components/text/text_color.js b/src/components/text/text_color.js
index 1e7a3dc62a9a..f0fecac0a2e6 100644
--- a/src/components/text/text_color.js
+++ b/src/components/text/text_color.js
@@ -18,6 +18,7 @@ export const EuiTextColor = ({
   children,
   color,
   className,
+  component: Component,
   ...rest
 }) => {
   const classes = classNames(
@@ -27,12 +28,12 @@ export const EuiTextColor = ({
   );
 
   return (
-    <span
+    <Component
       className={classes}
       {...rest}
     >
       {children}
-    </span>
+    </Component>
   );
 };
 
@@ -40,8 +41,10 @@ EuiTextColor.propTypes = {
   children: PropTypes.node,
   className: PropTypes.string,
   color: PropTypes.oneOf(COLORS),
+  component: PropTypes.oneOf(['div', 'span']),
 };
 
 EuiTextColor.defaultProps = {
   color: 'default',
+  component: 'span',
 };