diff --git a/src/html/css.html b/src/html/css.html
index bb7f48f..d17921c 100644
--- a/src/html/css.html
+++ b/src/html/css.html
@@ -1,5 +1,5 @@
 <!DOCTYPE html>
-<html>
+<html lang="en">
 
 <head>
   <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
@@ -7,74 +7,76 @@
 </head>
 
 <body>
-  <section class="fdb-block">
-    <div class="container">
-      <h1>Heading 1</h1>
-      <h2>Heading 2</h2>
-      <h3>Heading 3</h3>
-      <h4>Heading 4</h4>
-      <h5>Heading 5</h5>
-      <h6>Heading 6</h6>
-      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent varius dolor purus, et eleifend lectus congue id. Quisque tempor metus ligula, lacinia rutrum enim ultrices eget. Etiam vitae sem massa. Pellentesque vestibulum ex lectus, nec cursus
-        tortor sollicitudin ut. Nullam volutpat ligula ut odio condimentum, sit amet facilisis nulla tempus. Morbi et hendrerit diam, sit amet luctus orci. Quisque egestas, lacus ac iaculis accumsan, quam eros tempus sem, ac ultrices felis eros porttitor
-        nibh. Nunc condimentum mauris dapibus, pretium ipsum ac, lacinia nisi. Nulla facilisi.</p>
+  <main>
+    <section class="fdb-block">
+      <div class="container">
+        <h1>Heading 1</h1>
+        <h2>Heading 2</h2>
+        <h3>Heading 3</h3>
+        <h4>Heading 4</h4>
+        <h5>Heading 5</h5>
+        <h6>Heading 6</h6>
+        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent varius dolor purus, et eleifend lectus congue id. Quisque tempor metus ligula, lacinia rutrum enim ultrices eget. Etiam vitae sem massa. Pellentesque vestibulum ex lectus, nec cursus
+          tortor sollicitudin ut. Nullam volutpat ligula ut odio condimentum, sit amet facilisis nulla tempus. Morbi et hendrerit diam, sit amet luctus orci. Quisque egestas, lacus ac iaculis accumsan, quam eros tempus sem, ac ultrices felis eros porttitor
+          nibh. Nunc condimentum mauris dapibus, pretium ipsum ac, lacinia nisi. Nulla facilisi.</p>
 
-      <br>
-      <h2>Button styles</h2>
-      <p>
-        <a href="#" class="btn btn-primary">Button</a>
-        <a href="#" class="btn btn-outline-primary">Button Empty</a>
-        <a href="#" class="btn btn-dark">Button Black</a>
-        <a href="#" class="btn btn-dark btn-outline-dark">Button Black Empty</a>
+        <br>
+        <h2>Button styles</h2>
+        <p>
+          <a href="#" class="btn btn-primary">Button</a>
+          <a href="#" class="btn btn-outline-primary">Button Empty</a>
+          <a href="#" class="btn btn-dark">Button Black</a>
+          <a href="#" class="btn btn-dark btn-outline-dark">Button Black Empty</a>
 
-        <div style="background-color: #5EA1E1; padding: 30px; display: inline-block;">
-          <a href="#" class="btn btn-light">Button White</a>
-          <a href="#" class="btn btn-light btn-outline-light">Button White Empty</a>
-        </div>
-      </p>
+          <div style="background-color: #5EA1E1; padding: 30px; display: inline-block;">
+            <a href="#" class="btn btn-light">Button White</a>
+            <a href="#" class="btn btn-light btn-outline-light">Button White Empty</a>
+          </div>
+        </p>
 
-      <br>
-      <h2>Buttons with shadows</h2>
-      <p>
-        <a href="#" class="btn btn-shadow">Button</a>
-        <a href="#" class="btn btn-outline-primary btn-shadow">Button Empty</a>
-        <a href="#" class="btn btn-dark btn-shadow">Button Black</a>
-        <a href="#" class="btn btn-dark btn-outline-dark btn-shadow">Button Black Empty</a>
-        <div style="background-color: #5EA1E1; padding: 30px; display: inline-block;">
-          <a href="#" class="btn btn-light btn-shadow">Button White</a>
-          <a href="#" class="btn btn-light btn-outline-light btn-shadow">Button White Empty</a>
-        </div>
-        <a href="#">Link</a>
-      </p>
+        <br>
+        <h2>Buttons with shadows</h2>
+        <p>
+          <a href="#" class="btn btn-shadow">Button</a>
+          <a href="#" class="btn btn-outline-primary btn-shadow">Button Empty</a>
+          <a href="#" class="btn btn-dark btn-shadow">Button Black</a>
+          <a href="#" class="btn btn-dark btn-outline-dark btn-shadow">Button Black Empty</a>
+          <div style="background-color: #5EA1E1; padding: 30px; display: inline-block;">
+            <a href="#" class="btn btn-light btn-shadow">Button White</a>
+            <a href="#" class="btn btn-light btn-outline-light btn-shadow">Button White Empty</a>
+          </div>
+          <a href="#">Link</a>
+        </p>
 
-      <br>
-      <h2>Rounded buttons</h2>
-      <p>
-        <a href="#" class="btn btn-primary">Button</a>
-        <a href="#" class="btn btn-outline-primary btn-round">Button Empty</a>
-        <a href="#" class="btn btn-dark btn-round">Button Black</a>
-        <a href="#" class="btn btn-dark btn-outline-dark btn-round">Button Black Empty</a>
-        <div style="background-color: #5EA1E1; padding: 30px; display: inline-block;">
-          <a href="#" class="btn btn-light btn-round">Button White</a>
-          <a href="#" class="btn btn-light btn-outline-light btn-round">Button White Empty</a>
-        </div>
-      </p>
+        <br>
+        <h2>Rounded buttons</h2>
+        <p>
+          <a href="#" class="btn btn-primary">Button</a>
+          <a href="#" class="btn btn-outline-primary btn-round">Button Empty</a>
+          <a href="#" class="btn btn-dark btn-round">Button Black</a>
+          <a href="#" class="btn btn-dark btn-outline-dark btn-round">Button Black Empty</a>
+          <div style="background-color: #5EA1E1; padding: 30px; display: inline-block;">
+            <a href="#" class="btn btn-light btn-round">Button White</a>
+            <a href="#" class="btn btn-light btn-outline-light btn-round">Button White Empty</a>
+          </div>
+        </p>
 
-      <br>
-      <h1>Heading 1 + P</h1>
-      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
-      <h2>Heading 2 + P</h2>
-      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
-      <h3>Heading 3 + P</h3>
-      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
-      <h4>Heading 4 + P</h4>
-      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
-      <h5>Heading 5 + P</h5>
-      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
-      <h6>Heading 6 + P</h6>
-      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
-    </div>
-  </section>
-</body>
+        <br>
+        <h1>Heading 1 + P</h1>
+        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
+        <h2>Heading 2 + P</h2>
+        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
+        <h3>Heading 3 + P</h3>
+        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
+        <h4>Heading 4 + P</h4>
+        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
+        <h5>Heading 5 + P</h5>
+        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
+        <h6>Heading 6 + P</h6>
+        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
+      </div>
+    </section>
+  </main>
 
-</html>
+</body>
+</html>
\ No newline at end of file
diff --git a/src/html/index.html b/src/html/index.html
index 9a92e3d..0800350 100644
--- a/src/html/index.html
+++ b/src/html/index.html
@@ -1,9 +1,9 @@
 <!DOCTYPE html>
-<html>
+<html lang="en">
 
 <head>
   <title>Froala Design Blocks</title>
-  <meta name="viewport" content="width=device-width, height=device-height, initial-scale=1.0, maximum-scale=1.0" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
 
   <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
   <link href="https://fonts.googleapis.com/css?family=Lato" rel="stylesheet">
@@ -40,51 +40,54 @@
 </head>
 
 <body>
-  <section class="fdb-block py-0 my-5">
-    <div class="container bg-r py-5" style="background-image: url(./imgs/shapes/1.svg);">
-      <div class="row justify-content-start">
-        <div class="col-12 col-sm-10 col-md-8 text-center text-sm-left">
-          <h1>Froala Design Blocks</h1>
-          <p class="lead">Over 170 responsive design blocks ready to be used in your web or mobile apps. All blocks are based on the Bootstrap Library, and they are the building blocks for beautiful websites.</p>
-          <p class="mt-4">
-            <a class="btn btn-dark mr-3 mr-sm-0" href="https://github.com/froala/design-blocks"><i class="fab fa-github"></i> Github Docs</a>
-            <a class="btn btn-primary ml-sm-3 mr-3 mr-sm-0 mt-3 mt-sm-0" href="https://froala.com/design-blocks#playground">Official Website</a>
-          </p>
+
+  <main>
+    <section class="fdb-block py-0 my-5">
+      <div class="container bg-r py-5" style="background-image: url(./imgs/shapes/1.svg);">
+        <div class="row justify-content-start">
+          <div class="col-12 col-sm-10 col-md-8 text-center text-sm-left">
+            <h1>Froala Design Blocks</h1>
+            <p class="lead">Over 170 responsive design blocks ready to be used in your web or mobile apps. All blocks are based on the Bootstrap Library, and they are the building blocks for beautiful websites.</p>
+            <p class="mt-4">
+              <a class="btn btn-dark mr-3 mr-sm-0" href="https://github.com/froala/design-blocks"><i class="fab fa-github"></i> Github Docs</a>
+              <a class="btn btn-primary ml-sm-3 mr-3 mr-sm-0 mt-3 mt-sm-0" href="https://froala.com/design-blocks#playground">Official Website</a>
+            </p>
+          </div>
         </div>
       </div>
-    </div>
-  </section>
+    </section>
 
-  <section class="fdb-block p-2" id="navigator">
-    <div class="container-fluid">
-      <nav class="navbar navbar-expand-md">
-        <button class="navbar-toggler mr-auto ml-auto" type="button" data-toggle="collapse" data-target="#navbarNav0" aria-controls="navbarNav0" aria-expanded="false" aria-label="Toggle navigation">
-          <span class="navbar-toggler-icon"></span>
-        </button>
-        <div class="collapse navbar-collapse mt-2 mt-md-0" id="navbarNav0">
-          <p class="m-auto">
-            <a class="btn btn-outline-primary m-1" href="call-to-action.html">Call to action</a>
-            <a class="btn btn-outline-primary m-1" href="contacts.html">Contacts</a>
-            <a class="btn btn-outline-primary m-1" href="contents.html">Contents</a>
-            <a class="btn btn-outline-primary m-1" href="features.html">Features</a>
-            <a class="btn btn-outline-primary m-1" href="footers.html">Footers</a>
-            <a class="btn btn-outline-primary m-1" href="forms.html">Forms</a>
-            <a class="btn btn-outline-primary m-1" href="headers.html">Headers</a>
-            <a class="btn btn-outline-primary m-1" href="pricings.html">Pricings</a>
-            <a class="btn btn-outline-primary m-1" href="teams.html">Teams</a>
-            <a class="btn btn-outline-primary m-1" href="testimonials.html">Testimonials</a>
-          </p>
-        </div>
-      </nav>
-    </div>
-  </section>
+    <section class="fdb-block p-2" id="navigator">
+      <div class="container-fluid">
+        <nav class="navbar navbar-expand-md">
+          <button class="navbar-toggler mr-auto ml-auto" type="button" data-toggle="collapse" data-target="#navbarNav0" aria-controls="navbarNav0" aria-expanded="false" aria-label="Toggle navigation">
+            <span class="navbar-toggler-icon"></span>
+          </button>
+          <div class="collapse navbar-collapse mt-2 mt-md-0" id="navbarNav0">
+            <p class="m-auto">
+              <a class="btn btn-outline-primary m-1" href="call-to-action.html">Call to action</a>
+              <a class="btn btn-outline-primary m-1" href="contacts.html">Contacts</a>
+              <a class="btn btn-outline-primary m-1" href="contents.html">Contents</a>
+              <a class="btn btn-outline-primary m-1" href="features.html">Features</a>
+              <a class="btn btn-outline-primary m-1" href="footers.html">Footers</a>
+              <a class="btn btn-outline-primary m-1" href="forms.html">Forms</a>
+              <a class="btn btn-outline-primary m-1" href="headers.html">Headers</a>
+              <a class="btn btn-outline-primary m-1" href="pricings.html">Pricings</a>
+              <a class="btn btn-outline-primary m-1" href="teams.html">Teams</a>
+              <a class="btn btn-outline-primary m-1" href="testimonials.html">Testimonials</a>
+            </p>
+          </div>
+        </nav>
+      </div>
+    </section>
 
-  <div id="playground">
-  </div>
+    <div id="playground">
+    </div>
+  </main>
 
   <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
   <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
   <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>
 </body>
 
-</html>
+</html>
\ No newline at end of file
diff --git a/src/html/layout.pug b/src/html/layout.pug
index 504ef7c..fcb8e12 100644
--- a/src/html/layout.pug
+++ b/src/html/layout.pug
@@ -1,9 +1,9 @@
 doctype html
-html
+html(lang='en')
   block vars
   head
     title Froala Design Blocks - #{blockName}
-    meta(name='viewport', content='width=device-width, height=device-height, initial-scale=1.0')
+    meta(name='viewport', content='width=device-width, initial-scale=1.0')
     link(rel='stylesheet', href='https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css', integrity='sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO', crossorigin='anonymous')
     link(href='https://fonts.googleapis.com/css?family=Lato', rel='stylesheet')
     link(rel='stylesheet', href='https://use.fontawesome.com/releases/v5.3.1/css/all.css')
diff --git a/src/scss/froala_blocks.scss b/src/scss/froala_blocks.scss
index 7f216e0..9bf760f 100644
--- a/src/scss/froala_blocks.scss
+++ b/src/scss/froala_blocks.scss
@@ -237,3 +237,26 @@ header + header {
   background-color: #f4f7fe;
   color: $font-color;
 }
+
+// ==============================================
+// Accesibility overrides
+// ==============================================
+
+// Insufficient contrast
+
+.btn-primary {
+  background-color: hsl(207, 92%, 43%);
+  border-color: hsl(207, 92%, 43%);
+}
+
+.btn-outline-primary {
+  color: hsl(207, 92%, 43%);
+  border-color: hsl(207, 92%, 43%);
+}
+
+// .lead
+p {
+  color: hsl(215, 11%, 47%);
+}
+
+
