diff --git a/src-docs/src/views/color_picker/containers.js b/src-docs/src/views/color_picker/containers.js
index 9bc0d2f4061..d0a3196ff73 100644
--- a/src-docs/src/views/color_picker/containers.js
+++ b/src-docs/src/views/color_picker/containers.js
@@ -66,9 +66,7 @@ export default () => {
     modal = (
       <EuiModal onClose={closeModal} style={{ width: '800px' }}>
         <EuiModalHeader>
-          <EuiModalHeaderTitle>
-            <h1>Color picker in a modal</h1>
-          </EuiModalHeaderTitle>
+          <EuiModalHeaderTitle>Color picker in a modal</EuiModalHeaderTitle>
         </EuiModalHeader>
 
         <EuiModalBody>
diff --git a/src-docs/src/views/combo_box/containers.js b/src-docs/src/views/combo_box/containers.js
index 6b5c609da5f..9967c6133fe 100644
--- a/src-docs/src/views/combo_box/containers.js
+++ b/src-docs/src/views/combo_box/containers.js
@@ -125,9 +125,7 @@ export default () => {
     modal = (
       <EuiModal onClose={closeModal} style={{ width: '800px' }}>
         <EuiModalHeader>
-          <EuiModalHeaderTitle>
-            <h1>Combo box in a modal</h1>
-          </EuiModalHeaderTitle>
+          <EuiModalHeaderTitle>Combo box in a modal</EuiModalHeaderTitle>
         </EuiModalHeader>
 
         <EuiModalBody>{comboBox}</EuiModalBody>
diff --git a/src-docs/src/views/datagrid/advanced/ref.tsx b/src-docs/src/views/datagrid/advanced/ref.tsx
index 9cd0325f5f6..b2102e89303 100644
--- a/src-docs/src/views/datagrid/advanced/ref.tsx
+++ b/src-docs/src/views/datagrid/advanced/ref.tsx
@@ -220,9 +220,7 @@ export default () => {
       {isModalVisible && (
         <EuiModal onClose={closeModal} style={{ width: 500 }}>
           <EuiModalHeader>
-            <EuiModalHeaderTitle>
-              <h2>Example modal</h2>
-            </EuiModalHeaderTitle>
+            <EuiModalHeaderTitle>Example modal</EuiModalHeaderTitle>
           </EuiModalHeader>
 
           <EuiModalBody>
diff --git a/src-docs/src/views/datagrid/basics/datagrid.js b/src-docs/src/views/datagrid/basics/datagrid.js
index ee119e0ebd6..980a1d461a1 100644
--- a/src-docs/src/views/datagrid/basics/datagrid.js
+++ b/src-docs/src/views/datagrid/basics/datagrid.js
@@ -242,9 +242,7 @@ const trailingControlColumns = [
         modal = (
           <EuiModal onClose={closeModal} style={{ width: 500 }}>
             <EuiModalHeader>
-              <EuiModalHeaderTitle>
-                <h2>A typical modal</h2>
-              </EuiModalHeaderTitle>
+              <EuiModalHeaderTitle>A typical modal</EuiModalHeaderTitle>
             </EuiModalHeader>
 
             <EuiModalBody>
diff --git a/src-docs/src/views/modal/modal.tsx b/src-docs/src/views/modal/modal.tsx
index e5df3006f6a..78ec5578e2b 100644
--- a/src-docs/src/views/modal/modal.tsx
+++ b/src-docs/src/views/modal/modal.tsx
@@ -23,9 +23,7 @@ export default () => {
     modal = (
       <EuiModal onClose={closeModal}>
         <EuiModalHeader>
-          <EuiModalHeaderTitle>
-            <h1>Modal title</h1>
-          </EuiModalHeaderTitle>
+          <EuiModalHeaderTitle>Modal title</EuiModalHeaderTitle>
         </EuiModalHeader>
 
         <EuiModalBody>
@@ -34,7 +32,7 @@ export default () => {
           <EuiCodeBlock language="html" isCopyable>
             {`<EuiModal onClose={closeModal}>
   <EuiModalHeader>
-    <EuiModalHeaderTitle><h1><!-- Modal title --></h1></EuiModalHeaderTitle>
+    <EuiModalHeaderTitle><!-- Modal title --></EuiModalHeaderTitle>
   </EuiModalHeader>
 
   <EuiModalBody>
diff --git a/src-docs/src/views/modal/modal_example.js b/src-docs/src/views/modal/modal_example.js
index a7b648a5428..ef6a3d5d839 100644
--- a/src-docs/src/views/modal/modal_example.js
+++ b/src-docs/src/views/modal/modal_example.js
@@ -32,7 +32,7 @@ const modalWidthSource = require('!!raw-loader!./modal_width');
 
 const modalSnippet = `<EuiModal onClose={closeModal}>
   <EuiModalHeader>
-    <EuiModalHeaderTitle><h1><!-- Modal title --></h1></EuiModalHeaderTitle>
+    <EuiModalHeaderTitle><!-- Modal title --></EuiModalHeaderTitle>
   </EuiModalHeader>
 
   <EuiModalBody>
@@ -46,7 +46,7 @@ const modalSnippet = `<EuiModal onClose={closeModal}>
 
 const modalWidthSnippet = `<EuiModal style={{ width: 800 }} onClose={closeModal}>
   <EuiModalHeader>
-    <EuiModalHeaderTitle><h1><!-- Modal title --></h1></EuiModalHeaderTitle>
+    <EuiModalHeaderTitle><!-- Modal title --></EuiModalHeaderTitle>
   </EuiModalHeader>
 
   <EuiModalBody>
@@ -60,7 +60,7 @@ const modalWidthSnippet = `<EuiModal style={{ width: 800 }} onClose={closeModal}
 
 const modalFormSnippet = `<EuiModal onClose={closeModal}>
   <EuiModalHeader>
-    <EuiModalHeaderTitle><h1><!-- Modal title --></h1></EuiModalHeaderTitle>
+    <EuiModalHeaderTitle><!-- Modal title --></EuiModalHeaderTitle>
   </EuiModalHeader>
 
   <EuiModalBody>
diff --git a/src-docs/src/views/modal/modal_form.tsx b/src-docs/src/views/modal/modal_form.tsx
index a9b138235c8..bdf037a15c2 100644
--- a/src-docs/src/views/modal/modal_form.tsx
+++ b/src-docs/src/views/modal/modal_form.tsx
@@ -115,9 +115,7 @@ export default () => {
     modal = (
       <EuiModal onClose={closeModal} initialFocus="[name=popswitch]">
         <EuiModalHeader>
-          <EuiModalHeaderTitle>
-            <h1>Modal title</h1>
-          </EuiModalHeaderTitle>
+          <EuiModalHeaderTitle>Modal title</EuiModalHeaderTitle>
         </EuiModalHeader>
 
         <EuiModalBody>{formSample}</EuiModalBody>
diff --git a/src-docs/src/views/modal/modal_width.tsx b/src-docs/src/views/modal/modal_width.tsx
index 4ba180ea71f..9896b72352d 100644
--- a/src-docs/src/views/modal/modal_width.tsx
+++ b/src-docs/src/views/modal/modal_width.tsx
@@ -23,9 +23,7 @@ export default () => {
     modal = (
       <EuiModal style={{ width: 800 }} onClose={closeModal}>
         <EuiModalHeader>
-          <EuiModalHeaderTitle>
-            <h1>Modal title</h1>
-          </EuiModalHeaderTitle>
+          <EuiModalHeaderTitle>Modal title</EuiModalHeaderTitle>
         </EuiModalHeader>
 
         <EuiModalBody>
@@ -34,7 +32,7 @@ export default () => {
           <EuiCodeBlock language="html" isCopyable>
             {`<EuiModal style={{ width: 800 }} onClose={closeModal}>
   <EuiModalHeader>
-    <EuiModalHeaderTitle><h1><!-- Modal title --></h1></EuiModalHeaderTitle>
+    <EuiModalHeaderTitle><!-- Modal title --></EuiModalHeaderTitle>
   </EuiModalHeader>
 
   <EuiModalBody>
diff --git a/src-docs/src/views/toast/guidelines.js b/src-docs/src/views/toast/guidelines.js
index 7a781a76714..3ee428f49bf 100644
--- a/src-docs/src/views/toast/guidelines.js
+++ b/src-docs/src/views/toast/guidelines.js
@@ -36,7 +36,7 @@ export default () => {
       <EuiModal onClose={closeModal}>
         <EuiModalHeader>
           <EuiModalHeaderTitle>
-            <h1>Your visualization has an error</h1>
+            Your visualization has an error
           </EuiModalHeaderTitle>
         </EuiModalHeader>
 
diff --git a/src-docs/src/views/window_event/basic_window_event.js b/src-docs/src/views/window_event/basic_window_event.js
index 5441bb6b6de..0e16b2635c3 100644
--- a/src-docs/src/views/window_event/basic_window_event.js
+++ b/src-docs/src/views/window_event/basic_window_event.js
@@ -12,9 +12,7 @@ import { ModalExample } from './modal_example_container';
 const BasicModal = ({ onClose }) => (
   <EuiModal onClose={onClose} style={{ width: '800px' }}>
     <EuiModalHeader>
-      <EuiModalHeaderTitle>
-        <h1>Example modal</h1>
-      </EuiModalHeaderTitle>
+      <EuiModalHeaderTitle>Example modal</EuiModalHeaderTitle>
     </EuiModalHeader>
     <EuiModalBody>
       <p>
diff --git a/src-docs/src/views/window_event/window_event_conflict.js b/src-docs/src/views/window_event/window_event_conflict.js
index bea68055c48..23b6bf787fd 100644
--- a/src-docs/src/views/window_event/window_event_conflict.js
+++ b/src-docs/src/views/window_event/window_event_conflict.js
@@ -28,9 +28,7 @@ const ConflictModal = (props) => {
   return (
     <EuiModal onClose={props.onClose} style={{ width: '800px' }}>
       <EuiModalHeader>
-        <EuiModalHeaderTitle>
-          <h1>Example modal</h1>
-        </EuiModalHeaderTitle>
+        <EuiModalHeaderTitle>Example modal</EuiModalHeaderTitle>
       </EuiModalHeader>
       <EuiModalBody>
         <EuiFieldText
diff --git a/src/components/modal/modal.a11y.tsx b/src/components/modal/modal.a11y.tsx
index 523d1b4d96c..e209b44849f 100644
--- a/src/components/modal/modal.a11y.tsx
+++ b/src/components/modal/modal.a11y.tsx
@@ -36,9 +36,7 @@ const Modal = () => {
       {isModalVisible && (
         <EuiModal {...modalProps}>
           <EuiModalHeader>
-            <EuiModalHeaderTitle>
-              <h1>Title of modal</h1>
-            </EuiModalHeaderTitle>
+            <EuiModalHeaderTitle>Title of modal</EuiModalHeaderTitle>
           </EuiModalHeader>
 
           <EuiModalBody>
diff --git a/src/components/modal/modal.spec.tsx b/src/components/modal/modal.spec.tsx
index fb1fbc521c5..adef5de7212 100644
--- a/src/components/modal/modal.spec.tsx
+++ b/src/components/modal/modal.spec.tsx
@@ -36,9 +36,7 @@ const Modal = () => {
       {isModalVisible && (
         <EuiModal {...modalProps}>
           <EuiModalHeader>
-            <EuiModalHeaderTitle>
-              <h1>Title of modal</h1>
-            </EuiModalHeaderTitle>
+            <EuiModalHeaderTitle>Title of modal</EuiModalHeaderTitle>
           </EuiModalHeader>
 
           <EuiModalBody>
diff --git a/src/components/modal/modal_header_title.tsx b/src/components/modal/modal_header_title.tsx
index 842192abad8..809c9caae64 100644
--- a/src/components/modal/modal_header_title.tsx
+++ b/src/components/modal/modal_header_title.tsx
@@ -16,7 +16,8 @@ export type EuiModalHeaderTitleProps = FunctionComponent<
   HTMLAttributes<HTMLHeadingElement> &
     CommonProps & {
       /**
-       * The tag to render
+       * The tag to render. Can be changed to a lower heading
+       * level like `h2` or a container `div`.
        * @default h1
        */
       component?: ElementType;