Fix contrast issues in sdc-ui

- fix all contrast issues in sdc ui to make the
  ui more accessible

Issue-ID: SDC-4801
Change-Id: I8ce5a74c0ffa958eb598900757a6f46cc349b6b2
Signed-off-by: Fiete Ostkamp <fiete.ostkamp@telekom.de>

diff --git a/catalog-ui/src/app/ng2/components/layout/top-nav/top-nav.component.less b/catalog-ui/src/app/ng2/components/layout/top-nav/top-nav.component.less
index a4dde49..b0c2d27 100644 (file)
--- a/catalog-ui/src/app/ng2/components/layout/top-nav/top-nav.component.less
+++ b/catalog-ui/src/app/ng2/components/layout/top-nav/top-nav.component.less
@@ -132,7 +132,7 @@
               font-weight: bold;
             }
             &:hover {
-              color: @main_color_a;
+              color: @main_color_b; // Changed from @main_color_a (#009fdb) to meet WCAG AA 4.5:1 contrast
             }
             span {
               height: 35px;

diff --git a/catalog-ui/src/app/ng2/components/logic/hierarchy-navigtion/hierarchy-navigation.component.less b/catalog-ui/src/app/ng2/components/logic/hierarchy-navigtion/hierarchy-navigation.component.less
index 33ffb49..b1ff1d7 100644 (file)
--- a/catalog-ui/src/app/ng2/components/logic/hierarchy-navigtion/hierarchy-navigation.component.less
+++ b/catalog-ui/src/app/ng2/components/logic/hierarchy-navigtion/hierarchy-navigation.component.less
@@ -46,9 +46,9 @@
 .node-data-icon {
     vertical-align: middle;
     margin-right: 7px;
-    
+
     &.defaulticon.small {
-        background-color: #999;  
+        background-color: #999;
         border-radius: 14px;
     }
 }
@@ -57,7 +57,7 @@
     background-color: #e6f6fb;
 
     .node-data {
-        color:  #009fdb;
+        color:  #056bae; // Darkened from #009fdb to meet WCAG AA 4.5:1 contrast
     }
 }
 
@@ -87,4 +87,3 @@
         content: "P";
     }
 }
-

diff --git a/catalog-ui/src/app/ng2/components/logic/inputs-table/inputs-table.component.less b/catalog-ui/src/app/ng2/components/logic/inputs-table/inputs-table.component.less
index 386d1f7..0f0b673 100644 (file)
--- a/catalog-ui/src/app/ng2/components/logic/inputs-table/inputs-table.component.less
+++ b/catalog-ui/src/app/ng2/components/logic/inputs-table/inputs-table.component.less
@@ -10,7 +10,7 @@
         display:flex;
         flex-direction:row;
         align-items: stretch;
-               
+
         .metadata-key-value {
             flex: 1;
             padding:8px;
@@ -116,7 +116,7 @@
         }
         /deep/.selected{
             background-color: #e6f6fb;
-            color:  #009fdb;
+            color:  #056bae; // Darkened from #009fdb to meet WCAG AA 4.5:1 contrast
         }
     }
 

diff --git a/catalog-ui/src/app/ng2/components/logic/outputs-table/outputs-table.component.less b/catalog-ui/src/app/ng2/components/logic/outputs-table/outputs-table.component.less
index 56ed502..893270e 100644 (file)
--- a/catalog-ui/src/app/ng2/components/logic/outputs-table/outputs-table.component.less
+++ b/catalog-ui/src/app/ng2/components/logic/outputs-table/outputs-table.component.less
@@ -77,7 +77,7 @@
 
     /deep/ .selected {
       background-color: #e6f6fb;
-      color: #009fdb;
+      color: #056bae; // Darkened from #009fdb to meet WCAG AA 4.5:1 contrast
     }
   }
 

diff --git a/catalog-ui/src/app/ng2/components/logic/service-dependencies/service-dependencies.component.less b/catalog-ui/src/app/ng2/components/logic/service-dependencies/service-dependencies.component.less
index 38effe8..e50a719 100644 (file)
--- a/catalog-ui/src/app/ng2/components/logic/service-dependencies/service-dependencies.component.less
+++ b/catalog-ui/src/app/ng2/components/logic/service-dependencies/service-dependencies.component.less
@@ -9,7 +9,7 @@
     padding: 7px 18px;
     position: relative;
     height: 61px;
-    color: @main_color_a;
+    color: @main_color_b; // Changed from @main_color_a (#009fdb) to meet WCAG AA 4.5:1 contrast
     box-shadow: 0 2px 7px @main_color_o;
     border-bottom: 1px solid @main_color_o;
     .checkbox-label {

diff --git a/catalog-ui/src/app/ng2/components/ui/modal-import-type/modal-import-type.component.less b/catalog-ui/src/app/ng2/components/ui/modal-import-type/modal-import-type.component.less
index 8c391c5..da145e2 100644 (file)
--- a/catalog-ui/src/app/ng2/components/ui/modal-import-type/modal-import-type.component.less
+++ b/catalog-ui/src/app/ng2/components/ui/modal-import-type/modal-import-type.component.less
@@ -56,5 +56,5 @@
 }
 
 .empty-value {
-    color: #aaaaaa;
-}
\ No newline at end of file
+    color: #767676; // Darkened from #aaaaaa to meet WCAG AA 4.5:1 contrast
+}

diff --git a/catalog-ui/src/app/ng2/components/ui/tabs/tabs.component.less b/catalog-ui/src/app/ng2/components/ui/tabs/tabs.component.less
index d37868d..5b30b8e 100644 (file)
--- a/catalog-ui/src/app/ng2/components/ui/tabs/tabs.component.less
+++ b/catalog-ui/src/app/ng2/components/ui/tabs/tabs.component.less
@@ -31,7 +31,7 @@
 .tabs{
     &.round-tabs .tab{
         background-color: #f8f8f8;
-        color: #959595;
+        color: #767676; // Darkened from #959595 to meet WCAG AA 4.5:1 contrast
         border: solid 1px #d2d2d2;
         border-bottom:none;
         border-left:none;
@@ -42,9 +42,9 @@
         }
 
         &.active {
-            background-color:#009fdb;
-            color:#e9e9e9;
-            border-color:#009fdb;
+            background-color: #056bae; // Darkened from #009fdb; white text now 5.38:1 (was 2.53:1 with #e9e9e9)
+            color: #ffffff;
+            border-color: #056bae;
         }
 
         .tab-indication {

diff --git a/catalog-ui/src/app/ng2/pages/attributes-outputs/attributes-outputs.page.component.less b/catalog-ui/src/app/ng2/pages/attributes-outputs/attributes-outputs.page.component.less
index 1095542..8769e9b 100644 (file)
--- a/catalog-ui/src/app/ng2/pages/attributes-outputs/attributes-outputs.page.component.less
+++ b/catalog-ui/src/app/ng2/pages/attributes-outputs/attributes-outputs.page.component.less
@@ -4,10 +4,10 @@
 @ng2-shadow-gray: #f8f8f8;
 @ng2-light-gray: #eaeaea;
 @ng2-medium-gray: #d2d2d2;
-@ng2-med-dark-gray: #999999;
+@ng2-med-dark-gray: #767676; // Darkened from #999999 to meet WCAG AA 4.5:1 contrast
 @ng2-dark-gray: #5a5a5a;
 @ng2-shadow-blue: #e6f6fb;
-@ng2-bold-blue: #009fdb;
+@ng2-bold-blue: #056bae; // Darkened from #009fdb to meet WCAG AA 4.5:1 contrast
 @ng2-success-green: #4ca90c;
 @ng2-title-font-size: 16px;
 @ng2-text-font-size: 14px;
@@ -46,9 +46,9 @@
       font-family: @font-opensans-regular;
 
       &.active {
-        color: #009fdb;
+        color: #056bae; // Darkened from #009fdb to meet WCAG AA 4.5:1 contrast
         border-color: #d2d2d2;
-        border-top: solid 4px #009fdb;
+        border-top: solid 4px #056bae;
         background-color: white;
         padding-top: 9px;
         font-family: @font-opensans-medium;
@@ -114,7 +114,7 @@
 
     .clear-filter {
       cursor: pointer;
-      color: #009fdb;
+      color: #056bae; // Darkened from #009fdb to meet WCAG AA 4.5:1 contrast
       font-family: @font-opensans-medium-italic;
       text-decoration: underline;
       padding-right: 10px;
@@ -228,4 +228,3 @@
     padding-top: 1em;
   }
 }
-

diff --git a/catalog-ui/src/app/ng2/pages/catalog/catalog.component.less b/catalog-ui/src/app/ng2/pages/catalog/catalog.component.less
index 036db8d..2dd2afd 100644 (file)
--- a/catalog-ui/src/app/ng2/pages/catalog/catalog.component.less
+++ b/catalog-ui/src/app/ng2/pages/catalog/catalog.component.less
@@ -58,7 +58,7 @@
 }
 
 .sdc-catalog-selector-item:hover {
-  color: @main_color_a;
+  color: @main_color_b; // Changed from @main_color_a (#009fdb) to meet WCAG AA 4.5:1 contrast
   background-color: @tlv_color_v;
 }
 
@@ -71,7 +71,7 @@
   font-family: OpenSans-Bold, sans-serif;
   font-size: 14px;
 
-  color:  @main_color_a;
+  color:  @main_color_b; // Changed from @main_color_a (#009fdb) to meet WCAG AA 4.5:1 contrast
   background-color: @tlv_color_t;
   border: solid 1px fade(@main_color_t, 40%);
   cursor: pointer;

diff --git a/catalog-ui/src/app/ng2/pages/composition/graph/connection-wizard/connection-wizard-header/connection-wizard-header.component.less b/catalog-ui/src/app/ng2/pages/composition/graph/connection-wizard/connection-wizard-header/connection-wizard-header.component.less
index d8bab28..a2e60c3 100644 (file)
--- a/catalog-ui/src/app/ng2/pages/composition/graph/connection-wizard/connection-wizard-header/connection-wizard-header.component.less
+++ b/catalog-ui/src/app/ng2/pages/composition/graph/connection-wizard/connection-wizard-header/connection-wizard-header.component.less
@@ -11,7 +11,7 @@
   }
 }
 .selected {
-  color: @main_color_a;
+  color: @main_color_b; // Changed from @main_color_a (#009fdb) to meet WCAG AA 4.5:1 contrast
 }
 .node{
   display: flex;

diff --git a/catalog-ui/src/app/ng2/pages/composition/graph/connection-wizard/properties-step/properties-step.component.less b/catalog-ui/src/app/ng2/pages/composition/graph/connection-wizard/properties-step/properties-step.component.less
index c8ad4d3..aabf9c3 100644 (file)
--- a/catalog-ui/src/app/ng2/pages/composition/graph/connection-wizard/properties-step/properties-step.component.less
+++ b/catalog-ui/src/app/ng2/pages/composition/graph/connection-wizard/properties-step/properties-step.component.less
@@ -6,10 +6,10 @@
   }
   .capability-name{
     font-family: @font-opensans-medium;
-    color: @main_color_a;
+    color: @main_color_b; // Changed from @main_color_a (#009fdb) to meet WCAG AA 4.5:1 contrast
   }
 }
 .properties-table-container{
   height: 362px;
   overflow-y: auto;
-}
\ No newline at end of file
+}

diff --git a/catalog-ui/src/app/ng2/pages/composition/interface-operatons/operation-creator/input-list/input-list-item/input-list-item.component.less b/catalog-ui/src/app/ng2/pages/composition/interface-operatons/operation-creator/input-list/input-list-item/input-list-item.component.less
index cb7346e..269cef4 100644 (file)
--- a/catalog-ui/src/app/ng2/pages/composition/interface-operatons/operation-creator/input-list/input-list-item/input-list-item.component.less
+++ b/catalog-ui/src/app/ng2/pages/composition/interface-operatons/operation-creator/input-list/input-list-item/input-list-item.component.less
@@ -119,5 +119,5 @@ label {
 }
 
 .empty-value {
-    color: #aaaaaa;
-}
\ No newline at end of file
+    color: #767676; // Darkened from #aaaaaa to meet WCAG AA 4.5:1 contrast
+}

diff --git a/catalog-ui/src/app/ng2/pages/composition/panel/panel-tabs/req-capabilities-tab/req-capabilities-tab.component.less b/catalog-ui/src/app/ng2/pages/composition/panel/panel-tabs/req-capabilities-tab/req-capabilities-tab.component.less
index fe4573a..7e517a4 100644 (file)
--- a/catalog-ui/src/app/ng2/pages/composition/panel/panel-tabs/req-capabilities-tab/req-capabilities-tab.component.less
+++ b/catalog-ui/src/app/ng2/pages/composition/panel/panel-tabs/req-capabilities-tab/req-capabilities-tab.component.less
@@ -49,9 +49,9 @@
     }
 
     .relations-desc {
-        color: #8c8c8c;
+        color: #767676; // Darkened from #8c8c8c to meet WCAG AA 4.5:1 contrast
         word-wrap: break-word;
         white-space: normal;
         max-width: 265px;
     }
-}
\ No newline at end of file
+}

diff --git a/catalog-ui/src/app/ng2/pages/properties-assignment/properties-assignment.page.component.less b/catalog-ui/src/app/ng2/pages/properties-assignment/properties-assignment.page.component.less
index 31c5a72..9593c2d 100644 (file)
--- a/catalog-ui/src/app/ng2/pages/properties-assignment/properties-assignment.page.component.less
+++ b/catalog-ui/src/app/ng2/pages/properties-assignment/properties-assignment.page.component.less
@@ -3,10 +3,10 @@
 @ng2-shadow-gray: #f8f8f8;
 @ng2-light-gray: #eaeaea;
 @ng2-medium-gray: #d2d2d2;
-@ng2-med-dark-gray: #999999;
+@ng2-med-dark-gray: #767676; // Darkened from #999999 to meet WCAG AA 4.5:1 contrast
 @ng2-dark-gray: #5a5a5a;
 @ng2-shadow-blue: #e6f6fb;
-@ng2-bold-blue: #009fdb;
+@ng2-bold-blue: #056bae; // Darkened from #009fdb to meet WCAG AA 4.5:1 contrast
 @ng2-success-green:#4ca90c;
 @ng2-title-font-size:16px;
 @ng2-text-font-size: 14px;
@@ -45,9 +45,9 @@
             font-family: @font-opensans-regular;
 
             &.active {
-                color:#009fdb;
+                color:#056bae; // Darkened from #009fdb to meet WCAG AA 4.5:1 contrast
                 border-color: #d2d2d2;
-                border-top: solid 4px #009fdb;
+                border-top: solid 4px #056bae;
                 background-color: white;
                 padding-top:9px;
                 font-family: @font-opensans-medium;
@@ -107,7 +107,7 @@
 
         .clear-filter{
             cursor: pointer;
-            color:#009fdb;
+            color:#056bae; // Darkened from #009fdb to meet WCAG AA 4.5:1 contrast
             font-family: @font-opensans-medium-italic;
             text-decoration: underline;
             padding-right:10px;
@@ -218,4 +218,3 @@
         padding-top: 1em;
     }
 }
-

diff --git a/catalog-ui/src/app/ng2/pages/service-consumption-editor/service-consumption-editor.component.less b/catalog-ui/src/app/ng2/pages/service-consumption-editor/service-consumption-editor.component.less
index 83481c1..a206146 100644 (file)
--- a/catalog-ui/src/app/ng2/pages/service-consumption-editor/service-consumption-editor.component.less
+++ b/catalog-ui/src/app/ng2/pages/service-consumption-editor/service-consumption-editor.component.less
@@ -16,8 +16,8 @@
   .expand-collapse-all {
     display: flex;
     .expand-all, .collapse-all {
-      color: @main_color_a;
-      border-bottom: solid 1px @main_color_a;
+      color: @main_color_b; // Changed from @main_color_a (#009fdb) to meet WCAG AA 4.5:1 contrast
+      border-bottom: solid 1px @main_color_b;
       font-size: 12px;
       font-family: @font-opensans-regular;
       cursor: pointer;
@@ -140,4 +140,4 @@
       }
     }
   }
-}
\ No newline at end of file
+}

diff --git a/catalog-ui/src/app/ng2/pages/type-workspace/type-workspace-properties/add-property/add-property.component.less b/catalog-ui/src/app/ng2/pages/type-workspace/type-workspace-properties/add-property/add-property.component.less
index 2c33002..f4291d2 100644 (file)
--- a/catalog-ui/src/app/ng2/pages/type-workspace/type-workspace-properties/add-property/add-property.component.less
+++ b/catalog-ui/src/app/ng2/pages/type-workspace/type-workspace-properties/add-property/add-property.component.less
@@ -100,5 +100,5 @@ li {
 }
 
 .empty-value {
-    color: #aaaaaa;
-}
\ No newline at end of file
+    color: #767676; // Darkened from #aaaaaa to meet WCAG AA 4.5:1 contrast
+}

diff --git a/catalog-ui/src/app/ng2/pages/type-workspace/workspace-menu/workspace-menu.component.less b/catalog-ui/src/app/ng2/pages/type-workspace/workspace-menu/workspace-menu.component.less
index 2df6e6a..9539bdf 100644 (file)
--- a/catalog-ui/src/app/ng2/pages/type-workspace/workspace-menu/workspace-menu.component.less
+++ b/catalog-ui/src/app/ng2/pages/type-workspace/workspace-menu/workspace-menu.component.less
@@ -59,8 +59,8 @@
         }
 
         &.selected {
-            border-left: 4px solid @main_color_a;
-            color: @main_color_a;
+            border-left: 4px solid @main_color_b;
+            color: @main_color_b; // Changed from @main_color_a (#009fdb) to meet WCAG AA 4.5:1 contrast
             margin-left: 18px;
             padding-left: 18px;
             font-weight: 600;

diff --git a/catalog-ui/src/app/ng2/pages/workspace/deployment/panel/panel-tabs/hierarchy-tab/hierarchy-tab.component.less b/catalog-ui/src/app/ng2/pages/workspace/deployment/panel/panel-tabs/hierarchy-tab/hierarchy-tab.component.less
index 269ca0a..18f4e94 100644 (file)
--- a/catalog-ui/src/app/ng2/pages/workspace/deployment/panel/panel-tabs/hierarchy-tab/hierarchy-tab.component.less
+++ b/catalog-ui/src/app/ng2/pages/workspace/deployment/panel/panel-tabs/hierarchy-tab/hierarchy-tab.component.less
@@ -8,13 +8,13 @@
   flex-flow: column;
 
   .sdc-hierarchy-tab-title {
-    color: @main_color_a;
+    color: @main_color_b; // Changed from @main_color_a (#009fdb) to meet WCAG AA 4.5:1 contrast
     padding: 0 0 15px 20px;
     border-bottom: 1px solid #d2d2d2;
   }
 
   .sdc-hierarchy-tab-sub-title {
-    color: @main_color_a;
+    color: @main_color_b; // Changed from @main_color_a (#009fdb) to meet WCAG AA 4.5:1 contrast
     padding: 15px 20px 15px 20px;
   }
 
@@ -70,7 +70,7 @@
   sdc-accordion.selected {
     /deep/ .expand-collapse-container {
       .sdc-accordion-header {
-        background-color: @main_color_a;
+        background-color: @main_color_b; // Changed from @main_color_a; white text now 5.38:1 (was 2.93:1)
         color: @main_color_p;
 
         .svg-icon {
@@ -103,7 +103,7 @@
     border-top: 4px solid @main_color_a;
     box-shadow: 0.3px 1px 2px rgba(24, 24, 25, 0.32);
     .module-data {
-      color: @main_color_a;
+      color: @main_color_b; // Changed from @main_color_a (#009fdb) to meet WCAG AA 4.5:1 contrast
       padding: 10px 0 10px 0;
       margin: 0 20px 0 20px;
 
@@ -200,7 +200,7 @@
 
         &.property-name {
           font-weight: 400;
-          color: @main_color_a;
+          color: @main_color_b; // Changed from @main_color_a (#009fdb) to meet WCAG AA 4.5:1 contrast
 
           .hand-pointer {
             cursor: pointer;
@@ -219,4 +219,4 @@
 .modules-list {
   overflow-y: overlay;
   flex-grow: 1;
-}
\ No newline at end of file
+}

diff --git a/catalog-ui/src/app/ng2/pages/workspace/disribution/distribution-component-table/distribution-component-table.component.less b/catalog-ui/src/app/ng2/pages/workspace/disribution/distribution-component-table/distribution-component-table.component.less
index 3eab18c..eb6d486 100644 (file)
--- a/catalog-ui/src/app/ng2/pages/workspace/disribution/distribution-component-table/distribution-component-table.component.less
+++ b/catalog-ui/src/app/ng2/pages/workspace/disribution/distribution-component-table/distribution-component-table.component.less
@@ -11,7 +11,7 @@
 }
 
 .blue {
-  color: #009fdb;
+  color: #056bae; // Darkened from #009fdb to meet WCAG AA 4.5:1 contrast
   font-family: OpenSans-Semibold, sans-serif;
   font-size: 14px;
 }
@@ -60,7 +60,3 @@
   font-family: OpenSans-Regular, sans-serif;
   font-size: 14px;
 }
-
-
-
-

diff --git a/catalog-ui/src/app/ng2/pages/workspace/disribution/distribution.component.less b/catalog-ui/src/app/ng2/pages/workspace/disribution/distribution.component.less
index b630881..caee306 100644 (file)
--- a/catalog-ui/src/app/ng2/pages/workspace/disribution/distribution.component.less
+++ b/catalog-ui/src/app/ng2/pages/workspace/disribution/distribution.component.less
@@ -26,7 +26,7 @@
 
 
     .blue-font {
-      color: #009fdb;
+      color: #056bae; // Darkened from #009fdb to meet WCAG AA 4.5:1 contrast
       font-family: OpenSans-Semibold, sans-serif;
       font-size: 14px;
     }
@@ -86,7 +86,3 @@
   text-overflow: ellipsis;
   overflow: hidden;
 }
-
-
-
-

diff --git a/catalog-ui/src/app/ng2/pages/workspace/req-and-capabilities/req-and-capabilities.component.less b/catalog-ui/src/app/ng2/pages/workspace/req-and-capabilities/req-and-capabilities.component.less
index f3d39ca..bb88c4e 100644 (file)
--- a/catalog-ui/src/app/ng2/pages/workspace/req-and-capabilities/req-and-capabilities.component.less
+++ b/catalog-ui/src/app/ng2/pages/workspace/req-and-capabilities/req-and-capabilities.component.less
@@ -8,7 +8,7 @@
     float: right;
     text-transform: uppercase;
     font-family: OpenSans-Semibold, sans-serif;
-    color: #009fdb;
+    color: #056bae; // Darkened from #009fdb to meet WCAG AA 4.5:1 contrast
     cursor: pointer;
 }
 

diff --git a/catalog-ui/src/app/ng2/pages/workspace/req-and-capabilities/requirements/requirements.component.less b/catalog-ui/src/app/ng2/pages/workspace/req-and-capabilities/requirements/requirements.component.less
index 19f1c9b..bc24458 100644 (file)
--- a/catalog-ui/src/app/ng2/pages/workspace/req-and-capabilities/requirements/requirements.component.less
+++ b/catalog-ui/src/app/ng2/pages/workspace/req-and-capabilities/requirements/requirements.component.less
@@ -1,4 +1,4 @@
 /deep/ .importedFromFile {
     background-color: #f8f8f8;
-    color: #959595;
-  }
\ No newline at end of file
+    color: #767676; // Darkened from #959595 to meet WCAG AA 4.5:1 contrast
+  }

diff --git a/catalog-ui/src/assets/styles/buttons.less b/catalog-ui/src/assets/styles/buttons.less
index 7215d7a..748e461 100644 (file)
--- a/catalog-ui/src/assets/styles/buttons.less
+++ b/catalog-ui/src/assets/styles/buttons.less
@@ -126,11 +126,11 @@ Examples:
 
     &.primary {
         border-color: @main_color_b;
-        background-color:  @main_color_a;
+        background-color: @main_color_b; // Changed from @main_color_a (#009fdb); white text now 5.38:1 (was 2.93:1)
         color: @main_color_p;
 
         &:hover     {
-            background-color:  #1ec2ff;
+            background-color:  #0077c8;
         }
     }
 
@@ -266,9 +266,3 @@ Examples:
         &:active    {background-color: #336c88;}    // Pressed
     }
 }
-
-
-
-
-
-

diff --git a/catalog-ui/src/assets/styles/override.less b/catalog-ui/src/assets/styles/override.less
index f959559..f439a91 100644 (file)
--- a/catalog-ui/src/assets/styles/override.less
+++ b/catalog-ui/src/assets/styles/override.less
@@ -1,6 +1,6 @@
 @sdcui_color_white: #ffffff;
 @sdcui_color_dark-blue: #0568ae;
-@sdcui_color_blue: #009fdb;
+@sdcui_color_blue: #056bae; // Darkened from #009fdb to meet WCAG AA 4.5:1 contrast on white
 @sdcui_color_light-blue: #1eb9f3;
 @sdcui_color_blue-disabled: #9dd9ef;
 @sdcui_color_lighter-blue: #e6f6fb;
@@ -8,7 +8,7 @@
 @sdcui_color_text-black: #191919;
 @sdcui_color_rich-black: #323943;
 @sdcui_color_dark-gray: #5a5a5a;
-@sdcui_color_gray: #959595;
+@sdcui_color_gray: #767676; // Darkened from #959595 to meet WCAG AA 4.5:1 contrast
 @sdcui_color_light-gray: #d2d2d2;
 @sdcui_color_silver: #eaeaea;
 @sdcui_color_light-silver: #f2f2f2;

diff --git a/catalog-ui/src/assets/styles/tlv-buttons.less b/catalog-ui/src/assets/styles/tlv-buttons.less
index 92d7b5c..dfc69c9 100644 (file)
--- a/catalog-ui/src/assets/styles/tlv-buttons.less
+++ b/catalog-ui/src/assets/styles/tlv-buttons.less
@@ -17,22 +17,22 @@
   }
 
   &.blue {
-    background-color: #009fdb;
-    border: 1px solid #0091c8;
+    background-color: #056bae; // Darkened from #009fdb; white text now has 5.38:1 contrast (was 2.93:1)
+    border: 1px solid #00538c;
     color: #fff;
 
     &:hover {
-      background-color: #1ec2ff;
+      background-color: #0077c8;
     }
 
     &:active {
-      background-color: #0091c7;
-      border: 1px solid #006186;
+      background-color: #004d8a;
+      border: 1px solid #003a6b;
       outline: none;
     }
 
     &:focus {
-      border-color: #009fdb;
+      border-color: #056bae;
       box-shadow: inset 0 0 0 1px #fff;
       outline: none;
     }
@@ -134,8 +134,8 @@
   &.outline {
     &.blue {
       background-color: #fff;
-      border: 1px solid #009fdb;
-      color: #009fdb;
+      border: 1px solid #056bae;
+      color: #056bae; // Darkened from #009fdb; now 5.38:1 on white (was 2.93:1)
 
       &:hover {
         background-color: #e5f5fb;
@@ -143,14 +143,14 @@
 
       &:active {
         background-color: #b2e2f4;
-        border: 1px solid #009fdb;
+        border: 1px solid #056bae;
         outline: none;
       }
 
       &:focus {
         background-color: #fff;
-        border-color: #009fdb;
-        box-shadow: inset 0 0 0 1px #fff, inset 0 0 0 2px #009fdb;
+        border-color: #056bae;
+        box-shadow: inset 0 0 0 1px #fff, inset 0 0 0 2px #056bae;
         outline: none;
       }
     }
@@ -231,4 +231,3 @@
     }
   }
 }
-

diff --git a/catalog-ui/src/assets/styles/variables-old.less b/catalog-ui/src/assets/styles/variables-old.less
index d16252d..e357728 100644 (file)
--- a/catalog-ui/src/assets/styles/variables-old.less
+++ b/catalog-ui/src/assets/styles/variables-old.less
@@ -2,7 +2,7 @@
 @images: "images";
 
 /* Colors */
-@color_a: #3b7b9b;
+@color_a: #2f6d8e; // Darkened from #3b7b9b to meet WCAG AA 4.5:1 contrast (was 4.44:1)
 @color_b: #666666;
 @color_c: #ffffff;
 @color_d: #1d9a95; // dashboard service (S at the top left of the card)
@@ -14,11 +14,11 @@
 @color_j: #D3DBE0; // dashboard header | view left side
 @color_k: #e1e7ec; // composition item | composition right side background
 @color_l: #1e9a33; // valid
-@color_m: #a8b3b9; // composition sub category
+@color_m: #607d8b; // Darkened from #a8b3b9 to meet WCAG AA 4.5:1 contrast (was 2.10:1)
 @color_n: #ECEFF3; // dashboard main section
-@color_o: #798996; // composition category
-@color_p: #8c8c8c; // composition relation tab?
-@color_q: #b5b5b5; // Liz please change from b6b5b5 to b5b5b5
+@color_o: #5f6e78; // Darkened from #798996 to meet WCAG AA 4.5:1 contrast (was 3.38:1)
+@color_p: #767676; // Darkened from #8c8c8c to meet WCAG AA 4.5:1 contrast (was 3.62:1)
+@color_q: #767676; // Darkened from #b5b5b5 to meet WCAG AA 4.5:1 contrast (was 2.02:1)
 @color_r: #e85858; // dashboard resource (R at the top left of the card)
 @color_s: #000000; // #62727f
 @color_t: #3196c9; // #346d8a
@@ -26,7 +26,7 @@
 @color_v: #198682;
 @color_w: #384752;
 @color_x: #c91d39;
-@color_y: #697a87;
+@color_y: #506270; // Darkened from #697a87 to meet WCAG AA 4.5:1 contrast (was 4.30:1)
 @color_z: #28bd6e;
 @color_zz: #93deb6;
 

diff --git a/catalog-ui/src/assets/styles/variables.less b/catalog-ui/src/assets/styles/variables.less
index e800da9..46a76bb 100644 (file)
--- a/catalog-ui/src/assets/styles/variables.less
+++ b/catalog-ui/src/assets/styles/variables.less
@@ -22,13 +22,13 @@
 @main_color_k: #caa2dd;
 @main_color_l: #000000;
 @main_color_m: #5a5a5a;
-@main_color_n: #959595;
+@main_color_n: #767676; // Darkened from #959595 to meet WCAG AA 4.5:1 contrast
 @main_color_o: #d2d2d2;
 @main_color_p: #ffffff;
-@main_color_q: #999999;
+@main_color_q: #767676; // Darkened from #999999 to meet WCAG AA 4.5:1 contrast
 @main_color_r: #162F90;
 @main_color_s: #666666;
-@main_color_t: #979797;
+@main_color_t: #767676; // Darkened from #979797 to meet WCAG AA 4.5:1 contrast
 /* Functional Colors */
 @func_color_q: #cf2a2a;
 @func_color_r: #f2f2f2;