diff --git a/src/material-experimental/mdc-form-field/_form-field-high-contrast.scss b/src/material-experimental/mdc-form-field/_form-field-high-contrast.scss index a6205e9c93e9..431a5a285554 100644 --- a/src/material-experimental/mdc-form-field/_form-field-high-contrast.scss +++ b/src/material-experimental/mdc-form-field/_form-field-high-contrast.scss @@ -4,11 +4,20 @@ $focus-indicator-width: 3px; $focus-indicator-style: dashed; - // The outline of the `fill` appearance is achieved through a background color - // which won't be visible in high contrast mode. Add an outline to replace it. - .mat-form-field-appearance-fill .mat-mdc-text-field-wrapper { - @include a11y.high-contrast(active, off) { - outline: solid 1px; + .mat-form-field-appearance-fill { + // The outline of the `fill` appearance is achieved through a background color + // which won't be visible in high contrast mode. Add an outline to replace it. + .mat-mdc-text-field-wrapper { + @include a11y.high-contrast(active, off) { + outline: solid 1px; + } + } + + // Use GreyText for the disabled outline color which will account for the user's configuration. + &.mat-form-field-disabled .mat-mdc-text-field-wrapper { + @include a11y.high-contrast(active, off) { + outline-color: GrayText; + } } } diff --git a/src/material-experimental/mdc-select/select.scss b/src/material-experimental/mdc-select/select.scss index 7defc9a0bf9d..48fe42590c17 100644 --- a/src/material-experimental/mdc-select/select.scss +++ b/src/material-experimental/mdc-select/select.scss @@ -77,6 +77,10 @@ $scale: 0.75 !default; // On Chromium browsers the `currentColor` blends in with the // background for SVGs so we have to fall back to `CanvasText`. fill: CanvasText; + + .mat-mdc-select-disabled & { + fill: GrayText; + } } } } diff --git a/src/material/form-field/form-field-fill.scss b/src/material/form-field/form-field-fill.scss index 16adea99df38..02bb20a62085 100644 --- a/src/material/form-field/form-field-fill.scss +++ b/src/material/form-field/form-field-fill.scss @@ -32,6 +32,12 @@ $fill-subscript-padding: math.div($fill-side-padding, $fill-subscript-font-scale } } + &.mat-form-field-disabled .mat-form-field-flex { + @include a11y.high-contrast(active, off) { + outline-color: GrayText; + } + } + &.mat-focused .mat-form-field-flex { @include a11y.high-contrast(active, off) { outline: dashed 3px; diff --git a/src/material/form-field/form-field-legacy.scss b/src/material/form-field/form-field-legacy.scss index 4644b82a24fd..0485f0496706 100644 --- a/src/material/form-field/form-field-legacy.scss +++ b/src/material/form-field/form-field-legacy.scss @@ -63,6 +63,7 @@ $legacy-underline-height: 1px !default; @include a11y.high-contrast(active, off) { border-top-style: dotted; border-top-width: 2px; + border-top-color: GrayText; } } diff --git a/src/material/form-field/form-field-outline.scss b/src/material/form-field/form-field-outline.scss index 2d0d42a99f26..938c871deeac 100644 --- a/src/material/form-field/form-field-outline.scss +++ b/src/material/form-field/form-field-outline.scss @@ -138,6 +138,12 @@ $outline-subscript-padding: math.div($outline-side-padding, $outline-subscript-f padding: 0 $outline-subscript-padding; } + &.mat-form-field-disabled .mat-form-field-outline { + @include a11y.high-contrast(active, off) { + color: GrayText; + } + } + &._mat-animation-noopable { &:not(.mat-form-field-disabled) .mat-form-field-flex:hover ~ .mat-form-field-outline, .mat-form-field-outline, diff --git a/src/material/form-field/form-field.scss b/src/material/form-field/form-field.scss index a2fbb1c4e552..127d58317f3a 100644 --- a/src/material/form-field/form-field.scss +++ b/src/material/form-field/form-field.scss @@ -112,6 +112,12 @@ $default-infix-width: 180px !default; left: auto; right: 0; } + + .mat-form-field-disabled & { + @include a11y.high-contrast(active, off) { + color: GrayText; + } + } } .mat-form-field-empty.mat-form-field-label,