AC-517 fixes `color-contrast` ignores across platform

cms/static/sass/_base.scss

@@ -44,10 +44,10 @@ body, input, button {
 a {
   @include transition(color $tmg-f2 ease-in-out 0s);
   text-decoration: none;
-  color: $blue;
+  color: $uxpl-blue-base;
 
   &:hover {
-    color: $orange-d1;
+    color: $uxpl-blue-hover-active;
   }
 }
 
@@ -84,7 +84,7 @@ h1 {
     position: relative;
     top: ($baseline/4);
     display: block;
-    color: $gray-l2;
+    color: $gray-d2;
   }
 }
 
@@ -293,14 +293,6 @@ p, ul, ol, dl {
         .button {
           padding: ($baseline/4) ($baseline/2) ($baseline/3) ($baseline/2);
         }
-
-        .new-button {
-
-        }
-
-        .view-button {
-
-        }
       }
     }
 
@@ -452,11 +444,11 @@ p, ul, ol, dl {
 
     .tip {
       @extend %t-copy-sub2;
+      @include text-align(right);
+      @include float(right);
       width: flex-grid(7, 12);
-      float: right;
       margin-top: ($baseline/2);
-      text-align: right;
-      color: $gray-l2;
+      color: $gray-d1;
     }
   }
 }
@@ -705,9 +697,10 @@ hr.divider {
       color: $white;
     }
 
-    &:hover {
+    &:hover,
+    &:active {
       top: 0;
-      background: $blue;
+      background: $uxpl-blue-base;
     }
   }
 

cms/static/sass/_build-v1.scss

@@ -81,3 +81,7 @@
 
 @import 'developer'; // used for any developer-created scss that needs further polish/refactoring
 @import 'shame';     // used for any bad-form/orphaned scss
+
+// +CodeMirror Overrides
+// ====================
+@import 'elements/codemirror-overrides';

cms/static/sass/elements/_codemirror-overrides.scss

+/*
+ * CodeMirror color contrast overrides
+ * (so we don't change the vendor file)
+ */
+
+.CodeMirror {
+    
+    .CodeMirror-linenumber.CodeMirror-gutter-elt {
+        color: $gray-d3 !important;
+    }
+}

cms/static/sass/elements/_controls.scss

@@ -62,22 +62,22 @@
 // blue primary button
 %btn-primary-blue {
   @extend %ui-btn-primary;
-  background: $blue;
-  border-color: $blue-s1;
+  background: $uxpl-blue-base;
+  border-color: $uxpl-blue-base;
   color: $white;
 
   &:hover, &:active {
-    background: $blue-l1;
-    border-color: $blue-l1;
+    background: $uxpl-blue-hover-active;
+    border-color: $uxpl-blue-hover-active;
   }
 
   &.current, &.active {
-    background: $blue-d1;
+    background: $uxpl-blue-hover-active;
+    border-color: $uxpl-blue-hover-active;
     color: $blue-l4;
-    border-color: $blue-d2;
 
     &:hover, &:active {
-      background: $blue-d1;
+      background: $uxpl-blue-hover-active;
     }
   }
 }
@@ -85,22 +85,22 @@
 // green primary button
 %btn-primary-green {
   @extend %ui-btn-primary;
-  background: $green;
-  border-color: $green;
+  background: $uxpl-green-base;
+  border-color: $uxpl-green-base;
   color: $white;
 
   &:hover, &:active {
-    background: $green-s1;
-    border-color: $green-s1;
+    background: $uxpl-green-hover-active;
+    border-color: $uxpl-green-hover-active;
   }
 
   &.current, &.active {
-    background: $green-d1;
-    color: $green-l4;
-    border-color: $green-d2;
+    background: $uxpl-green-hover-active;
+    color: $white;
+    border-color: $uxpl-green-hover-active;
 
     &:hover, &:active {
-      background: $green-d1;
+      background: $uxpl-green-hover-active;
     }
   }
 }
@@ -132,21 +132,17 @@
 %btn-secondary-blue {
   @extend %ui-btn-secondary;
   border-color: $blue-l3;
-  color: $blue;
+  color: $uxpl-blue-base;
 
   &:hover, &:active {
     background: $blue-l4;
-    color: $blue-s2;
+    color: $uxpl-blue-hover-active;
   }
 
   &.current, &.active {
     border-color: $blue-l3;
     background: $blue-l3;
-    color: $blue-d1;
-
-    &:hover, &:active {
-
-    }
+    color: $uxpl-blue-base;
   }
 }
 
@@ -235,7 +231,7 @@
 
   &:hover, &:active {
     background: $white;
-    color: $blue-s1;
+    color: $uxpl-blue-hover-active;
   }
 
   &.current, &.active {
@@ -243,7 +239,7 @@
     color: $gray-d4;
 
     &:hover, &:active {
-      color: $blue-s1;
+      color: $uxpl-blue-hover-active;
     }
   }
 }
@@ -268,7 +264,7 @@
       color: $gray-l1;
 
       &:hover {
-        background-color: $blue;
+        background-color: $uxpl-blue-base;
         color: $gray-l6;
       }
 
@@ -320,7 +316,7 @@
   vertical-align: top;
 
   &:hover {
-    color: $blue;
+    color: $uxpl-blue-base;
   }
 
   .ui-toggle-expansion {
@@ -358,7 +354,7 @@
     // STATE: hover/active
     &:hover, &:active {
       @extend %ui-fake-link;
-      color: $ui-link-color-focus;
+      color: $uxpl-blue-base;
     }
   }
 
@@ -404,7 +400,7 @@
       position: absolute;
       top: -12px;
       left: -($baseline/4);
-      color: $blue-s1;
+      color: $blue-d1;
     }
   }
 

cms/static/sass/elements/_footer.scss

@@ -27,10 +27,10 @@
     }
 
     a {
-      color: $ui-link-color;
+      color: $uxpl-blue-base;
 
       &:hover, &:active {
-        color: $ui-link-color-focus;
+        color: $uxpl-blue-hover-active;
       }
     }
 

cms/static/sass/elements/_forms.scss

@@ -249,7 +249,7 @@ form {
         &:focus {
 
           + .tip {
-            color: $gray;
+            color: $gray-d1;
           }
         }
       }

cms/static/sass/elements/_header.scss

@@ -76,7 +76,7 @@
       color: $gray-d1;
 
       &:hover {
-        color: $blue-s1;
+        color: $uxpl-blue-hover-active;
       }
     }
   }
@@ -151,7 +151,8 @@
       overflow: hidden;
       white-space: nowrap;
       text-overflow: ellipsis;
-      opacity: 0.75;
+      opacity: 1.0;
+      color: $gray-d3;
     }
 
     .course-org {
@@ -172,10 +173,10 @@
     .course-link {
       @include transition(color $tmg-f2 ease-in-out 0s);
       display: block;
-      color: $gray-d1;
+      color: $gray-d3;
 
       &:hover {
-        color: $blue-s1;
+        color: $uxpl-blue-hover-active;
       }
     }
   }
@@ -398,10 +399,10 @@ body.course.view-team .nav-library-settings .title,
 body.course.view-team .nav-library-settings-team,
 
 {
-  color: $blue;
+  color: $uxpl-blue-base;
 
   a {
-    color: $blue;
+    color: $uxpl-blue-base;
     pointer-events: none;
   }
 }

cms/static/sass/elements/_layout.scss

@@ -261,7 +261,7 @@
       float: right;
       margin-top: ($baseline/2);
       text-align: right;
-      color: $gray-l2;
+      color: $gray-d1;
     }
   }
 }

cms/static/sass/elements/_modules.scss

@@ -26,13 +26,13 @@
       @extend %t-title8;
       @extend %t-strong;
       margin-bottom: ($baseline/4);
-      color: $gray-l2;
+      color: $gray-d2;
       text-transform: uppercase;
     }
 
     .meta {
       @extend %t-copy-sub2;
-      color: $gray-l1;
+      color: $gray-d2;
     }
   }
 }
@@ -110,7 +110,7 @@
       @extend %t-title5;
       @extend %t-strong;
       margin-bottom: ($baseline*0.75);
-      color: $green-d1;
+      color: $uxpl-green-base;
     }
 
     // add component - list of green buttons
@@ -131,16 +131,10 @@
         height: ($baseline*5);
         margin-bottom: ($baseline/2);
         box-shadow: 0 1px 1px $shadow, 0 1px 0 rgba(255, 255, 255, .4) inset;
-        border: 1px solid $green-d2;
         border-radius: ($baseline/4);
         padding: 0;
-        background-color: $green-l1;
         text-align: center;
-        color: $white;
-
-        &:hover {
-          background: $green-s1;
-        }
+        @extend %btn-primary-green;
 
         .name {
           @include box-sizing(border-box);

cms/static/sass/elements/_pagination.scss

@@ -69,7 +69,7 @@
     margin: 0 ($baseline*0.75);
     padding: ($baseline/4);
     text-align: center;
-    color: $gray;
+    color: $gray-d2;
   }
 
   .current-page {
@@ -82,7 +82,7 @@
     @extend %t-title4;
     @extend %t-regular;
     vertical-align: middle;
-    color: $gray-l2;
+    color: $gray;
   }
 
   .pagination-form {

cms/static/sass/elements/_sock.scss

@@ -31,7 +31,7 @@
       @extend %t-action4;
       background: $gray-l5;
       padding: ($baseline/2) $baseline;
-      color: $gray;
+      color: $gray-d2;
 
       .icon {
         @extend %t-icon6;
@@ -39,7 +39,7 @@
       }
 
       &:hover {
-        background: $blue;
+        background: $uxpl-blue-base;
         color: $white;
       }
     }

cms/static/sass/elements/_system-help.scss

@@ -220,7 +220,7 @@
   margin: 0 0 $baseline 0;
   border-bottom: 1px solid $gray-l4;
   padding: 0 0 $baseline 0;
-  color: $gray-l1;
+  color: $gray-d1;
 
   &:last-child {
     margin-bottom: 0;

cms/static/sass/elements/_xblocks.scss

@@ -167,7 +167,7 @@
       display: inline-block;
       vertical-align: top;
       width: flex-grid(9, 12);
-      color: $gray-l1;
+      color: $gray-d1;
 
       .count-current-shown,
       .count-total,

cms/static/sass/partials/_variables.scss

@@ -87,6 +87,12 @@ $blue-t1: rgba($blue, 0.25);
 $blue-t2: rgba($blue, 0.50);
 $blue-t3: rgba($blue, 0.75);
 
+$uxpl-blue-base: rgba(0, 116, 180, 1); // wcag2a compliant
+$uxpl-blue-hover-active: lighten($uxpl-blue-base, 7%); // wcag2a compliant
+
+$uxpl-green-base: rgba(0, 129, 0, 1); // wcag2a compliant
+$uxpl-green-hover-active: lighten($uxpl-green-base, 7%); // wcag2a compliant
+
 $pink: rgb(183, 37, 103); // #b72567;
 $pink-l1: tint($pink,20%);
 $pink-l2: tint($pink,40%);

cms/static/sass/views/_account.scss

@@ -148,7 +148,7 @@
             &:focus {
 
               + .tip {
-                color: $gray;
+                color: $gray-d1;
               }
             }
           }
@@ -173,7 +173,7 @@
             @include transition(color $tmg-f3 ease-in-out 0s);
             display: block;
             margin-top: ($baseline/4);
-            color: $gray-l3;
+            color: $gray-d1;
           }
         }
 
@@ -214,7 +214,7 @@
       margin: 0 0 $baseline 0;
       border-bottom: 1px solid $gray-l4;
       padding: 0 0 $baseline 0;
-      color: $gray-l1;
+      color: $gray-d1;
 
       &:last-child {
         margin-bottom: 0;

cms/static/sass/views/_certificates.scss

@@ -242,11 +242,11 @@
         @include transition(color, 0.15s, ease-in-out);
         display: block;
         margin-top: ($baseline/2);
-        color: $gray-l2;
+        color: $gray-d1;
       }
 
       .is-focused .tip {
-        color: $gray;
+        color: $gray-d2;
       }
 
 
@@ -325,7 +325,7 @@
 
           &:focus {
             + .tip {
-              color: $gray;
+              color: $gray-d2;
             }
           }
         }
@@ -588,7 +588,7 @@
       @include transition(color, 0.15s, ease-in-out);
       display: block;
       margin-top: ($baseline/4);
-      color: $gray-l3;
+      color: $gray-d1;
     }
 
     .field {
@@ -661,7 +661,7 @@
 
         &:focus {
           + .tip {
-            color: $gray;
+            color: $gray-d1;
           }
         }
       }

cms/static/sass/views/_container.scss

@@ -277,7 +277,7 @@
           @extend %t-copy-sub2;
           display: inline-block;
           margin: ($baseline/4) 0;
-          color: $gray-l2;
+          color: $gray-d1;
         }
       }
 

cms/static/sass/views/_dashboard.scss

@@ -300,7 +300,7 @@
       margin: 0 10px;
 
       &.active {
-        border-bottom: 4px solid $blue;
+        border-bottom: 4px solid $uxpl-blue-base;
       }
 
       &.active, &:hover {
@@ -310,7 +310,7 @@
       }
 
       a {
-        color: $blue;
+        color: $uxpl-blue-base;
         cursor: pointer;
         display: inline-block;
       }
@@ -492,7 +492,6 @@
       @extend %t-copy-sub1;
       @include transition(opacity $tmg-f1 ease-in-out 0);
       color: $gray;
-      opacity: 0.75;
 
       .metadata-item {
         display: inline-block;

cms/static/sass/views/_group-configuration.scss

@@ -269,11 +269,11 @@
           @include transition(color, 0.15s, ease-in-out);
           display: block;
           margin-top: ($baseline/4);
-          color: $gray-l3;
+          color: $gray-d1;
         }
 
         .is-focused .tip {
-          color: $gray;
+          color: $gray-d2;
         }
 
 
@@ -352,7 +352,7 @@
 
             &:focus {
               + .tip {
-                color: $gray;
+                color: $gray-d1;
               }
             }
           }

cms/static/sass/views/_settings.scss

@@ -104,7 +104,7 @@
         @include float(right);
         margin-top: ($baseline/2);
         @include text-align(right);
-        color: $gray-l2;
+        color: $gray-d1;
       }
     }
 
@@ -219,7 +219,7 @@
           margin: 0 0 ($baseline/4) 0;
 
           &.is-focused {
-            color: $blue;
+            color: $uxpl-blue-base;
           }
         }
 
@@ -242,7 +242,7 @@
           &:focus {
 
             + .tip {
-              color: $gray;
+              color: $gray-d1;
             }
           }
         }
@@ -398,9 +398,10 @@
             overflow: hidden;
             white-space: nowrap;
             text-overflow: ellipsis;
+            color: $uxpl-blue-base;
 
             &:hover {
-
+                color: $uxpl-blue-hover-active;
             }
           }
         }
@@ -546,7 +547,7 @@
           @extend %t-copy-sub2;
           display: block;
           margin-top: ($baseline/2);
-          color: $gray-l3;
+          color: $gray-d3;
         }
       }
 
@@ -562,7 +563,7 @@
 
         .action-upload-image {
           @extend %ui-btn-flat-outline;
-          float: right;
+          @include float(right);
           width: flex-grid(2,9);
           margin-top: ($baseline/4);
           padding: ($baseline/2) $baseline;
@@ -1039,7 +1040,7 @@
           }
 
           .tip {
-            color: $gray-l1;
+            color: $gray-d1;
           }
 
           input.error {

cms/static/sass/views/_textbooks.scss

@@ -44,10 +44,10 @@
           @extend %ui-fake-link;
 
           &:hover {
-            color: $blue;
+            color: $uxpl-blue-base;
 
             .ui-toggle-expansion {
-              color: $blue;
+              color: $uxpl-blue-base;
             }
           }
         }
@@ -212,7 +212,7 @@
             margin: 0 0 ($baseline/4) 0;
 
             &.is-focused {
-              color: $blue;
+              color: $uxpl-blue-base;
             }
           }
 
@@ -256,7 +256,7 @@
             &:focus {
 
               + .tip {
-                color: $gray;
+                color: $gray-d1;
               }
             }
           }
@@ -281,7 +281,7 @@
             @include transition(color, 0.15s, ease-in-out);
             display: block;
             margin-top: ($baseline/4);
-            color: $gray-l3;
+            color: $gray-d1;
           }
 
           &.error {

common/static/sass/_mixins-inherited.scss

@@ -147,13 +147,13 @@
   @include button;
   @include linear-gradient(top, rgba(255, 255, 255, .3), rgba(255, 255, 255, 0));
   box-shadow: 0 1px 0 rgba(255, 255, 255, .3) inset;
-  border: 1px solid $green-d1;
+  border: 1px solid $uxpl-green-base;
   border-radius: 3px;
-  background-color: $green;
+  background-color: $uxpl-green-base;
   color: $white;
 
   &:hover, &:focus {
-    background-color: $green-s1;
+    background-color: $uxpl-green-hover-active;
     color: $white;
   }
 
@@ -168,13 +168,13 @@
 @mixin blue-button {
   @include button;
   @include linear-gradient(top, rgba(255, 255, 255, .3), rgba(255, 255, 255, 0));
-  border: 1px solid $blue-d1;
+  border: 1px solid $uxpl-blue-base;
   border-radius: 3px;
-  background-color: $blue;
+  background-color: $uxpl-blue-base;
   color: $white;
 
   &:hover, &:focus, &:active {
-    background-color: $blue-s2;
+    background-color: $uxpl-blue-hover-active;
     color: $white;
   }
 

common/static/sass/_mixins.scss

@@ -261,14 +261,6 @@
   background: transparent;
   line-height: 1.5em;
   text-align: center;
-
-  &:hover, &:active, &:focus {
-
-  }
-
-  &.current, &.active {
-
-  }
 }
 
 %ui-btn-flat-outline {
@@ -277,14 +269,14 @@
   @extend %t-action4;
   text-align: center;
   border-radius: ($baseline/4);
-  border: 1px solid $blue-l2;
+  border: 1px solid $uxpl-blue-base;
   padding: 1px ($baseline/2) 2px ($baseline/2);
-  background-color: transparent;
-  color: $blue-l2;
+  background-color: $white;
+  color: $uxpl-blue-base;
 
   &:hover, &:focus {
-    border: 1px solid $blue;
-    background-color: $blue;
+    border: 1px solid $uxpl-blue-hover-active;
+    background-color: $uxpl-blue-hover-active;
     color: $white;
   }
 
@@ -320,7 +312,7 @@
   @extend %ui-btn-non;
 
   &:hover, &:focus {
-    background-color: $blue;
+    background-color: $uxpl-blue-base;
     color: $white;
   }
 }

common/test/acceptance/tests/lms/test_lms.py

@@ -169,7 +169,7 @@ class LoginFromCombinedPageTest(UniqueCourseTest):
         # Navigate to the login page
         self.login_page.visit()
         # Baseline screen-shots are different for chrome and firefox.
-        self.assertScreenshot('#login .login-providers', 'login-providers-{}'.format(self.browser.name))
+        self.assertScreenshot('#login .login-providers', 'login-providers-{}'.format(self.browser.name), .25)
 
         # Try to log in using "Dummy" provider
         self.login_page.click_third_party_dummy_provider()
@@ -217,7 +217,7 @@ class LoginFromCombinedPageTest(UniqueCourseTest):
             )
 
             # Baseline screen-shots are different for chrome and firefox.
-            self.assertScreenshot('#hinted-login-form', 'hinted-login-{}'.format(self.browser.name))
+            self.assertScreenshot('#hinted-login-form', 'hinted-login-{}'.format(self.browser.name), .25)
             self.login_page.click_third_party_dummy_provider()
 
             # We should now be redirected to the course page
@@ -354,7 +354,7 @@ class RegisterFromCombinedPageTest(UniqueCourseTest):
         # Navigate to the register page
         self.register_page.visit()
         # Baseline screen-shots are different for chrome and firefox.
-        self.assertScreenshot('#register .login-providers', 'register-providers-{}'.format(self.browser.name))
+        self.assertScreenshot('#register .login-providers', 'register-providers-{}'.format(self.browser.name), .25)
 
         # Try to authenticate using the "Dummy" provider
         self.register_page.click_third_party_dummy_provider()

common/test/acceptance/tests/lms/test_lms_instructor_dashboard.py

@@ -95,8 +95,7 @@ class BulkEmailTest(BaseInstructorDashboardTest):
         ])
         self.send_email_page.a11y_audit.config.set_rules({
             "ignore": [
-                'button-name',  # TinyMCE button is missing accessible text
-                'color-contrast',  # TODO: AC-491
+                'button-name',  # TODO: AC-491
             ]
         })
         self.send_email_page.a11y_audit.check_for_accessibility_errors()
@@ -1053,7 +1052,6 @@ class CertificatesTest(BaseInstructorDashboardTest):
             "ignore": [
                 'aria-valid-attr-value',  # TODO: AC-491
                 'checkboxgroup',  # TODO: AC-491
-                'color-contrast',  # TODO: AC-491
                 'duplicate-id',  # TODO: AC-491
                 'label',  # TODO: AC-491
                 'radiogroup',  # TODO: AC-491
@@ -1272,7 +1270,6 @@ class CertificateInvalidationTest(BaseInstructorDashboardTest):
             "ignore": [
                 'aria-valid-attr-value',  # TODO: AC-491
                 'checkboxgroup',  # TODO: AC-491
-                'color-contrast',  # TODO: AC-491
                 'duplicate-id',  # TODO: AC-491
                 'label',  # TODO: AC-491
                 'radiogroup',  # TODO: AC-491

common/test/acceptance/tests/lms/test_problem_types.py

@@ -252,7 +252,6 @@ class ProblemTypeTestMixin(object):
                 'aria-roles',  # TODO: AC-491
                 'checkboxgroup',  # TODO: AC-491
                 'radiogroup',  # TODO: AC-491
-                'color-contrast',  # TODO: AC-491
                 'section',  # TODO: AC-491
                 'label',  # TODO: AC-491
             ]
@@ -694,7 +693,6 @@ class CodeProblemTypeTest(ProblemTypeTestBase, ProblemTypeTestMixin):
         self.problem_page.a11y_audit.config.set_rules({
             'ignore': [
                 'section',  # TODO: AC-491
-                'color-contrast',  # TODO: AC-286
                 'label',  # TODO: AC-286
             ]
         })

common/test/acceptance/tests/studio/test_studio_library.py

@@ -656,7 +656,6 @@ class StudioLibraryA11yTest(StudioLibraryTest):
         # we will ignore this error in the test until we fix them.
         lib_page.a11y_audit.config.set_rules({
             "ignore": [
-                'color-contrast',  # TODO: AC-225
                 'link-href',  # TODO: AC-226
                 'nav-aria-label',  # TODO: AC-227
                 'icon-aria-hidden',  # TODO: AC-229

common/test/acceptance/tests/studio/test_studio_settings.py

@@ -503,7 +503,6 @@ class StudioSettingsA11yTest(StudioCourseTest):
         # we will ignore this error in the test until we fix them.
         self.settings_page.a11y_audit.config.set_rules({
             "ignore": [
-                'color-contrast',  # TODO: AC-225
                 'link-href',  # TODO: AC-226
                 'nav-aria-label',  # TODO: AC-227
                 'icon-aria-hidden',  # TODO: AC-229

common/test/acceptance/tests/studio/test_studio_textbooks.py

@@ -60,7 +60,6 @@ class TextbooksTest(StudioCourseTest):
 
         self.textbook_view_page.a11y_audit.config.set_rules({
             'ignore': [
-                'color-contrast',  # AC-500
                 'skip-link',  # AC-501
                 'link-href',  # AC-502
                 'section'  # AC-503

common/test/test-theme/cms/static/sass/partials/_variables.scss

@@ -87,6 +87,12 @@ $blue-t1: rgba($blue, 0.25);
 $blue-t2: rgba($blue, 0.50);
 $blue-t3: rgba($blue, 0.75);
 
+$uxpl-blue-base: rgba(0, 116, 180, 1); // wcag2a compliant
+$uxpl-blue-hover-active: lighten($uxpl-blue-base, 7%); // wcag2a compliant
+
+$uxpl-green-base: rgba(0, 129, 0, 1); // wcag2a compliant
+$uxpl-green-hover-active: lighten($uxpl-green-base, 7%); // wcag2a compliant
+
 $pink: rgb(183, 37, 103); // #b72567;
 $pink-l1: tint($pink,20%);
 $pink-l2: tint($pink,40%);

lms/static/js/certificates/views/certificate_bulk_whitelist.js

@@ -206,7 +206,7 @@
                 chooseFile: function(event) {
                     if (event && event.preventDefault) { event.preventDefault(); }
                     if (event.currentTarget.files.length === 1) {
-                        this.$el.find(DOM_SELECTORS.upload_csv_button).removeClass('disabled');
+                        this.$el.find(DOM_SELECTORS.upload_csv_button).attr('disabled', 'false');
                         this.$el.find(DOM_SELECTORS.browse_file).val(
                             event.currentTarget.value.substring(event.currentTarget.value.lastIndexOf("\\") + 1));
                     }

lms/static/js/certificates/views/certificate_whitelist.js

@@ -34,10 +34,10 @@
                     var template = this.loadTemplate('certificate-white-list');
                     this.$el.html(template({certificates: this.collection.models}));
                     if (!this.active_certificate || this.collection.isEmpty()){
-                        this.$("#generate-exception-certificates").addClass("is-disabled");
+                        this.$("#generate-exception-certificates").attr("disabled", "disabled");
                     }
                     else {
-                        this.$("#generate-exception-certificates").removeClass("is-disabled");
+                        this.$("#generate-exception-certificates").removeAttr("disabled");
                     }
                 },
 
@@ -107,4 +107,4 @@
             });
         }
     );
-}).call(this, define || RequireJS.define);
+}).call(this, define || RequireJS.define);
\ No newline at end of file

lms/static/js/spec/instructor_dashboard/certificates_exception_spec.js

@@ -204,7 +204,7 @@ define([
 
             it("verifies that Generate Exception Certificate button is disabled", function() {
                 expect(view.$el.find('table tbody tr').length).toBe(2);
-                expect(view.$el.find('#generate-exception-certificates').first()).not.toHaveClass('is-disabled');
+                expect(view.$el.find('#generate-exception-certificates').first()).not.toHaveAttr('disabled');
 
                 // Render the view with active_certificate set to false.
                 view = new CertificateWhiteListView({
@@ -214,7 +214,7 @@ define([
                 view.render();
 
                 // Verify that `Generate Exception Certificate` is disabled even when Collection is not empty.
-                expect(view.$el.find('#generate-exception-certificates').first()).toHaveClass('is-disabled');
+                expect(view.$el.find('#generate-exception-certificates').first()).toHaveAttr('disabled', 'disabled');
                 expect(view.$el.find('table tbody tr').length).toBe(2);
             });
 

lms/static/sass/course/_textbook.scss

@@ -53,11 +53,11 @@ div.book-wrapper {
         a {
           @include clearfix();
           padding: 0;
-          color: $link-color;
+          color: $uxpl-blue-base;
 
           &:hover, &:focus {
             background-color: transparent;
-            color: $link-hover;
+            color: $uxpl-blue-hover-active;
 
             .page-number {
               opacity: 1.0;

lms/static/sass/course/courseware/_courseware.scss

@@ -75,7 +75,7 @@ html.video-fullscreen {
       color: $gray;
     }
     a:active, a:hover {
-      color: $link-hover;
+      color: $uxpl-blue-base;
     }
 
     .license-label,
@@ -151,7 +151,7 @@ html.video-fullscreen {
       }
       button.gated-sequence {
         background: $transparent;
-        color: $blue-d1;
+        color: $uxpl-blue-base;
         border: none;
         box-shadow: none;
         @include text-align(left);
@@ -160,7 +160,7 @@ html.video-fullscreen {
 
         &:hover {
           background-color: transparent;
-          color: $link-hover;
+          color: $uxpl-blue-hover-active;
         }
       }
 
@@ -169,12 +169,12 @@ html.video-fullscreen {
         font-size: 1.3em;
       }
       .gated-sequence {
-        color: #147ABA;
+        color: $uxpl-blue-base;
         font-weight: 600;
         padding: ($baseline / 1.5) ($baseline / 4);
         a.start-timed-exam {
           cursor: pointer;
-          color: #147ABA;
+          color: $uxpl-blue-base;
           font-weight: 600;
           position: relative;
           top: ($baseline/10);
@@ -306,7 +306,7 @@ html.video-fullscreen {
         }
         &:last-child {
           > .practice-exam {
-            color: #147ABA;
+            color: $uxpl-blue-base;
           }
           border-bottom: none;
         }
@@ -663,3 +663,14 @@ section.self-assessment {
 }
 
 
+/*
+ * CodeMirror color contrast overrides
+ * (so we don't change the vendor file)
+ */
+
+.CodeMirror {
+    
+    .CodeMirror-linenumber.CodeMirror-gutter-elt {
+        color: $gray-d3 !important;
+    }
+}

lms/static/sass/course/instructor/_instructor_2.scss

@@ -33,7 +33,7 @@
 
   .file-download-link a {
     font-size: 15px;
-    color: $link-color;
+    color: $uxpl-blue-base;
     text-decoration: underline;
     padding: ($baseline/4);
   }
@@ -674,7 +674,7 @@
         // .add-field
 
         input[type="button"].add {
-          @include idashbutton($blue);
+          @include idashbutton($uxpl-blue-base);
           position: absolute;
           @include right($baseline);
         }
@@ -756,7 +756,7 @@
     }
   }
   .form-submit {
-    @include idashbutton($blue);
+    @include idashbutton($uxpl-blue-base);
     @include font-size(14);
     @include line-height(14);
     margin-right: ($baseline/2);
@@ -778,7 +778,7 @@
     }
 
     .action-create {
-      @include idashbutton($blue);
+      @include idashbutton($uxpl-blue-base);
       @extend %t-weight4;
       @include float(right);
       @include text-align(right);
@@ -803,7 +803,7 @@
 
     // specific message actions
     .message .action-create {
-      @include idashbutton($blue);
+      @include idashbutton($uxpl-blue-base);
     }
   }
 
@@ -979,7 +979,7 @@
     }
 
     .action-submit {
-      @include idashbutton($blue);
+      @include idashbutton($uxpl-blue-base);
       // needed to override very poor specificity and base rules for blue button
       @include font-size(14);
       margin-bottom: 0;
@@ -1126,7 +1126,7 @@
     }
 
     .cohorted-text {
-      color: $link-color;
+      color: $uxpl-blue-base;
     }
 
     .discussions-wrapper {
@@ -1427,7 +1427,7 @@ input[name="subject"] {
     color: #3c3c3c;
     line-height: 30px;
     .add{
-      @include button(simple, $blue);
+      @include button(simple, $uxpl-blue-base);
       @extend .button-reset;
       font-size: em(13);
       @include float(right);
@@ -1632,7 +1632,7 @@ input[name="subject"] {
     border-radius: 2px;
     input[type="button"]#update_coupon_button, input[type="button"]#add_coupon_button,
     input[type="button"]#set_course_button, input[type="button"]#lookup_regcode {
-      @include button(simple, $blue);
+      @include button(simple, $uxpl-blue-base);
       @extend .button-reset;
       display: block;
       height: auto;
@@ -1641,7 +1641,7 @@ input[name="subject"] {
       white-space: normal;
     }
     input[name="generate-registration-codes-csv"]{
-      @include button(simple, $blue);
+      @include button(simple, $uxpl-blue-base);
       @extend .button-reset;
     }
     .modal-form-error {
@@ -1782,7 +1782,7 @@ input[name="subject"] {
         h2 {
           font-size: 24px;
           font-weight: 100;
-          color: #1580b0;
+          color: $uxpl-blue-base;
           @include text-align(left);
         }
       }
@@ -1906,7 +1906,7 @@ input[name="subject"] {
     color: #3c3c3c;
     line-height: 30px;
     .add{
-      @include button(simple, $blue);
+      @include button(simple, $uxpl-blue-base);
       @extend .button-reset;
       font-size: em(13);
       @include float(right);
@@ -1925,7 +1925,7 @@ input[name="subject"] {
     color: #3C3C3C;
     line-height: 30px;
     .add{
-      @include button(simple, $blue);
+      @include button(simple, $uxpl-blue-base);
       @extend .button-reset;
       font-size: em(13);
     }
@@ -1948,7 +1948,7 @@ input[name="subject"] {
     color: #3C3C3C;
     line-height: 30px;
     .add{
-      @include button(simple, $blue);
+      @include button(simple, $uxpl-blue-base);
       @extend .button-reset;
       font-size: em(13);
     }
@@ -2135,8 +2135,8 @@ input[name="subject"] {
         &:focus {
           z-index: 2;
           color: #fff;
-          background-color: darken(#428bca, 6.5%);
-          border-color: darken(#428bca, 6.5%);
+          background-color: $uxpl-blue-base;
+          border-color: $uxpl-blue-base;
           cursor: default;
         }
       }
@@ -2302,7 +2302,7 @@ input[name="subject"] {
             color: $gray-d1;
 
             &:hover {
-              color: $blue;
+              color: $uxpl-blue-hover-active;
             }
           }
 
@@ -2361,21 +2361,20 @@ input[name="subject"] {
     display: inline;
     @include margin-left(-5px);
     span.browse {
-      @include button(simple, $blue);
+      @include button(simple, $uxpl-blue-base);
       @include margin-right($baseline);
       padding: 6px ($baseline/2);
       font-size: 12px;
       border-radius: 0 3px 3px 0;
     }
     input.file_field {
+      @extend %cont-text-sr;
       position: absolute;
       @include right(0);
       top: 0;
       margin: 0;
       padding: 0;
       cursor: pointer;
-      opacity: 0;
-      filter: alpha(opacity=0);
     }
   }
   & > span, & input[disabled] {

lms/static/sass/course/layout/_courseware_header.scss

@@ -44,18 +44,18 @@
 
         &:hover,
         &:focus {
-          color: $blue;
-          border-bottom: 4px solid $blue;
+          color: $uxpl-blue-hover-active;
+          border-bottom: 4px solid $uxpl-blue-hover-active;
         }
 
         &.active {
-          border-bottom: 4px solid $blue;
+          border-bottom: 4px solid $uxpl-blue-base;
           background-color: transparent;
-          color: $blue;
+          color: $uxpl-blue-base;
 
           &:hover,
           &:focus {
-            color: $blue;
+            color: $uxpl-blue-base;
           }
         }
       }
@@ -97,7 +97,7 @@
       display: block;
       @include background-image(linear-gradient(-90deg, lighten($link-color, 8%), lighten($link-color, 5%) 50%, $link-color 50%, darken($link-color, 10%) 100%));
       border: 1px solid transparent;
-      border-color: darken($link-color, 10%);
+      border-color: $uxpl-blue-base;
       border-radius: 3px;
       @include box-sizing(border-box);
       box-shadow: 0 1px 0 0 rgba(255,255,255, 0.6);
@@ -117,7 +117,7 @@
       vertical-align: middle;
 
       &:hover, &:active, &:focus {
-        @include background-image(linear-gradient(-90deg, $link-color, $link-color 50%, $link-color 50%, $link-color 100%));
+        @include background-image(linear-gradient(-90deg, $uxpl-blue-base, $uxpl-blue-base 50%, $uxpl-blue-base 50%, $uxpl-blue-base 100%));
       }
     }
   }

lms/static/sass/partials/base/_variables.scss

@@ -159,6 +159,12 @@ $blue-t1: rgba($blue, 0.25);
 $blue-t2: rgba($blue, 0.50);
 $blue-t3: rgba($blue, 0.75);
 
+$uxpl-blue-base: rgba(0, 116, 180, 1); // wcag2a compliant
+$uxpl-blue-hover-active: lighten($uxpl-blue-base, 7%); // wcag2a compliant
+
+$uxpl-green-base: rgba(0, 129, 0, 1); // wcag2a compliant
+$uxpl-green-hover-active: lighten($uxpl-green-base, 7%); // wcag2a compliant
+
 $orange: rgb(237, 189, 60);
 $orange-l1: tint($orange,20%);
 $orange-l2: tint($orange,40%);
@@ -423,11 +429,11 @@ $action-secondary-disabled-bg: $m-gray-d3 !default;
 $action-secondary-disabled-fg: $white !default;
 
 // actions - misc
-$link-color: $blue !default;
-$link-color-d1: $blue !default;
-$link-hover: $blue-l1 !default; // from our Pattern Library http://ux.edx.org/elements/colors/
+$link-color: $uxpl-blue-base !default;
+$link-color-d1: $link-color !default;
+$link-hover: $uxpl-blue-hover-active !default; // from our Pattern Library http://ux.edx.org/elements/colors/
 $site-status-color: $pink !default;
-$button-color: $blue !default;
+$button-color: $uxpl-blue-base !default;
 $button-archive-color: rgb(238,238,238) !default; // #eeeeee
 
 // larger, random elements
@@ -462,7 +468,7 @@ $courseware-footer-margin: 0px !default;
 $courseware-border-bottom-color: rgb(68,162,222) !default;
 $courseware-button-border-color: rgb(230,230,230) !default;
 $courseware-hover-color: rgb(51,52,53) !default;
-$courseware-navigation-color: $blue !default;
+$courseware-navigation-color: $uxpl-blue-base !default;
 
 // homepage, onboarding, and course discovery
 $homepage__header--gradient__color--alpha: lighten($gray, 15%) !default;

lms/templates/instructor/instructor_dashboard_2/certificate-bulk-white-list.underscore

@@ -11,7 +11,7 @@
             <input class="file_field" id="browseBtn" name="students_list" type="file" accept=".csv"/>
         </div>
       </div>
-      <div><button class="btn-blue disabled upload-csv-button" type="submit"><%- gettext('Add to Exception List') %></button></div>
+      <div><button class="btn-blue upload-csv-button" type="submit"><%- gettext('Add to Exception List') %></button></div>
     </form>
     <div class="bulk-exception-results hidden"></div>
 </div>