diff --git a/app/assets/stylesheets/admin/machine_learning/setting.scss b/app/assets/stylesheets/admin/machine_learning/setting.scss
index 4bd989cfb..81b243d0c 100644
--- a/app/assets/stylesheets/admin/machine_learning/setting.scss
+++ b/app/assets/stylesheets/admin/machine_learning/setting.scss
@@ -1,8 +1,7 @@
 .admin .machine-learning-setting {
 
   .card-divider {
-    background: $primary-color;
-    color: color-pick-contrast($primary-color);
+    @include background-with-text-contrast($primary-color);
 
     h3 {
       margin-top: 0;
diff --git a/app/assets/stylesheets/admin/menu.scss b/app/assets/stylesheets/admin/menu.scss
index da89b804a..d458fe9f4 100644
--- a/app/assets/stylesheets/admin/menu.scss
+++ b/app/assets/stylesheets/admin/menu.scss
@@ -1,8 +1,7 @@
 .admin-sidebar {
-  background: $sidebar;
+  @include background-with-text-contrast($sidebar);
   background: linear-gradient(to bottom, $sidebar 0%, #488fb5 100%);
   border-right: 1px solid $border;
-  color: color-pick-contrast($sidebar);
 
   ul {
     list-style-type: none;
diff --git a/app/assets/stylesheets/budgets/phases.scss b/app/assets/stylesheets/budgets/phases.scss
index 8cb48372b..4a2e2af77 100644
--- a/app/assets/stylesheets/budgets/phases.scss
+++ b/app/assets/stylesheets/budgets/phases.scss
@@ -87,8 +87,7 @@
 
       &[aria-selected="true"],
       &.is-active {
-        background: $dark;
-        color: color-pick-contrast($dark);
+        @include background-with-text-contrast($dark);
         font-weight: normal;
       }
 
@@ -99,8 +98,7 @@
     }
 
     &.current-phase-tab a {
-      background: $brand-secondary;
-      color: color-pick-contrast($brand-secondary);
+      @include background-with-text-contrast($brand-secondary);
       padding-top: $line-height / 2;
 
       &:hover {
diff --git a/app/assets/stylesheets/dashboard.scss b/app/assets/stylesheets/dashboard.scss
index 9c73a4df7..a42f5047a 100644
--- a/app/assets/stylesheets/dashboard.scss
+++ b/app/assets/stylesheets/dashboard.scss
@@ -458,8 +458,7 @@
   max-width: rem-calc(600);
 
   .mail-header {
-    background: $pdf-primary;
-    color: color-pick-contrast($pdf-primary);
+    @include background-with-text-contrast($pdf-primary);
     padding: $line-height * 2;
 
     img {
@@ -513,8 +512,7 @@
 .dashboard-poster-preview,
 .dashboard-poster-pdf {
   .poster-header {
-    background: $pdf-primary;
-    color: color-pick-contrast($pdf-primary);
+    @include background-with-text-contrast($pdf-primary);
 
     h1 {
       text-align: left;
diff --git a/app/assets/stylesheets/layout.scss b/app/assets/stylesheets/layout.scss
index 5441e0cfc..d745e38f6 100644
--- a/app/assets/stylesheets/layout.scss
+++ b/app/assets/stylesheets/layout.scss
@@ -696,8 +696,7 @@ body > header,
 }
 
 .top-links {
-  background: $dark;
-  color: color-pick-contrast($dark);
+  @include background-with-text-contrast($dark);
   display: flex;
   flex-wrap: wrap;
   font-size: $small-font-size;
@@ -808,10 +807,9 @@ body > header,
     padding-bottom: 0;
 
     button {
-      background: $border;
+      @include background-with-text-contrast($border);
       border: 1px solid #ccc;
       border-left: 0;
-      color: color-pick-contrast($border);
       height: $line-height * 1.5;
       line-height: $line-height * 1.5;
       padding-top: 0;
@@ -976,10 +974,9 @@ footer {
 }
 
 .auth-image {
-  background-color: $brand;
+  @include background-with-text-contrast($brand);
   background-repeat: no-repeat;
   background-size: cover;
-  color: color-pick-contrast($brand);
 
   @include breakpoint(medium) {
     min-height: $line-height * 42;
diff --git a/app/assets/stylesheets/milestones.scss b/app/assets/stylesheets/milestones.scss
index cd3f30cdf..addc2d117 100644
--- a/app/assets/stylesheets/milestones.scss
+++ b/app/assets/stylesheets/milestones.scss
@@ -118,9 +118,8 @@ $progress-bar-color:      #fea230;
 }
 
 .milestone-status {
-  background: $budget;
+  @include background-with-text-contrast($budget);
   border-radius: rem-calc(4);
-  color: color-pick-contrast($budget);
   display: inline-block;
   margin-top: $line-height / 6;
   padding: $line-height / 4 $line-height / 2;
diff --git a/app/assets/stylesheets/mixins/colors.scss b/app/assets/stylesheets/mixins/colors.scss
index 17c22874b..6bd835fb8 100644
--- a/app/assets/stylesheets/mixins/colors.scss
+++ b/app/assets/stylesheets/mixins/colors.scss
@@ -1,6 +1,10 @@
-@mixin brand-background($color: $brand, $invert-selection: true) {
+@mixin background-with-text-contrast($color) {
   background-color: $color;
   color: color-pick-contrast($color);
+}
+
+@mixin brand-background($color: $brand, $invert-selection: true) {
+  @include background-with-text-contrast($color);
 
   @if $invert-selection {
     @include inverted-selection;
diff --git a/app/assets/stylesheets/participation.scss b/app/assets/stylesheets/participation.scss
index 1b6401193..d7833a58a 100644
--- a/app/assets/stylesheets/participation.scss
+++ b/app/assets/stylesheets/participation.scss
@@ -657,8 +657,7 @@
     }
 
     .button-support {
-      background: $budget;
-      color: color-pick-contrast($budget);
+      @include background-with-text-contrast($budget);
       font-size: $base-font-size;
       font-weight: bold;
 
@@ -1483,8 +1482,7 @@
   cursor: pointer;
 
   &:hover {
-    background: $dark;
-    color: color-pick-contrast($dark);
+    @include background-with-text-contrast($dark);
     text-decoration: none;
   }
 }