changed colour of text to make more accessible to increase score for …

…access ibility in google lighthouse
markj0hnst0n · May 29, 2020 · 5ebe6e3 · 5ebe6e3
1 parent 69a9a54
commit 5ebe6e3
Show file tree

Hide file tree

Showing 7 changed files with 48 additions and 23 deletions.
diff --git a/.theia/settings.json b/.theia/settings.json
@@ -14,5 +14,6 @@
       "**/.DS_Store": true,
       "**/.theia": true,
    },
-   "emmet.extensionsPath": ".theia"
+"emmet.extensionsPath": ".theia",
+"editor.autoSave": "off"
 }
diff --git a/README.md b/README.md
@@ -46,6 +46,16 @@ Here are pictures of the wireframes on their respective devices.
 
 ![index.html](assets/readme/wireframes/index.html_mobile.png)
 
+## Colour Scheme
+
+A simple colour scheme was intended for this project as the design was to look minimal, also a moodboard of different photos was requested form the client to gain an understanding of the atmosphere they wanted to create with the site.
+On consultation with the client a dusky lavender pink background [colour](http://hex.wikimix.info/en/color-dd85d7) was selected to stand out visually in comparison to other websites and also
+visually and also to match the colour scheme of the photos that were selected to use for the project.
+
+Initially a light blue font colour was chosen to contrast against the pink background but this was found to score low on accessibility on google lighthouse for users with visual impairments so black was selected as tke main font colour for
+easier reading by these users.
+
+
 ### Features
 
 #### Bootstrap Navbar
@@ -221,13 +231,13 @@ My main influence for this site was simplicity.  Every element must have a funct
 
 I took layout pointers from the following websites.
 
-https://www.guilttripcoffee.com/
+[Guilt Trip Coffee Website](https://www.guilttripcoffee.com/)
 
-https://established.coffee/
+[Established Coffee Website](https://established.coffee/)
 
 I also looked at the following website for some guidance on the 'dates' page:
 
-https://www.mac-demarco.com/tour/
+[Mac Demarco Tour Page](https://www.mac-demarco.com/tour/)
 
 ## Acknowledgements
 

diff --git a/assets/css/style.css b/assets/css/style.css
@@ -6,10 +6,14 @@
     background-color: #dd85d7;
 }
 
+.text-color{
+    color: #000;
+}
+
 /*-----------------------------------------Header */
 
 #logo{
-    color: #95d0fc;
+    color: black;
     font-family: 'Mukta', sans-serif;
     font-weight: 600;
     font-size: 300%;
@@ -48,7 +52,7 @@ font-family: "Sriracha", sans-serif;
     color: #000;
     text-align: center;
     width: 150px;
-    height: 150;
+    height: 150px;
     border: solid #000 3px;
     border-radius: 50%;
     padding-top: 35px;
@@ -65,7 +69,7 @@ section a{
 
 section a:hover{
     text-decoration: none;
-    color: #dd85d7;
+    color: #2345a5;
 }
 
 .paragraph-container{
@@ -85,11 +89,11 @@ section a:hover{
 }
 
 .col a{
-    color: #95d0fc;
+    color: #000;
 }
 
 .col a:hover{
-    color: #000;
+    color: #2345a5;
 }
 
 /*-----------------------------------------Audio Page Styles */
@@ -99,6 +103,9 @@ section a:hover{
     display: inline-block;
 }
 
+.audio-headings{
+    font-family: "Mukta", sans-serif;
+}
 
 .faux-audio{
     margin: 10px;
@@ -121,7 +128,7 @@ section a:hover{
 
 #table-heading{
     font-family: "Sriracha", sans-serif;
-    color: black;
+    color: #000;
     margin-top: 150px;
     text-align: center;
 }
@@ -136,20 +143,20 @@ section a:hover{
 }
 
 .dates-table, th, td {
-    color: #95d0fc;
+    color: #2345a5;
     font-family: "Lato", sans-serif;
     font-weight: 600;
     text-align: center;
     border: 3px solid #000;
 }
 
 .dates-table a {
-    color: #95d0fc;
+    color: #2345a5;
     text-decoration: none;
 }
 
 .dates-table a:hover {
-    color: black;
+    color: #000;
     text-decoration: none;
 }
 
@@ -165,6 +172,7 @@ section a:hover{
 .contact-form-heading{
     font-family: 'Sriracha', sans-serif;
     margin-bottom: 30px;
+    color: #000;
 }
 
 .contact-form-button{
@@ -193,3 +201,5 @@ section a:hover{
 .paragraph{
     width: 90%;
 }
+
+}
diff --git a/audio.html b/audio.html
@@ -7,6 +7,7 @@
     <head>
         <meta charset="UTF-8" />
         <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+        <meta name="description" content="The audio for Faux DJs Belfast.  Find out what type of music they play">
         <meta http-equiv="X-UA-Compatible" content="ie=edge" />
         <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" />
         <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" />
@@ -50,7 +51,7 @@
             <div class="container-fluid no-gutters">
                 <div class="row no-gutters">
                     <div class="col-md no-gutters faux-audio">
-                        <h2>Club Music</h2>
+                        <h2 class="text-color audio-headings">Club Music</h2>
                         <img src="assets/images/fauxclubcrowdshot.jpg" alt="Crowd in the a Club" />
                         <iframe
                             title="Faux Club Mix Santeria"
@@ -60,7 +61,7 @@ <h2>Club Music</h2>
                             src="https://w.soundcloud.com/player/?url=https%3A//api.soundcloud.com/tracks/137881038&color=%23e2dbd0&auto_play=false&hide_related=false&show_comments=true&show_user=true&show_reposts=false&show_teaser=true"
                         ></iframe>
 
-                        <h2>Club Music</h2>
+                        <h2 class="text-color audio-headings">Club Music</h2>
                         <img src="assets/images/fauxclubcrowdshot.jpg" alt="Crowd in the a Club" />
                         <iframe
                             title="Faux Club Mix Santeria"
@@ -70,13 +71,13 @@ <h2>Club Music</h2>
                             src="https://w.soundcloud.com/player/?url=https%3A//api.soundcloud.com/tracks/137881038&color=%23e2dbd0&auto_play=false&hide_related=false&show_comments=true&show_user=true&show_reposts=false&show_teaser=true"
                         ></iframe>
 
-                        <h2>Club Music - Spotify Playlist</h2>
+                        <h2 class="text-color audio-headings">Club Music - Spotify Playlist</h2>
                         <img src="assets/images/fauxclubcrowdshot.jpg" alt="Crowd in the a Club" />
                         <iframe title="Faux Club Music Spotify Playlist" class="audio-links" src="https://open.spotify.com/embed/playlist/3IpLX1sUcAyrpu9TG9LrpG" height="300" allow="encrypted-media"></iframe>
                     </div>
 
                     <div class="col-md no-gutters faux-audio">
-                        <h2>Bar Vibes</h2>
+                        <h2 class="text-color audio-headings">Bar Vibes</h2>
                         <img src="assets/images/fauxbarmusicmoodpicclouds.jpg" alt="Moody pink and purple clouds" />
                         <iframe
                             title="Faux Bar Vibes Mix Santeria"
@@ -86,7 +87,7 @@ <h2>Bar Vibes</h2>
                             src="https://w.soundcloud.com/player/?url=https%3A//api.soundcloud.com/tracks/137881038&color=%23e2dbd0&auto_play=false&hide_related=false&show_comments=true&show_user=true&show_reposts=false&show_teaser=true"
                         ></iframe>
 
-                        <h2>Bar Vibes</h2>
+                        <h2 class="text-color audio-headings">Bar Vibes</h2>
                         <img src="assets/images/fauxbarmusicmoodpicclouds.jpg" alt="Moody pink and purple clouds" />
                         <iframe
                             title="Faux Bar Vibes Mix Santeria"
@@ -96,13 +97,13 @@ <h2>Bar Vibes</h2>
                             src="https://w.soundcloud.com/player/?url=https%3A//api.soundcloud.com/tracks/137881038&color=%23e2dbd0&auto_play=false&hide_related=false&show_comments=true&show_user=true&show_reposts=false&show_teaser=true"
                         ></iframe>
 
-                        <h2>Bar Vibes - Spotify Playlist</h2>
+                        <h2 class="text-color audio-headings">Bar Vibes - Spotify Playlist</h2>
                         <img src="assets/images/fauxbarmusicmoodpicclouds.jpg" alt="Moody pink and purple clouds" />
                         <iframe title="Faux Bar Vibes Spotify Playlist" class="audio-links" src="https://open.spotify.com/embed/playlist/5M18RVJ7ieNpgNbO42d5yE" height="300" allow="encrypted-media"></iframe>
                     </div>
 
                     <div class="col-md no-gutters faux-audio">
-                        <h2>Faux Edits</h2>
+                        <h2 class="text-color audio-headings">Faux Edits</h2>
                         <img src="assets/images/fauxclubcrowdshot.jpg" alt="Crowd in the a Club" />
                         <iframe
                             title="Faux DJs Edits"
@@ -111,7 +112,7 @@ <h2>Faux Edits</h2>
                             allow="autoplay"
                             src="https://w.soundcloud.com/player/?url=https%3A//api.soundcloud.com/playlists/511943853&color=%23545454&auto_play=false&hide_related=false&show_comments=true&show_user=true&show_reposts=false&show_teaser=true"
                         ></iframe>
-                        <h2>Faux Edits</h2>
+                        <h2 class="text-color audio-headings">Faux Edits</h2>
                         <img src="assets/images/fauxclubcrowdshot.jpg" alt="Crowd in the a Club" />
                         <iframe
                             title="Faux DJs Edits"
@@ -120,7 +121,7 @@ <h2>Faux Edits</h2>
                             allow="autoplay"
                             src="https://w.soundcloud.com/player/?url=https%3A//api.soundcloud.com/playlists/511943853&color=%23545454&auto_play=false&hide_related=false&show_comments=true&show_user=true&show_reposts=false&show_teaser=true"
                         ></iframe>
-                        <h2>Faux Edits</h2>
+                        <h2 class="text-color audio-headings">Faux Edits</h2>
                         <img src="assets/images/fauxclubcrowdshot.jpg" alt="Crowd in the a Club" />
                         <iframe
                             title="Faux DJs Edits"

diff --git a/contact.html b/contact.html
@@ -6,6 +6,7 @@
     <head>
         <meta charset="UTF-8" />
         <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+        <meta name="description" content="The contact for Faux DJs Belfast.  Find out their availability and book them for gigs">
         <meta http-equiv="X-UA-Compatible" content="ie=edge" />
         <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" />
         <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" />

diff --git a/dates.html b/dates.html
@@ -7,6 +7,7 @@
     <head>
         <meta charset="UTF-8" />
         <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+        <meta name="description" content="The dates for Faux DJs Belfast.  Find out where and when they are playing in bars and clubs around Belfast!">
         <meta http-equiv="X-UA-Compatible" content="ie=edge" />
         <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" />
         <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" />
@@ -51,7 +52,7 @@
                 <div class="row">
                     <div class="col-xl"></div>
                     <div class="col-xl">
-                        <h2 id="table-heading">Check out this table to find out where we're playing in the next month!</h2>
+                        <h2 id="table-heading" class="text-color">Check out this table to find out where we're playing in the next month!</h2>
                         <table class="dates-table">
                             <tr>
                                 <th>Venue</th>

diff --git a/index.html b/index.html
@@ -7,6 +7,7 @@
     <head>
         <meta charset="UTF-8" />
         <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+        <meta name="description" content="The homepage for Faux DJs Belfast.  Find out about who they are and find links to music they play and where they are playing it!">
         <meta http-equiv="X-UA-Compatible" content="ie=edge" />
         <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" />
         <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" />