diff --git a/src/components/app/Page.svelte b/src/components/app/Page.svelte
index 802799316..4b62aa109 100644
--- a/src/components/app/Page.svelte
+++ b/src/components/app/Page.svelte
@@ -28,7 +28,7 @@
             : '';
         document.body.style.color = $fullscreen.on
             ? $fullscreen.background instanceof Color
-                ? $fullscreen.background.complement().toCSS()
+                ? $fullscreen.background.contrasting().toCSS()
                 : ''
             : '';
     }
diff --git a/src/components/output/StageView.svelte b/src/components/output/StageView.svelte
index fb246babe..a9d167038 100644
--- a/src/components/output/StageView.svelte
+++ b/src/components/output/StageView.svelte
@@ -332,7 +332,7 @@
         style:background={background ? stage.back.toCSS() : null}
         style:color={getColorCSS(stage.getFirstRestPose(), stage.pose)}
         style:opacity={getOpacityCSS(stage.getFirstRestPose(), stage.pose)}
-        style:--grid-color={stage.back.complement().toCSS()}
+        style:--grid-color={stage.back.contrasting().toCSS()}
         bind:this={view}
     >
         <!-- Render the stage -->
diff --git a/src/components/project/TileView.svelte b/src/components/project/TileView.svelte
index cc8ad590c..45ef52ae5 100644
--- a/src/components/project/TileView.svelte
+++ b/src/components/project/TileView.svelte
@@ -48,7 +48,7 @@
     onMount(() => (mounted = true));
 
     $: foreground =
-        background instanceof Color ? background.complement().toCSS() : null;
+        background instanceof Color ? background.contrasting().toCSS() : null;
 
     const dispatch = createEventDispatcher();
 
diff --git a/src/components/widgets/Button.svelte b/src/components/widgets/Button.svelte
index 7eddc35e5..022a6fc8a 100644
--- a/src/components/widgets/Button.svelte
+++ b/src/components/widgets/Button.svelte
@@ -135,6 +135,7 @@
     }
 
     .background {
+        color: var(--wordplay-foreground);
         background: var(--wordplay-alternating-color);
     }
 
diff --git a/src/output/Color.ts b/src/output/Color.ts
index def31815e..562d0160a 100644
--- a/src/output/Color.ts
+++ b/src/output/Color.ts
@@ -37,12 +37,12 @@ export default class Color extends Valued {
         this.hue = h;
     }
 
-    complement() {
+    contrasting() {
         return new Color(
             this.value,
-            new Decimal(1).sub(this.lightness),
-            this.chroma,
-            new Decimal(180).add(this.hue),
+            new Decimal(this.lightness.greaterThan(0.5) ? 0 : 1),
+            new Decimal(100),
+            new Decimal(0),
         );
     }