diff --git a/src/pages/settings/panes/Appearance.tsx b/src/pages/settings/panes/Appearance.tsx
index e293fe8e..9cf9ef9c 100644
--- a/src/pages/settings/panes/Appearance.tsx
+++ b/src/pages/settings/panes/Appearance.tsx
@@ -372,7 +372,7 @@ export function Component(props: Props) {
                                     }
                                 />
                             </div>
-                            <span>{x}</span>
+                            <span style={`color: ${getContrastingColour(theme[x])}`}>{x}</span>
                             <div className={styles.override}>
                                 <div
                                     className={styles.picker}
@@ -445,3 +445,12 @@ export const Appearance = connectState(Component, (state) => {
         settings: state.settings,
     };
 });
+
+function getContrastingColour(hex: string){
+    hex = hex.replace("#", "");
+    const r = parseInt(hex.substr(0,2),16);
+    const g = parseInt(hex.substr(2,2),16);
+    const b = parseInt(hex.substr(4,2),16);
+    const cc = ((r*299)+(g*587)+(b*114))/1000;
+    return (cc >= 128) ? 'black' : 'white';
+}
diff --git a/src/pages/settings/panes/Panes.module.scss b/src/pages/settings/panes/Panes.module.scss
index 9036e9fb..3dc66c45 100644
--- a/src/pages/settings/panes/Panes.module.scss
+++ b/src/pages/settings/panes/Panes.module.scss
@@ -296,11 +296,9 @@
                 margin-bottom: 8px;
                 text-transform: capitalize;
 
-                color: transparent;
                 background: inherit;
                 background-clip: text;
                 -webkit-background-clip: text;
-                filter: sepia(1) invert(1) contrast(9) grayscale(1);
             }
 
             .override {