diff --git a/app/assets/stylesheets/_consul_settings.scss b/app/assets/stylesheets/_consul_settings.scss
index 3c0ba8981..e1c679e4d 100644
--- a/app/assets/stylesheets/_consul_settings.scss
+++ b/app/assets/stylesheets/_consul_settings.scss
@@ -14,6 +14,7 @@
 $black: #222 !default;
 $white: #fdfdfd !default;
 
+$body-background: $white;
 $body-font-family: "Source Sans Pro", "Helvetica", "Arial", sans-serif !important !default;
 
 $closebutton-color: $black !default;
@@ -89,7 +90,11 @@ $highlight-soft:    #f3f8fd !default;
 $light:             #f5f7fa !default;
 $featured:          #ffdc5c !default;
 
+$footer:            #f1f1f1 !default;
 $footer-border:     #bfc1c3 !default;
+$main-header:       $brand !default;
+$subnavigation:     $body-background !default;
+$top-links:         $brand-secondary !default;
 
 $success-bg:        #dff0d8 !default;
 $success-border:    #d6e9c6 !default;
diff --git a/app/assets/stylesheets/layout.scss b/app/assets/stylesheets/layout.scss
index 8cdf08793..6499ad178 100644
--- a/app/assets/stylesheets/layout.scss
+++ b/app/assets/stylesheets/layout.scss
@@ -547,7 +547,7 @@ body > header,
   }
 
   .top-bar {
-    @extend %brand-background;
+    @include background-with-text-contrast($main-header);
   }
 }
 
@@ -690,7 +690,7 @@ body > header,
 }
 
 .top-links {
-  @include background-with-text-contrast($brand-secondary);
+  @include background-with-text-contrast($top-links);
   display: flex;
   flex-wrap: wrap;
   font-size: $small-font-size;
@@ -734,6 +734,7 @@ body > header,
   flex-direction: column;
 
   @include breakpoint(medium) {
+    @include background-with-text-contrast($subnavigation);
     flex-direction: row;
     padding-bottom: 0;
 
@@ -909,7 +910,7 @@ footer {
 }
 
 .footer {
-  background: #f1f1f1;
+  @include background-with-text-contrast($footer);
   clear: both;
   margin-top: $line-height * 2;
   padding-bottom: $line-height;