4.13.0 - regresion on color-contrast detection on disabled state elements
Product
axe-core
Product Version
4.13.0
Latest Version
- I have tested the issue with the latest version of the product
Issue Description
Expectation
color-contrast rule should not flag text elements that belong to a disabled form control. WCAG 2.1 SC 1.4.3 explicitly exempts inactive/disabled UI components from contrast requirements. This was working correctly in axe-core 4.12.1.
This regression was triggered solely by @axe-core/playwright bumping its axe-core peer dependency from 4.12.1 to 4.13.0 — no application code was changed.
Actual
In axe-core 4.13.0, mat-hint rendered inside a disabled Angular Material mat-form-field is flagged as a color-contrast violation (#a8a9a9 on #ffffff, ratio 2.35:1). The mat-hint element is a sibling of the input — not the input itself — so axe does not detect it as part of a disabled control and incorrectly applies the contrast rule.
Reverting to 4.12.1 makes the violation disappear without any code changes, suggesting a regression introduced by the stacking context fix in #5214.
How to Reproduce
Angular Material 21 with a reactive form:
<form [formGroup]="userForm">
<mat-form-field>
<mat-label>Disabled form field</mat-label>
<input matInput formControlName="fax" />
<mat-hint>Disabled hint</mat-hint>
</mat-form-field>
</form>this.userForm = new FormGroup({
fax: new FormControl({ value: 'Text in disabled input', disabled: true })
});The rendered mat-hint has color: #a8a9a9 and the background resolves to #ffffff. axe-core 4.13.0 flags this as a violation. axe-core 4.12.1 does not.
Axe test (Playwright + @axe-core/playwright):
const results = await new AxeBuilder({ page }).analyze();
// 4.13.0: reports color-contrast violation on mat-hint
// 4.12.1: passesAdditional context
- axe-core: 4.13.0 (regression from 4.12.1)
- @axe-core/playwright: latest (that relies now on a axe-core 4.13.0, only change bring with that version on peer dep)
- Angular: 22.x
- Angular Material: 22.x
- Browser: Chromium (Playwright)
- The mat-hint element is structurally a sibling of the , not a child, so axe cannot infer it belongs to the disabled control via the DOM tree alone. Angular Material applies disabled styling via CSS classes on the parent mat-form-field, which axe does not inspect.
Likely related to the stacking context fix in #5214 introduced in 4.13.0, which changed background color resolution and may now incorrectly include disabled form field areas in contrast checks.
Source: dequelabs/axe-core