HTTP Headers

Sec CH Prefers Reduced Transparency

HTTP Header

Experimental: This is an experimental technology
It is recommended to carefully review the Browser compatibility table before deploying this feature in a production environment.

Secure context: This feature is accessible only within secure contexts such as HTTPS, in supported browsers.

The HTTP <Sec-CH-Prefers-Reduced-Transparency> request header is a user agent client hint that communicates the user’s preference for reduced transparency in content.

When a server indicates support for <Sec-CH-Prefers-Reduced-Transparency> through the Accept-CH header, the client may reply with this header to convey the user’s preference for less transparent content. The server can then deliver adapted content, such as CSS styles or images, to minimize transparency effects.

This approach is inspired by the prefers-reduced-transparency media query used in CSS.

Syntax

Sec-CH-Prefers-Reduced-Transparency: <preference>

Directives

The user agent’s preference for reduced transparency. This is often taken from the underlying operating system’s setting. The value of this directive can be either no-preference or reduce.

Example

Examples

Using Sec-CH-Prefers-Reduced-Transparency

The client initiates an initial request to the server:

GET / HTTP/1.1
Host: example.com

The server responds, informing the client via Accept-CH that it accepts Sec-CH-Prefers-Reduced-Transparency. In this response, Critical-CH is also used, indicating that Sec-CH-Prefers-Reduced-Transparency is a critical client hint.

The server’s response:

HTTP/1.1 200 OK
Content-Type: text/html
Accept-CH: Sec-CH-Prefers-Reduced-Transparency
Vary: Sec-CH-Prefers-Reduced-Transparency
Critical-CH: Sec-CH-Prefers-Reduced-Transparency

Note:
The Sec-CH-Prefers-Reduced-Transparency header is also specified in the Vary header, signaling to the browser that content served may vary based on this header, even if the URL remains the same. This ensures the browser caches responses separately based on the header value. Each header listed in Critical-CH should also appear in Accept-CH and Vary.

The client then retries the request, affected by the Critical-CH directive. It indicates a user preference for reduced transparency by including Sec-CH-Prefers-Reduced-Transparency in the request headers:

GET / HTTP/1.1
Host: example.com
Sec-CH-Prefers-Reduced-Transparency: "reduce"

In subsequent requests within the same session, the client will continue to include this header unless the server’s Accept-CH response changes. This mechanism allows the server to adapt content based on user preferences for transparency reduction.

How to Modify Header using Requestly

Requestly is a powerful Chrome extension that allows you to modify HTTP headers, including the Sec-CH-Prefers-Reduced-Transparency header. This can help you test how websites behave when users prefer reduced transparency effects, which is useful for accessibility and design testing. Steps to Modify the Sec-CH-Prefers-Reduced-Transparency Header:

Install and open the Requestly Chrome extension. You can find it on the Chrome Web Store.
Create a new rule: Click on “Create Rule” and choose “Modify Headers” from the list of available rule types.
Add a new header modification:
- Under “Action”, select “Add” or “Override”.
- In the “Header Name” field, enter Sec-CH-Prefers-Reduced-Transparency.
- In the “Header Value” field, enter true or false, depending on the preference you want to test.
Set the URL condition: Specify the URL or pattern where this header change should apply (e.g., https://your-website.com/*).
Save the rule.

By modifying this header, you can check how your site or app adjusts transparency or visual effects according to user accessibility preferences, ensuring a better user experience.