(Non-overlay) scroll-bar lacks sufficient contrast to easily identify its position in the scroll-track

[nick rundy]

Binary package hint: gnome-session

The scroll-bars that appear on the right-side and bottom of gnome windows lack sufficient contrast to the scroll-track. I have difficulty identifying where in the scroll-track the bar is positioned. I often mistake the background of the scroll-track as the scroll-bar itself. I'm using Inverted Control theme. More contrast and better color separation is needed here.

ProblemType: Bug
DistroRelease: Ubuntu 10.04
Package: gnome-session-bin 2.30.0-0ubuntu1
ProcVersionSignature: Ubuntu 2.6.32-28.55-generic 2.6.32.27+drm33.12
Uname: Linux 2.6.32-28-generic i686
Architecture: i386
Date: Sat Feb 19 09:19:22 2011
ExecutablePath: /usr/bin/gnome-session
InstallationMedia: Ubuntu 10.04.1 LTS "Lucid Lynx" - Release i386 (20100816.1)
ProcEnviron:
 LC_TIME=en_GB.UTF-8
 LANG=en_US.utf8
 SHELL=/bin/bash
SourcePackage: gnome-session
XsessionErrors: (polkit-gnome-authentication-agent-1:1387): GLib-CRITICAL **: g_once_init_leave: assertion `initialization_value != 0' failed

[nick rundy (nrundy)]

I often mistake the scroll-track as the scroll-bar because there is not enough contrast between the two and the rest of the window.

http://img207.imageshack.us/i/scrollbar.png/

[Pedro Villavicencio (pedro)]

Thank you for taking the time to report this bug and helping to make Ubuntu better. The issue that you reported is one that should be reproducible with the live environment of the Desktop CD of the development release - Oneiric Ocelot. It would help us greatly if you could test with it so we can work on getting it fixed in the next release of Ubuntu. You can find out more about the development release at http://www.ubuntu.com/testing/ . Thanks again and we appreciate your help.

[Matt Joiner (anacrolix)]

This bug is a very serious accessibility issue. I'm barely to make out the scrollbar/trough contrast.

[Adam Niedling (krychek)]

I agree, this is a serious problem. Even in Precise alpha 2, the scrollbar is gray on gray background. I tested it with Firefox. I recommend the papercuts project to take a look at this.

[nihop (nihop)]

Ivan writes in duplicate of this bug number 563474: "In my opinion it's good solution just to set "colorize_scrollbar" to TRUE in theme gtk-2.0/gtkrc file." I agree with him.

[askuhn (askuhn)]

Achieving an effect similar to "colorize_scrollbar" that nihop and Ivan mentioned, I tweaked some values in gtkrc and (accidentally) created a more subtle change that provides some contrast. My related post here: http://askubuntu.com/a/114018/46882

My vision is fine and I have a difficult time with the default scrollbars (especially if using ambiance/radiance on a large screen, such as my television). I look forward to seeing this resolved. Thanks :)

[Chris Wilson (notgary-deactivatedaccount)]

I've forwarded this to Ayatana Design and marked as Opinion until they give feedback.

[Yann Dìnendal (yannbreliere)]

Bugs are marked Incomplete while waiting for design input.

[Martin Capitanio (capnm)]

This is really annoying (but still better than the overlay monstrosity :-)

It can be simply fixed by editing:
/usr/share/themes/Ambiance
gtk-2.0/gtkrc and gtk-3.0/gtk-widgets.css

My current "orange" quick-fix is (I didn't bother to invert the white gtk3 border):

diff --git a/gtk-2.0/gtkrc b/gtk-2.0/gtkrc
index 6da693e..29fa473 100644
--- a/gtk-2.0/gtkrc
+++ b/gtk-2.0/gtkrc
@@ -105,7 +105,7 @@ style "default" {
                lightborderstyle = 1
                listviewstyle = 2
                progressbarstyle = 0
- colorize_scrollbar = FALSE
+ colorize_scrollbar = TRUE
                menubaritemstyle = 1
                menubarstyle = 1
                menustyle = 0
@@ -232,7 +232,7 @@ style "scrollbar" = "button" {
        engine "murrine"
        {
                border_shades = {0.95, 0.90}
- roundness = 20
+ roundness = 3
                contrast = 1.0
                trough_shades = {0.92, 0.98}
                lightborder_shade = 1.3
----
diff --git a/gtk-3.0/gtk-widgets.css b/gtk-3.0/gtk-widgets.css
index 51d817c..0ce659d 100644
--- a/gtk-3.0/gtk-widgets.css
+++ b/gtk-3.0/gtk-widgets.css
@@ -1544,12 +1544,13 @@ GtkScale.mark {
 /*************
  * scrollbar *
  *************/
+@define-color blk #464540;
 .scrollbar {
     -GtkScrollbar-has-backward-stepper: 0;
     -GtkScrollbar-has-forward-stepper: 0;
     -GtkRange-slider-width: 13;

- border-radius: 20px;
+ border-radius: 3px;

     -unico-border-gradient: -gtk-gradient (linear, left top, left bottom,
                                            from (shade (@bg_color, 0.74)),
@@ -1584,8 +1585,10 @@ GtkScale.mark {
 .scrollbar.slider.vertical:hover,
 .scrollbar.button.vertical {
     background-image: -gtk-gradient (linear, left top, right top,
- from (shade (@bg_color, 1.08)),
- to (shade (@bg_color, 0.92)));
+ from (shade (@blk, 1.08)),
+ to (shade (@blk, 0.92)));
+
+/* background-color:#e96d3b; */
     border-style: solid;
     border-width: 1px;

@@ -1603,8 +1606,8 @@ GtkScale.mark {
 .scrollbar.slider.horizontal:hover,
 .scrollbar.button.horizontal {
     background-image: -gtk-gradient (linear, left top, left bottom,
- from (shade (@bg_color, 1.08)),
- to (shade (@bg_color, 0.92)));
+ from (shade (@blk, 1.08)),
+ to (shade (@blk, 0.92)));

     -unico-border-gradient: -gtk-gradient (linear, left top, left bottom,
                                            from (shade (@bg_color, 0.74)),

[Augustine Souza (aesouza2008)]

I use the Ambiance theme. I fixed my Chrome scrollbar thumb and trough contrast problem by editing /usr/share/themes/Ambiance/gtk-2.0/apps/chromium.rc.
Here are the relevant lines (#26, #27, and #28):
  ChromeGtkFrame::scrollbar-trough-color = shade (0.912, @bg_color)
  ChromeGtkFrame::scrollbar-slider-prelight-color = shade (1.04, @bg_color)
  ChromeGtkFrame::scrollbar-slider-normal-color = @bg_color

[Adam Niedling (krychek)]

The issue is the same in Ubuntu 13.04.

[MestreLion (mestrelion)]

Any news on Ayatana Design feedback? Is there a link to a relevant thread in their mailing list?

[Nicolas Krzywinski (nsk7even)]

I would like to see this fixed also as the standard contrast becomes invisible when the sun is shining.
Here I described how to fix it in a natural way, it is not perfect but kind of harmonic from my point of view: http://askubuntu.com/questions/192130/how-to-change-color-and-width-of-non-overlay-scrollbars-in-ubuntu-12-04/321608#321608

[Adolfo Jayme Barrientos (fitojb)]

Since Ubuntu switched to using upstream GTK+ overlay scrollbars, the non-overlay ones are orange as well.

[Adolfo Jayme Barrientos (fitojb)]

Oh, reopening since the fix for GTK+ 2-based applications still has not landed.