#5341·axe-core

4.13.0 - regresion on color-contrast detection on disabled state elements

Author: rsi21Created Sep 3, 2026Updated Sep 21, 2026
Labelsinfo needed

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:

xml
<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>
typescript
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):

typescript
const results = await new AxeBuilder({ page }).analyze();
// 4.13.0: reports color-contrast violation on mat-hint
// 4.12.1: passes

Additional 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.