Test/adjust color scheme for contrast #41

After testing with https://webaim.org/resources/contrastchecker/, all backround+text pairs have sufficient contrast
blahosyl · Mar 28, 2024 · 4f852f6 · 4f852f6
1 parent 220df81
commit 4f852f6
Show file tree

Hide file tree

Showing 3 changed files with 55 additions and 33 deletions.
diff --git a/README.md b/README.md
@@ -100,7 +100,35 @@ Testing user stories
 Full testing of functionalities
 
 ### Accessibility testing
+
 Wave
+
+
+|color name 	|HEX code|
+|---			|---	|
+|dark-blue	|#004056| 
+|med-blue		|#2E7E8E| 
+|light-blue	|#1ADAE8|
+|med-orange	|#DC3A04|
+|light-orange	|#FCAF02|
+|red			|#EB0000| 
+|white			|#FFFFFF| 
+|black			|#000000|
+
+
+The paired colors have the following contrasts:
+
+| color 1 |color 2 |contrast | [WCAG AAA](https://ialabs.ie/what-is-the-difference-between-wcag-a-aa-and-aaa/) | comments |
+|---			|---		|:---:		|:---:|--- |
+|dark-blue 	|white 	|11.24:1 	| ✅ |   |
+|orange	 	| dark-blue | 6.03:1 |✅|only used for large text|
+|med-blue 	| white 	| 4.52:1 	| ✅ |only used for large text|
+|red 			| white	 | 4.63:1	| ✅ |only used for large text|
+|med-orange 	| white	| 4.51:1	|✅ |only used for graphical objects|
+|light-orange |black	|11.27:1	|✅	 |	|
+|light-blue 	|black 	|12.23:1	|✅ |	|
+
+
 Web Disability Simulator
 
 ### Bugs

diff --git a/assets/css/style.css b/assets/css/style.css
@@ -1,11 +1,12 @@
 /* colors */
 :root {
   --dark-blue: #004056;
-  --light-blue: #1adae8;
-  --med-orange: #cf6437;
-  --light-orange: #fcaf02;
-  --dull-red: #d42d45;
-  --red: red;
+  --med-blue: #2E7E8E;
+  --light-blue: #1ADAE8;
+  --med-orange: #DC3A04;
+  --light-orange: #FCAF02;
+  --red: #EB0000;
+  --white: #FFFFFF; 
 
 }
 /* global layout */
@@ -51,7 +52,7 @@ button {
 /* the Welcome screen displaying the gameplay rules and scrore counting */
 #welcome-div {
   background-color: var(--dark-blue);
-  color: white;
+  color: var(--white);
 }
 
 /* the `div` within `#welcome-div` displaying the gameplay instructions */
@@ -106,7 +107,7 @@ button {
 
 /* unified formatting of links in the contentful `divs` within  `#welcome-div` */
 #welcome-div a {
-  color: white;
+  color: var(--white);
 }
 
 /* unified formatting for the big buttons */
@@ -120,39 +121,34 @@ button {
 
 /* the big button on the Welcome screen */
 #start-game-button {
-  background-color: orange;
+  background-color: var(--light-orange);
 }
 
 /* the "popup" screen celebrating selected milestones */
 #milestone-div {
   display: none;
   /* background-color: rgba(215, 107, 6, 0.9); */
   background: url("../images/balloons.jpg") no-repeat center;
-  color: white;
+  color: var(--white);
 }
 
 /* the text on the milestone "popup" */
 #milestone-div h1 {
-  background-color: orange;
+  background-color: var(--light-orange);
   text-align: center;  
   padding: 1rem;
   border-radius: 5px;
   font-size: 250%;
 }
 
-/* the big button on the milestone popup */
-#continue-game-button {
-  background-color: red;
-}
-
 /* the game area containing the game title, question area, new game button, streak counter and operand selector drop-down */
 #game-area {
   /* elements in one column */
   display: flex;
   flex-direction: column;
   /* elements horizontally centered (watch out: for `flex-direction: column;`, horizontal and vertical alignment commands are swapped ) */
   align-items: center;
-  border: solid 2px red;
+  border: solid 2px var(--red);
   border-radius: 20px;
   padding: 2rem;
   }
@@ -166,15 +162,15 @@ button {
   min-width: 250px;
   justify-content: space-between;
   flex-wrap: wrap;
-  border: solid 2px orange;
+  border: solid 2px var(--light-orange);
   border-radius: 10px;
   padding: 1rem;
   margin-bottom: 2rem;
 }
 
 /* highlighing the user's wrong guess */
 .hilight {
-  color:red;
+  color: var(--red);
   font-weight: bold;
   font-size: 110%;
 }
@@ -195,17 +191,17 @@ button {
 /* the button for checking the user guess */
 #submit-button {
   border-radius: 5px;
-  border-color: red;
-  background-color: orange;
+  border-color: var(--red);
+  background-color: var(--light-orange);
   font-size: 150%;
 }
 
 /* the button for starting a new game */
 #new-game-button {
   border-radius: 20px;
-  border-color: orange;
-  background-color: red;
-  color:white;
+  border-color: var(--light-orange);
+  background-color: var(--red);
+  color: var(--white);
   margin-top: 2rem;
   font-size: 250%;
 }
@@ -214,6 +210,7 @@ button {
 #streak-div {
   display: flex;
   margin-top: 1rem;
+  font-size: large;
 }
 
 /* the number showing the user's perfect streak count */

diff --git a/assets/js/script.js b/assets/js/script.js
@@ -374,11 +374,10 @@ function showMilestones() {
       // change color of streak number
       streakCounter.style.color='black';;
       break;
-    case 3:
+    case 1:
       // set streak milestone color
-      color = 'var(--light-orange)';
-      buttonColor = 'var(--light-blue)';
-      // buttonColor = 'var(--red)';
+      color = 'var(--med-blue)';
+      buttonColor = 'var(--light-orange)';
       // show the `milestoneDiv`
       showMilestone();
       // show streak count on `milestoneDiv`
@@ -389,11 +388,10 @@ function showMilestones() {
       // change color of streak number
       streakCounter.style.color=color;
       break;
-    case 5:
+    case 2:
       // set streak milestone color
       color = 'var(--red)';
-      buttonColor = 'var(--light-orange)';
-      // buttonColor = 'var(--red)';
+      buttonColor = 'var(--light-blue)';
       // show the `milestoneDiv`
       showMilestone();
       // show streak count on `milestoneDiv`
@@ -404,11 +402,10 @@ function showMilestones() {
       // change color of streak number
       streakCounter.style.color=color;
       break;
-    case 10:
+    case 3:
       // set streak milestone color
-      color = 'var(--light-blue)';
+      color = 'var(--med-orange)';
       buttonColor = 'var(--light-orange)';
-      // buttonColor = 'var(--red)';
       // show the `milestoneDiv`
       showMilestone();
       // show streak count on `milestoneDiv`