diff --git a/app/assets/stylesheets/layout.scss b/app/assets/stylesheets/layout.scss
index 28c166cd8..c1f11ff35 100644
--- a/app/assets/stylesheets/layout.scss
+++ b/app/assets/stylesheets/layout.scss
@@ -30,7 +30,7 @@
 // -----------------
 
 ::selection {
-  @include brand-background;
+  @include brand-background($invert-selection: false);
 }
 
 html,
@@ -82,6 +82,7 @@ a {
 
 .button {
   @extend %button;
+  @include inverted-selection;
   background: $brand;
 
   &.warning,
diff --git a/app/assets/stylesheets/mixins/buttons.scss b/app/assets/stylesheets/mixins/buttons.scss
index 3d6cc984c..83c7fc394 100644
--- a/app/assets/stylesheets/mixins/buttons.scss
+++ b/app/assets/stylesheets/mixins/buttons.scss
@@ -9,6 +9,7 @@
 
 @mixin regular-button($color: $brand) {
   @include button($background: $color);
+  @include inverted-selection;
   @extend %button;
 }
 
diff --git a/app/assets/stylesheets/mixins/colors.scss b/app/assets/stylesheets/mixins/colors.scss
index 52b39bac3..d65f555cd 100644
--- a/app/assets/stylesheets/mixins/colors.scss
+++ b/app/assets/stylesheets/mixins/colors.scss
@@ -1,6 +1,19 @@
-@mixin brand-background {
+@mixin brand-background($invert-selection: true) {
   background-color: $brand;
   color: $white;
+
+  @if $invert-selection {
+    @include inverted-selection;
+  }
+}
+
+@mixin inverted-selection {
+
+  &::selection,
+  *::selection {
+    background-color: rgba($white, 0.99);
+    color: $brand;
+  }
 }
 
 %brand-background {