Automatically invert selection based on contrast

So now inverting the selection for brand-secondary backgrounds will
depend on the value of brand-secondary.

app/assets/stylesheets/layout.scss

@@ -125,7 +125,7 @@ button,
 
 .button {
   @extend %button;
-  @include inverted-selection;
+  @include inverted-selection($brand);
   background: $brand;
 
   &.medium {

app/assets/stylesheets/mixins/buttons.scss

@@ -19,7 +19,7 @@
 
 @mixin regular-button($color: $brand) {
   @include button($background: $color);
-  @include inverted-selection;
+  @include inverted-selection($color);
   @include base-button;
 }
 

app/assets/stylesheets/mixins/colors.scss

@@ -1,14 +1,14 @@
-@mixin background-with-text-contrast($color) {
+@mixin background-with-text-contrast($color, $check-invert-selection: true) {
   background-color: $color;
   color: color-pick-contrast($color);
+
+  @if $check-invert-selection {
+    @include inverted-selection($color);
+  }
 }
 
-@mixin brand-background($color: $brand, $invert-selection: true) {
+@mixin brand-background($color: $brand) {
   @include background-with-text-contrast($color);
-
-  @if $invert-selection {
-    @include inverted-selection;
-  }
 }
 
 @mixin brand-text {
@@ -25,16 +25,17 @@
 
   &::selection,
   *::selection {
-    @include brand-background($invert-selection: false);
+    @include background-with-text-contrast($brand, $check-invert-selection: false);
   }
 }
 
-@mixin inverted-selection {
-
-  &::selection,
-  *::selection {
-    background-color: rgba(color-pick-contrast($brand), 0.99);
-    color: $brand;
+@mixin inverted-selection($background-color) {
+  @if color-contrast($background-color, $brand) < 4.5 {
+    &::selection,
+    *::selection {
+      background-color: rgba(color-pick-contrast($brand), 0.99);
+      color: $brand;
+    }
   }
 }