From: Fiete Ostkamp Date: Mon, 9 Mar 2026 11:27:19 +0000 (+0100) Subject: Fix contrast issues in sdc-ui X-Git-Url: https://gerrit.onap.org/r/gitweb?a=commitdiff_plain;h=347f0e8e6697886d2bc08d7a07ff775e2e843c07;p=sdc.git 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 --- 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 a4dde49be1..b0c2d273c8 100644 --- 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 33ffb49537..b1ff1d7693 100644 --- 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 386d1f7b65..0f0b6736df 100644 --- 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 56ed502943..893270ee00 100644 --- 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 38effe8417..e50a71945c 100644 --- 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 8c391c52c8..da145e2f31 100644 --- 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 d37868d987..5b30b8e28a 100644 --- 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 10955425a4..8769e9b635 100644 --- 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 036db8d94d..2dd2afdb92 100644 --- 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 d8bab288d3..a2e60c3d5d 100644 --- 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 c8ad4d38d2..aabf9c3b22 100644 --- 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 cb7346e390..269cef4f7e 100644 --- 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 fe4573aadc..7e517a4f19 100644 --- 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 31c5a720bd..9593c2d249 100644 --- 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 83481c1d74..a2061466ff 100644 --- 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 2c3300237c..f4291d2398 100644 --- 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 2df6e6ac8b..9539bdfbb0 100644 --- 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 269ca0aee0..18f4e94610 100644 --- 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 3eab18ca14..eb6d486ef2 100644 --- 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 b630881fdc..caee306781 100644 --- 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 f3d39cacd6..bb88c4e3da 100644 --- 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 19f1c9b55a..bc244583cb 100644 --- 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 7215d7a3d4..748e461b35 100644 --- 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 f959559503..f439a91fa8 100644 --- 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 92d7b5c8fc..dfc69c9cd9 100644 --- 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 d16252dab4..e357728a88 100644 --- 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 e800da9166..46a76bb81b 100644 --- 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;