diff --git a/media_source/templates/administrator/atum/scss/_variables-dark.scss b/media_source/templates/administrator/atum/scss/_variables-dark.scss index 12f7b58aec6fc..ad1393fbf413b 100644 --- a/media_source/templates/administrator/atum/scss/_variables-dark.scss +++ b/media_source/templates/administrator/atum/scss/_variables-dark.scss @@ -99,7 +99,7 @@ $atum-colors-dark: ( form-check-input-checked-bg-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3e%3cpath fill='none' stroke='%23eee' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='m6 10 3 3 6-6'/%3e%3c/svg%3e"), form-check-input-checked-bg-color: $btn-primary-dark, - form-check-input-border: 1px solid rgba(255, 255, 255, .2), // rgba(255, 255, 255, .05), + form-check-input-border: 1px solid rgba(255, 255, 255, .5), // contrast ratio: 5.29 on #0f151d form-select-background: $form-select-bg-dark $form-select-indicator-dark no-repeat right center / $form-select-bg-size, // Used so we can have multiple background elements (e.g., arrow and feedback icon) form-select-background-rtl: $form-select-bg-dark $form-select-indicator-rtl-dark no-repeat left center / $form-select-bg-size, // Used so we can have multiple background elements (e.g. arrow and feedback icon) diff --git a/media_source/templates/administrator/atum/scss/_variables.scss b/media_source/templates/administrator/atum/scss/_variables.scss index b4b272baf527c..eeab284918a77 100644 --- a/media_source/templates/administrator/atum/scss/_variables.scss +++ b/media_source/templates/administrator/atum/scss/_variables.scss @@ -155,7 +155,7 @@ $atum-colors: ( form-check-input-checked-bg-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3e%3cpath fill='none' stroke='%23fff' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='m6 10 3 3 6-6'/%3e%3c/svg%3e"), form-check-input-checked-bg-color: $blue, - form-check-input-border: var(--border-width) solid var(--template-bg-dark-20), + form-check-input-border: var(--border-width) solid var(--template-bg-dark-60), // contrast ratio: 6.35 on #fff form-select-background: $form-select-bg $form-select-indicator no-repeat right center / $form-select-bg-size, // Used so we can have multiple background elements (e.g., arrow and feedback icon) form-select-background-rtl: $form-select-bg $form-select-indicator-rtl no-repeat left center / $form-select-bg-size, // Used so we can have multiple background elements (e.g., arrow and feedback icon) diff --git a/media_source/templates/administrator/atum/scss/blocks/_global.scss b/media_source/templates/administrator/atum/scss/blocks/_global.scss index acbbb2d629eec..47cc83acd938b 100644 --- a/media_source/templates/administrator/atum/scss/blocks/_global.scss +++ b/media_source/templates/administrator/atum/scss/blocks/_global.scss @@ -40,6 +40,8 @@ body { } &.a11y_contrast { + --form-check-input-border: 2px solid var(--body-color); + filter: contrast(115%); } diff --git a/media_source/templates/site/cassiopeia/scss/tools/variables/_variables.scss b/media_source/templates/site/cassiopeia/scss/tools/variables/_variables.scss index 8f7d9081bb9c7..daff380c2fe61 100644 --- a/media_source/templates/site/cassiopeia/scss/tools/variables/_variables.scss +++ b/media_source/templates/site/cassiopeia/scss/tools/variables/_variables.scss @@ -192,6 +192,7 @@ $table-variants: ( // Forms $input-border-color: $gray-400 !default; +$form-check-input-border: var(--border-width) solid $gray-600 !default; // contrast ratio: 4.7 on #fff $input-padding: .6rem 1rem !default; $input-btn-padding-y: .6rem !default; $input-btn-padding-x: 1rem !default;