I believe the customized checkbox and radio button are done and working. Just need to give them a good theme.

low-contrast.css

@@ -6,7 +6,9 @@
 	--alt-bg-color: #e6e6e6;
 	--main-font-color: #134e13;
 	--disabled-bg-color: #666666;
-	--border-style: 0.25rem outset pink;
+	--border-style: var(--default-border-thickness) outset pink;
+	--border-focus-style: var(--default-border-thickness) solid var(--main-font-color);
+	--control-disabled: #000000;
 }
 body {
 	background-color: var(--main-bg-color);
@@ -19,29 +21,38 @@ textarea, input {
 }
 
 input[type=checkbox] {
-	appearance: none;
-	
-	border: 2px solid black;
+	border: var(--border-style);
 }
 
-input[type=checkbox]:checked {
-	content: 'X';
+/* 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. */
+	/* Source: https://moderncss.dev/pure-css-custom-styled-radio-buttons/#step-4-the-checked-state */
+	/* Which references this link: https://dev.to/alvaromontoro/comment/1214h */
+	box-shadow: inset 1em 1em var(--main-font-color);
+}
+
+input[type="checkbox"]:focus {
+	border: var(--border-focus-style);
+}
+
+input[type="checkbox"]:disabled {
+	color: var(--control-disabled);
 }
 
-/*Override the default radio button*/
 input[type=radio] {
-	appearance: none;
+	border: var(--border-style);
+}
 
-	border-radius: 50%;
-	border: 2px solid var(--main-bg-color);
-	transition: 0.2s all linear;
+/* Inner circle to indicate a checked radio button */
+input[type="radio"]::before {
+	box-shadow: inset 1rem 1rem var(--main-font-color);
 }
 
 input[type=radio]:checked {
-	background-color: black;
-	border: 2px solid var(--main-bg-color);
+	background-color: var(--main-bg-color);
+	border: var(--border-focus-style);
 }
-/*End Override the default radio button*/
 
 input[type=button] {
 	border: var(--border-style);