diff --git a/assets/css/buttons.scss b/assets/css/buttons.scss
index 0c119f7..9830e13 100644
--- a/assets/css/buttons.scss
+++ b/assets/css/buttons.scss
@@ -18,7 +18,7 @@ a.button {
   border-radius: 8;
   border: 1px solid var(--accent);
   background: var(--accent);
-  color: var(--background);
+  color: var(--accent-contrast-color);
   font: inherit;
   font-weight: bold;
   appearance: none;
diff --git a/assets/css/logo.scss b/assets/css/logo.scss
index d455cc7..2969041 100644
--- a/assets/css/logo.scss
+++ b/assets/css/logo.scss
@@ -3,6 +3,6 @@
   align-items: center;
   text-decoration: none;
   background: var(--accent);
-  color: black;
+  color: color-mix(in srgb, var(--accent), var(--accent-contrast-color) 90%);;
   padding: 5px 10px;
 }
diff --git a/assets/css/main.scss b/assets/css/main.scss
index 3e2f581..fc24a7e 100644
--- a/assets/css/main.scss
+++ b/assets/css/main.scss
@@ -110,7 +110,7 @@ figure {
     padding: 5px 10px;
     margin-top: 5px;
     background: var(--accent);
-    color: var(--background);
+    color: var(--accent-contrast-color);
     /* opacity: .8; */
 
     &.left {
@@ -291,7 +291,7 @@ ol {
 
 mark {
   background: var(--accent);
-  color: var(--background);
+  color: var(--accent-contrast-color);
 }
 
 .container {
diff --git a/assets/css/variables.scss b/assets/css/variables.scss
index 43fd443..70e44ad 100644
--- a/assets/css/variables.scss
+++ b/assets/css/variables.scss
@@ -1,6 +1,7 @@
 :root {
   /* COLOR VARIABLES */
   --background: color-mix(in srgb, var(--accent) 2%, #1D1E28 98%);
+  --accent-contrast-color: black;
   --color: white;
   --border-color: rgba(255, 255, 255, .1);