diff --git a/app/assets/stylesheets/_consul_settings.scss b/app/assets/stylesheets/_consul_settings.scss
index c29f86bf7..fe190497a 100644
--- a/app/assets/stylesheets/_consul_settings.scss
+++ b/app/assets/stylesheets/_consul_settings.scss
@@ -43,6 +43,7 @@ $small-font-size: rem-calc(14) !default;
 $abbr-underline: none !default;
 
 $orbit-bullet-diameter: 0.8rem !default;
+$orbit-caption-background: #eee;
 
 $show-header-for-stacked: true !default;
 
@@ -123,6 +124,7 @@ $off-screen-left: -1000rem !default;
 
 $sdg-icon-min-width: 45px !default;
 
+$sdg-text: #fff;
 $sdg-colors: (
   1: #e5243b,
   2: #dda63a,
diff --git a/app/assets/stylesheets/admin.scss b/app/assets/stylesheets/admin.scss
index 0bfce2b43..01a7d0dcc 100644
--- a/app/assets/stylesheets/admin.scss
+++ b/app/assets/stylesheets/admin.scss
@@ -21,7 +21,7 @@ $admin-border:   2px solid $admin-border-color;
 $admin-color:    #245b80;
 $admin-text:     #434d54;
 
-$sidebar:        #245b80;
+$sidebar:        $admin-color;
 $sidebar-hover:  #25597c;
 $sidebar-active: #f4fcd0;
 
@@ -840,7 +840,7 @@ table {
 .fullscreen {
 
   .fullscreen-container {
-    color: $white;
+    color: color-pick-contrast($admin-color);
 
     a {
       line-height: 3rem;
diff --git a/app/assets/stylesheets/admin/machine_learning/setting.scss b/app/assets/stylesheets/admin/machine_learning/setting.scss
index 3bf902365..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: $white;
+    @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 a626b625a..d458fe9f4 100644
--- a/app/assets/stylesheets/admin/menu.scss
+++ b/app/assets/stylesheets/admin/menu.scss
@@ -1,8 +1,7 @@
 .admin-sidebar {
-  background: $sidebar;
-  background: linear-gradient(to bottom, #245b80 0%, #488fb5 100%);
+  @include background-with-text-contrast($sidebar);
+  background: linear-gradient(to bottom, $sidebar 0%, #488fb5 100%);
   border-right: 1px solid $border;
-  color: $white;
 
   ul {
     list-style-type: none;
diff --git a/app/assets/stylesheets/budgets/phases.scss b/app/assets/stylesheets/budgets/phases.scss
index f9bd55892..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: $white;
+        @include background-with-text-contrast($dark);
         font-weight: normal;
       }
 
@@ -99,8 +98,7 @@
     }
 
     &.current-phase-tab a {
-      background: $brand-secondary;
-      color: $white;
+      @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 57a4c41d4..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: #fff;
+    @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: #fff;
+    @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 6152d0bcc..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: $white;
+  @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: $text;
       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: $white;
 
   @include breakpoint(medium) {
     min-height: $line-height * 42;
diff --git a/app/assets/stylesheets/layout/locale_switcher.scss b/app/assets/stylesheets/layout/locale_switcher.scss
index afbf2e510..5b2bc8076 100644
--- a/app/assets/stylesheets/layout/locale_switcher.scss
+++ b/app/assets/stylesheets/layout/locale_switcher.scss
@@ -29,7 +29,7 @@
       background: #001d33;
       border: 0;
       border-radius: rem-calc(4);
-      color: #fff;
+      color: color-pick-contrast(#001d33);
       font-size: $small-font-size;
       height: $line-height;
       margin-bottom: 0;
diff --git a/app/assets/stylesheets/milestones.scss b/app/assets/stylesheets/milestones.scss
index ba60057de..addc2d117 100644
--- a/app/assets/stylesheets/milestones.scss
+++ b/app/assets/stylesheets/milestones.scss
@@ -23,7 +23,7 @@ $progress-bar-color:      #fea230;
     }
 
     .progress-meter-text {
-      color: #000;
+      color: color-pick-contrast($progress-bar-background);
       right: 12px;
       text-align: right;
       transform: translate(0%, -50%);
@@ -118,9 +118,8 @@ $progress-bar-color:      #fea230;
 }
 
 .milestone-status {
-  background: $budget;
+  @include background-with-text-contrast($budget);
   border-radius: rem-calc(4);
-  color: #fff;
   display: inline-block;
   margin-top: $line-height / 6;
   padding: $line-height / 4 $line-height / 2;
diff --git a/app/assets/stylesheets/mixins/buttons.scss b/app/assets/stylesheets/mixins/buttons.scss
index b8b6010ff..bc494b083 100644
--- a/app/assets/stylesheets/mixins/buttons.scss
+++ b/app/assets/stylesheets/mixins/buttons.scss
@@ -57,7 +57,7 @@
   position: relative;
 
   &::after {
-    background: $white;
+    background: color-pick-contrast($primary-color);
     border-radius: 100%;
     content: "";
     display: block;
diff --git a/app/assets/stylesheets/mixins/colors.scss b/app/assets/stylesheets/mixins/colors.scss
index 2d54e5214..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: $white;
+  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;
@@ -29,7 +33,7 @@
 
   &::selection,
   *::selection {
-    background-color: rgba($white, 0.99);
+    background-color: rgba(color-pick-contrast($brand), 0.99);
     color: $brand;
   }
 }
diff --git a/app/assets/stylesheets/mixins/tags.scss b/app/assets/stylesheets/mixins/tags.scss
index 285eaf55d..47de272a2 100644
--- a/app/assets/stylesheets/mixins/tags.scss
+++ b/app/assets/stylesheets/mixins/tags.scss
@@ -16,7 +16,7 @@
 %tag {
   background: #ececec;
   border-radius: rem-calc(6);
-  color: $text;
+  color: color-pick-contrast(#ececec);
   display: inline-block;
   font-size: $small-font-size;
   margin-bottom: $line-height / 3;
diff --git a/app/assets/stylesheets/participation.scss b/app/assets/stylesheets/participation.scss
index 0a7aa2a08..d7833a58a 100644
--- a/app/assets/stylesheets/participation.scss
+++ b/app/assets/stylesheets/participation.scss
@@ -657,8 +657,7 @@
     }
 
     .button-support {
-      background: $budget;
-      color: #fff;
+      @include background-with-text-contrast($budget);
       font-size: $base-font-size;
       font-weight: bold;
 
@@ -781,7 +780,7 @@
     width: rem-calc(36);
 
     &::before {
-      color: $text;
+      color: color-pick-contrast(#eee);
       font-family: "icons";
     }
   }
@@ -1461,11 +1460,6 @@
   position: relative;
 }
 
-.orbit-caption {
-  background: #eee;
-  color: $text;
-}
-
 .orbit-next,
 .orbit-previous {
   background: rgba(34, 34, 34, 0.25);
@@ -1488,8 +1482,7 @@
   cursor: pointer;
 
   &:hover {
-    background: $dark;
-    color: #fff;
+    @include background-with-text-contrast($dark);
     text-decoration: none;
   }
 }
@@ -1640,7 +1633,7 @@
     &.answered {
       background: #f4f8ec;
       border: 2px solid #92ba48;
-      color: $text;
+      color: color-pick-contrast(#f4f8ec);
       position: relative;
 
       &::after {
diff --git a/app/assets/stylesheets/sdg/goals/show.scss b/app/assets/stylesheets/sdg/goals/show.scss
index 093572281..0492d0ced 100644
--- a/app/assets/stylesheets/sdg/goals/show.scss
+++ b/app/assets/stylesheets/sdg/goals/show.scss
@@ -4,7 +4,7 @@
 
     > header {
       align-items: center;
-      color: #fff;
+      color: $sdg-text;
       display: flex;
       margin: $line-height / 2 0;
       text-shadow: 0 0 1px $black;
diff --git a/app/assets/stylesheets/sdg/related_list_selector.scss b/app/assets/stylesheets/sdg/related_list_selector.scss
index 15632a19c..08f3a2438 100644
--- a/app/assets/stylesheets/sdg/related_list_selector.scss
+++ b/app/assets/stylesheets/sdg/related_list_selector.scss
@@ -6,7 +6,7 @@
   }
 
   .amsify-suggestags-area .amsify-select-tag {
-    color: $white;
+    color: $sdg-text;
 
     @each $code, $color in $sdg-colors {
       &[data-val^="#{$code}"] {
@@ -72,7 +72,7 @@
   }
 
   .remove-tag {
-    color: $white;
+    color: $sdg-text;
   }
 
   h3 {
diff --git a/app/assets/stylesheets/sdg/tag_list.scss b/app/assets/stylesheets/sdg/tag_list.scss
index 2a0018a1f..52a613382 100644
--- a/app/assets/stylesheets/sdg/tag_list.scss
+++ b/app/assets/stylesheets/sdg/tag_list.scss
@@ -13,7 +13,7 @@
 
     a:not(.more-targets),
     span {
-      color: $white;
+      color: $sdg-text;
     }
 
     @each $code, $color in $sdg-colors {
diff --git a/app/views/dashboard/mailing/index.html.erb b/app/views/dashboard/mailing/index.html.erb
index bf1f01fb9..713f85935 100644
--- a/app/views/dashboard/mailing/index.html.erb
+++ b/app/views/dashboard/mailing/index.html.erb
@@ -1,6 +1,6 @@
 <% content_for :action_title, t("dashboard.mailing.index.title") %>
 <div class="row expanded">
-  <div class="small-12 medium-9 dashboard-mail-preview column dashboard-mail-preview">
+  <div class="small-12 medium-9 column dashboard-mail-preview">
     <div class="mail-header text-left">
       <%= image_tag "quote_before_white.png" %>
       <h1 class="inline"><%= proposal.title %></h1>