Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Scroll bars under the dark theme have extremely poor contrast #101

Open
Ampflower opened this issue Dec 25, 2022 · 3 comments
Open

Scroll bars under the dark theme have extremely poor contrast #101

Ampflower opened this issue Dec 25, 2022 · 3 comments
Labels
bug Something isn't working

Comments

@Ampflower
Copy link

Why?

Accessibility issue, especially for long pages where scroll bars tend to be more useful than the scroll wheel or function keys. It is also not possible to quickly tell where you're at in the web page.

Expected visual

The scroll bar to have a contrast no worse than Windows 10's light theme scroll bars and Discord's dark theme scrollbars for the chat on the desktop client, which can already be borderline impossible to see at a glance.

Actual visual

The scroll bar's contrast ratio is too poor to be able to tell where the scrollbar thumb is within a second of looking at it on a fair amount of displays, making it impossible to use effectively when you need it.

ScrollbarThe scrollbar as rendered by Ungoogled Chromium 105.0.5195.125 with forced dark mode and dark web content enabled.

Extra notes:

Ungoogled Chromium 105.0.5195.125 (Official Build, ungoogled-chromium) Arch Linux (64-bit)
Active flags: /usr/lib/chromium/chromium --force-dark-mode --enable-features=OverlayScrollbar --force-dark-mode --enable-features=OverlayScrollbar --disable-features=GlobalMediaControls --enable-crashpad --flag-switches-begin --bookmark-bar-ntp=never --blink-settings=disallowFetchForDocWrittenScriptsInMainFrame=true --extension-mime-request-handling=always-prompt-for-install --keep-old-history --ozone-platform-hint=auto --scroll-tabs=always --enable-features=OverlayScrollbar,CopyLinkToText,GlobalMediaControlsModernUI,ParallelDownloading,ReaderMode,TabSearchMediaTabs:Also+show+Media+Tabs+in+Open+Tabs+Section/true,UseDownloadOfflineContentProvider,VaapiVideoDecoder,WebContentsForceDark:inversion_method/cielab_based/image_behavior/none/foreground_lightness_threshold/150/background_lightness_threshold/205,WebRtcHideLocalIpsWithMdns,WebRtcHybridAgc --disable-features=GlobalMediaControls,ClearDataOnExit,LiveCaption,MediaSessionWebRTC,WebRtcAnalogAgcClippingControl --flag-switches-end --ozone-platform=x11

KDE Plasma ~5.26.3 (uptime of 88 days with updates makes this uncertain) on Arch Linux with Linux 5.19.11-arch1-1 active. This is unlikely to matter to how Chromium renders the scrollbar, as it's using the CSS scrollbar rather than native.

At the time of noticing this, Redshift was active with a 3250K colour temperature and 80% brightness on top of the minimum brightness of both displays, which tends to amplify any low contrast issues such as this.

This cannot be reproduced on Firefox for as it doesn't implement any hooks for the webpage to override the scrollbar, instead electing to always render its own, as either an overlay, GTK's, or Windows'.

I have not yet started Chromium with only force dark to verify that the WebContentsForceDark (chrome://flags/#enable-force-dark) flag set to Selective inversion of select non-image elements is causing the poor contrast of the scrollbar.

I have also not yet tested to see if the light theme scrollbar of the webpage similarly has a poor contrast ratio yet.

@obj-obj
Copy link
Member

obj-obj commented Dec 25, 2022

Weird, the scrollbar is white for me on firefox and turns darker if I switch to light mode

@Ampflower
Copy link
Author

Weird, the scrollbar is white for me on firefox and turns darker if I switch to light mode

I've acknowledged that with:

This cannot be reproduced on Firefox for as it doesn't implement any hooks for the webpage to override the scrollbar, instead electing to always render its own, as either an overlay, GTK's, or Windows'.

Firefox will use its own scrollbar on any page, as it doesn't read the CSS that Chromium (and by extension, practically all common browsers minus Firefox) does.

@Southpaw1496
Copy link
Contributor

I have the inverse: Dark mode contrasts fine, but light mode is basically invisible. I don't know why there even is a custom scroll bar, I for one much prefer my system scrollbar.

@ix0rai ix0rai added the bug Something isn't working label Jun 26, 2023
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
bug Something isn't working
Projects
None yet
Development

No branches or pull requests

4 participants