Customizable Title Bar Content Color

[Offroaders123]

I was testing around with the current standalone web app header theme color option present in the Web App Manifest and the <meta name="theme-color"> attribute, and I thought that it would be helpful if developers had the ability to change the color that is supplied to the window's title bar labels and window control buttons. Currently, the browser determines what the color for the content should be, and it applies a color that provides enough contrast to keep legibility between the theme color and the labels and window control buttons.

I can see how this may be an issue if one were to apply a color for the labels/window control buttons that doesn't allow for enough contrast for readability, however a possible solution to counteract this would be to use the current implementation of finding a high contrasting color, only if the one supplied by the developer doesn't meet the 4.5:1 contrast ratio, which is what most HTML elements with text are supposed to have.

This will be a helpful addition alongside the Window Controls Overlay API because matching an installed web app's window labels and window control buttons' color to the web app's interface color scheme will further improve design fluidity between system controls and the app's user interface, something that the Window Controls API is trying to solve with providing the ability for developers to customize the title bar.

Demo screenshots of the proposed idea and the possible solution to the content color contrast issue have been attached below.

Current Implementation - Display Mode: Standalone

Current Implementation - Display Mode: Window Controls Overlay
Title bar content does not match the web app's color scheme.

Proposed Idea - Display Mode: Window Controls Overlay
Title bar content is in line with the web app's color scheme.

Example of a Contrast Issue
In instances like the image below, the browser would use a fallback color that allows for more legibility based on the supplied theme color, such as using the default #ffffff in this case, because #ffffff would provide enough contrast between the title bar content and the web app's theme color.

[amandabaker]

This is an interesting idea that might be valuable as a standalone feature (not specific to WCO), since it would lead to better theming for all apps. 😊

A couple questions:

• With respect to the contrast issue, would you expect the browser to provide a mechanism to inform you that it did not accept your foreground text color?
• Would it be sufficient to just provide the text color, which in the case of Edge/Chrome is either white or black?

[Offroaders123]

Glad you like it as well! Should I move this suggestion to a different thread?

---

Question 1
With respect to the contrast issue, would you expect the browser to provide a mechanism to inform you that it did not accept your foreground text color?

• A possible way to show that the chosen content color doesn't meet the contrast requirements could be to mark the property in DevTools with an error icon, similar to how other manifest properties are marked when they do not meet their requirements.

Title Bar Content Color - DevTools

Title Bar Content Color - DevTools Error

---

Question 2
Would it be sufficient to just provide the text color, which in the case of Edge/Chrome is either white or black?

• While adjusting just the text color alone would be helpful, I think it would be the best scenario if both the text color and window-specific controls could be modified, as it may be visually confusing in certain designs if the text color doesn't match the window controls. In instances where a site's accent color has a hue, rather than being black, white, or gray, having the ability to change all elements to a colored variant would be the best use case in my opinion.

I came across a more applicable scenario where changing the content color would be more beneficial than my previous example, and I made a few demo screenshots of how that may be helpful there as well. They are based on the school grading site Infinite Campus.

Title Bar Content Color - Default
#5f6368 is the default content color supplied by the user agent when the supplied theme-color is #92c83e.

Title Bar Content Color - Themed
The color #455b10 is accented on multiple elements throughout the page already, so using it as the title bar's accent color for site information and window controls better ties the title bar together with the rest of the site, in my opinion.

---

Sorry if that was a little lengthy, I just thought I'd share that example as well, as I think being able to use a colored accent is more of an applicable use case for this proposal than just a gray one like I showed before. 🙂

*Edit: I put window-controls-overlay as the display type for the example manifest images, but it should have been minimal-ui to match the screenshots of the site that follow.