[Feature]: Support forcedColors emulation for Firefox, Safari, and WebKit

[2020Deeya]

🚀 Feature Request

Problem

Currently, Playwright's forcedColors emulation is only supported in Chromium-based browsers. This prevents visual regression and accessibility tests in high-contrast mode from running on Firefox, Safari, and WebKit. Moreover, macOS and iOS do not natively support a system-wide forced colors equivalent like Windows' High Contrast mode, making this a significant limitation for these platforms.

Use Case

Our tests require high-contrast mode to verify that the UI works for users relying on forced colors due to accessibility needs. Without support for forcedColors emulation, we must rely on injecting styles or setting up manual configurations, which are inconsistent across CI pipelines.

Alternatives

While injecting styles mimics high-contrast mode, it introduces complexity and deviates from native browser behavior.

Suggested Solution

Extend emulateMedia({ forcedColors: 'active' }) to support Firefox, Safari, and WebKit, or provide an alternative way to enable high-contrast mode for these browsers, especially on macOS and iOS.

Example

await page.emulateMedia({ forcedColors: 'active' });  // Should work across all browsers.
expect(await page.screenshot()).toMatchSnapshot('high-contrast-mode.png');

Motivation

Accessibility is a critical aspect of web development, and high-contrast mode is essential for users who rely on it due to visual impairments. While Chromium-based browsers support forcedColors emulation (primarily on Windows), the lack of support in Firefox, Safari, and WebKit limits Playwright's ability to provide consistent cross-browser accessibility testing.

This is especially problematic for macOS and iOS users, where the operating system itself lacks a native forced colors mode, compounding the challenge of achieving consistent testing environments across all platforms.

How this will make Playwright better:

• Enable full cross-browser accessibility and visual regression testing in high-contrast mode.
• Remove the need for workarounds, such as injecting custom styles, which can deviate from real browser behavior.
• Improve test reliability and developer experience by offering native emulation of accessibility features across all supported browsers.

[mxschmitt]

ForcedColors emulation is supported on all the operating systems and on all the platforms looking at this test.

You can also specify it in page.emulateMedia: https://playwright.dev/docs/api/class-page#page-emulate-media-option-forced-colors

[2020Deeya]

Thank you for your response and for pointing out the current capabilities of page.emulateMedia for forcedColors emulation.

However, during my tests, I observed that while page.emulateMedia({ forcedColors: 'active' }) works seamlessly in Chromium-based browsers (like Chrome and Edge), it does not have the desired effect in Firefox, WebKit, and Safari. Specifically:

In Firefox and WebKit: Even after enabling forcedColors: 'active', the high contrast mode does not visually reflect in the rendering.
In Safari: Similar behavior is observed where high contrast emulation does not trigger the expected visual changes.

[mxschmitt]

Could you help us and provide a minimal reproducible in form of a small script / git repository?