diff --git a/gtk/theme/HighContrast/_common.scss b/gtk/theme/HighContrast/_common.scss
index 3f3ea7913e..1f7c6e83ff 100644
--- a/gtk/theme/HighContrast/_common.scss
+++ b/gtk/theme/HighContrast/_common.scss
@@ -2142,6 +2142,8 @@ GtkColorSwatch {
   box-shadow: inset 0 1px 1px transparentize(black, 0.8);
 
   &.color-light {
+    color: black;
+    outline-color: transparentize(black, 0.7);
     &:hover {
       background-image: linear-gradient(to bottom,
                                         transparentize(white, 1) 40%,
@@ -2150,6 +2152,8 @@ GtkColorSwatch {
     }
   }
   &.color-dark {
+    color: white;
+    outline-color: transparentize(white, 0.5);
     &:hover {
        background-image: linear-gradient(to bottom,
                                         transparentize(white, 1) 40%,
diff --git a/gtk/theme/HighContrast/gtk.css b/gtk/theme/HighContrast/gtk.css
index 2cd4482e52..b919857f89 100644
--- a/gtk/theme/HighContrast/gtk.css
+++ b/gtk/theme/HighContrast/gtk.css
@@ -2427,14 +2427,20 @@ GtkInfoBar {
 GtkColorSwatch {
   border: 1px solid rgba(0, 0, 0, 0.3);
   box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.2); }
-  GtkColorSwatch.color-light:hover {
-    background-image: linear-gradient(to bottom, rgba(255, 255, 255, 0) 40%, rgba(255, 255, 255, 0.4)); }
-    GtkColorSwatch.color-light:hover:backdrop {
-      background-image: none; }
-  GtkColorSwatch.color-dark:hover {
-    background-image: linear-gradient(to bottom, rgba(255, 255, 255, 0) 40%, rgba(255, 255, 255, 0.2)); }
-    GtkColorSwatch.color-dark:hover:backdrop {
-      background-image: none; }
+  GtkColorSwatch.color-light {
+    color: black;
+    outline-color: rgba(0, 0, 0, 0.3); }
+    GtkColorSwatch.color-light:hover {
+      background-image: linear-gradient(to bottom, rgba(255, 255, 255, 0) 40%, rgba(255, 255, 255, 0.4)); }
+      GtkColorSwatch.color-light:hover:backdrop {
+        background-image: none; }
+  GtkColorSwatch.color-dark {
+    color: white;
+    outline-color: rgba(255, 255, 255, 0.5); }
+    GtkColorSwatch.color-dark:hover {
+      background-image: linear-gradient(to bottom, rgba(255, 255, 255, 0) 40%, rgba(255, 255, 255, 0.2)); }
+      GtkColorSwatch.color-dark:hover:backdrop {
+        background-image: none; }
   GtkColorSwatch:hover {
     border-color: rgba(0, 0, 0, 0.5); }
   GtkColorSwatch:backdrop {