diff --git a/static/site.css b/static/site.css
index 486c5b6..5f1f4f5 100644
--- a/static/site.css
+++ b/static/site.css
@@ -24,7 +24,7 @@ body{
 .top-button{
     float: left;
     margin-right: 10px;
-    background-color: red;
+    background-color: #FF6B6B;
     font-weight: bold;
     color: #583535;
 }
@@ -118,7 +118,6 @@ body{
     margin-bottom: 50px;
     margin-left: auto;
     margin-right: auto;
-    background-color: green;
     min-width: 250px;
     width: 80%;
     max-width: 800px;
@@ -127,13 +126,13 @@ body{
 .colum-names{
     width: 100%;
     font-weight: bold;
-    background-color: green;
+    background-color: #00B800;
     font-weight: bold;
 }
 
 .line-even{
     width: 100%;
-    background-color: grey;
+    background-color: #999999; /* 60% grey */
     overflow: hidden;
     padding-top: 2px;
     padding-bottom: 2px;
@@ -153,7 +152,7 @@ body{
 }
 
 .endOfBoardIndicator{
-    background: red;
+    background: #FF6B6B;
     text-align: center;
     font-weight: bold;
 }
diff --git a/templates/base.html b/templates/base.html
index 3685348..e65f92a 100644
--- a/templates/base.html
+++ b/templates/base.html
@@ -1,16 +1,17 @@
-<html>
+<!DOCTYPE html>
+<html lang="en">
     <head>
         <title>Leaderboard</title>
+        <meta name="Description" content="Open Web Leaderboard">
         <link rel="stylesheet" type="text/css" href="/static/site.css">
         <link rel="shortcut icon" href="/static/defaultFavicon.ico">
         <script src="static/buttons.js" defer></script>
 
         <!-- needed for @media-css mofiers -->
         <meta content="width=device-width, initial-scale=1" name="viewport" />
-
     </head>
     <body>
-        <div class=top-bar>
+        <div class=top-bar role="navigation">
             <button id="button-backward" type="button" onclick=backward() 
                     class=top-button>Backward </button>
             <button id="button-forward" type="button" onclick=forward()
@@ -20,11 +21,13 @@
 
             <input id="getPlayer" type="text"   class=input-field
                     placeholder="search player...">
+            <label for="getPlayer">Search for a player.</label>
             <input id="gotoRank"  type="number" class=input-field-number
                      placeholder="goto rank...">
+            <label for="gotoRank">Jump to a given rank.</label>
             {{ findPlayer }}
         </div>
-        <div class=leaderboard-container>
+        <div class=leaderboard-container role="main">
             <div class=colum-names>{{ columNames }}</div>
             {% for player in playerList %}
                 {% set count = loop.index + start %}
@@ -40,7 +43,7 @@
             {% endfor %}
             {{ endOfBoardIndicator }}
         </div>
-        <div class=footer>
+        <div class=footer role="contentinfo">
         	<a class="footerLink" href="https://blog.atlantishq.de/about">Impressum/Legal</a>
         	<a class="footerLink mid" href="https://blog.atlantishq.de/post/insurgency-rating-1/">
                     How does it work?</a>
