Accessibility Request: High Contrast Management

[malisipi]

Motivation

Most of browsers has a high contrast mode that enables if OS is themed by a high contrast theme. Supporting browsers default behavior is good for most usage cases however some devs might want to create custom high contrast theme to ensure high contrast theme is not breaking some UI. Because auto-theming is not working fine for all web applications. It has some problems;

• Low contrast due to unexpected re-theming. If application is using dark theme and OS has light high contrast theme, it will cause some light icons will placed on light backgrounds. (It also causes reverse, app is using light theme however OS is using dark high contrast theme)
• No borders on some popups, dialogs and UI objects. It may some confusion between users, You may not understand the dialog where starts/ends and it will not help about accessibility.
• Some applications needs different text colors than high contrast text color, for example code editors like VSCode. VSCode's high contrast theme has support for syntax highlighting.

Description

So WebUI needs a option to detect and change behavior of browser about high contrast. It may help give more accessibility for users and more freedom for developers.

Same App Example without High Contrast Theme	Same App Example with High Contrast Theme

Example code

I wrote some API examples for this situation. (API names and behavior should be re-considered to save consistent.)

(webui::window)->set_browser_high_contrast_support(bool is_enabled){
    // Enables/Disables the browser support
};
bool webui_is_high_contrast_enabled(){
    return bool; // Returns OS high contrast theme enabled
    // Will return OS high theme state, ***not browser support state***
};

function webui_is_high_contrast_enabled(){
    return bool; // Returns OS high contrast theme enabled
    // Will return OS high theme state, ***not browser support state***
}

[hassandraga]

Thank you for the suggestion. Yes it's a good point, but the issue is on Linux the WebUI library may depend on GTK (dev)... I'm not sure yet. Another thing is I don't know if all web browsers support this or not, let's test and see.

[malisipi]

Edge and Chrome is supporting the high contrast mode as I tested. However I am pretty sure about most of Chromium browsers and Firefox are supporting that by default. We should a flag to disable high contrast support.

To make WebUI independent, we can read GTK and KDE config files about the theme and if we detect high contrast enabled, we can report it to the application to disable or change CSS.

I would work about the API support.

[malisipi]

I can disable High Contrast support for Chrome, Firefox and Edge (and probably other untested chromium browser).

Firefox	Chrome	Edge

Chromium browsers disable the feature by adding a command line flag however Firefox requires a change on profile. So I created a new profile for Firefox by adding "-NoHC" suffix.

Now, I need to implement OS high contrast theme detection.