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

Reported by nick rundy on 2011-02-19
140
This bug affects 35 people
Affects Status Importance Assigned to Milestone
Ayatana Design
Undecided
Unassigned
One Hundred Papercuts
High
Unassigned
Ubuntu theme
Undecided
Unassigned
ubuntu-themes (Ubuntu)
High
Unassigned

Bug Description

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) wrote :
nick rundy (nrundy) wrote :

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) wrote :

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.

Changed in gnome-session (Ubuntu):
importance: Undecided → Low
status: New → Incomplete
Matt Joiner (anacrolix) wrote :

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

Changed in gnome-session (Ubuntu):
status: Incomplete → Confirmed
affects: gnome-session (Ubuntu) → light-themes (Ubuntu)
Adam Niedling (krychek) wrote :

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.

Adam Niedling (krychek) on 2012-05-12
Changed in light-themes:
status: New → Confirmed
nihop (nihop) wrote :

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.

tags: added: accessibility usability
nihop (nihop) on 2012-05-13
summary: - Scroll-bar lacks sufficient contrast to easily identify its position in
- the scroll-track
+ (Non-overlay) scroll-bar lacks sufficient contrast to easily identify
+ its position in the scroll-track
askuhn (askuhn) wrote :

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) wrote :

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

Changed in hundredpapercuts:
status: New → Opinion
Changed in light-themes:
status: Confirmed → Opinion
Changed in light-themes (Ubuntu):
status: Confirmed → Opinion
Yann Dìnendal (yannbreliere) wrote :

Bugs are marked Incomplete while waiting for design input.

Changed in hundredpapercuts:
status: Opinion → Incomplete
Changed in light-themes:
status: Opinion → Incomplete
Changed in light-themes (Ubuntu):
status: Opinion → Incomplete
Martin Capitanio (capnm) wrote :

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) wrote :

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) wrote :

The issue is the same in Ubuntu 13.04.

MestreLion (mestrelion) wrote :

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

Nicolas Krzywinski (nsk7even) wrote :

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

Adam Niedling (krychek) on 2013-11-01
tags: added: saucy
tags: added: a11y
removed: accessibility
affects: light-themes (Ubuntu) → ubuntu-themes (Ubuntu)
Changed in ubuntu-themes (Ubuntu):
importance: Low → High
status: Incomplete → Confirmed
affects: light-themes → ubuntu-themes
Changed in ubuntu-themes:
status: Incomplete → Confirmed
Changed in hundredpapercuts:
status: Incomplete → Triaged
importance: Undecided → Medium
Changed in ayatana-design:
status: New → Confirmed
Changed in hundredpapercuts:
importance: Medium → High
Changed in ubuntu-themes (Ubuntu):
status: Confirmed → Triaged
To post a comment you must log in.
This report contains Public information  Edit
Everyone can see this information.

Duplicates of this bug

Other bug subscribers