Cleaned up the main page to show the various controls and their states. Refactored the CSS a bit.

low-contrast.css

@@ -18,19 +18,31 @@ body {
 	color: var(--main-font-color);
 }
 
+h1, h2, h3, h4, h5, h6 {
+	color:maroon;
+}
+
+fieldset > legend {
+	color:  darkblue;
+}
+
 textarea, input {
-	background-color: #a6a6a6;
+	background-color: var(--main-bg-color);
 	color: var(--main-font-color);
 }
 
-input[type="radio"], input[type="checkbox"] {
+input[type="radio"], input[type="checkbox"], input, textarea {
 	border: var(--border-style);
 }
 
-input[type="radio"]:focus, input[type="checkbox"]:focus {
+input[type="radio"]:focus, input[type="checkbox"]:focus, input:focus, textarea:focus {
 	border: var(--border-focus-style);
 }
 
+input[type="button"]:focus {
+	border: var(--border-style);
+}
+
 /* Color the check mark in the checkbox */
 input[type=checkbox]::before {
 	/* Using shadow-box instead of background-color will enable the state of the radio button to be visible when printed. */
@@ -44,9 +56,11 @@ input[type="radio"]::before {
 	box-shadow: inset 1rem 1rem var(--main-font-color);
 }
 
-/*On button press / hold*/
+/* On button press / hold */
 input[type="button"]:active {
-	border: 3px solid var(--alt-bg-color);
+	border: var(--border-style);
+	color: var(--main-bg-color);
+	background-color: var(--main-font-color);
 }
 
 ::placeholder {