search

elementary / stylesheet

The GTK Stylesheet for elementary OS
https://elementary.io
GNU General Public License v3.0
320 stars 75 forks source link

Flat button highlights are too low contrast #1043

Open hanaral opened 3 years ago

hanaral commented 3 years ago

What Happened

The buttons at the bottom of appcenter listings are super hard to read when highlighted

Expected Behavior

highlighting a button is flat and also uses a dimmed font colour should make its text foreground contrast well (potentially just use the normal button focus foreground)

Steps to Reproduce

  1. Open a listing in appcenter
  2. Go to the bottom of the listing
  3. Focus any one of the flat buttons

Platform Information

elementary OS Early Access, up to date

danirabbit commented 3 years ago

Can you provide more information about reproducing the issue? Which accent color are you using? Light or dark style? A screenshot of which buttons you're referring to etc

stradicat commented 3 years ago

For example, when keyboard-navigating with Tab between button options, like Cancel or Accept, the accent color is mostly applied to the active button's outline, and very slightly as a tint on the active button's body. The contrast is low, at least on the Light theme.

Perhaps a lower transparency index for the tint would suffice.

cassidyjames commented 3 years ago

Based on my reading of the initial issue report, @hanaral was talking about the focused button in the footer of AppCenter? But more information including the accent color and light or dark style would be helpful so we can easily contrast-check that.

Screenshot from 2021-08-24 15-50-46

@dennismayr that sounds like something different than what @hanaral is talking about here, please open a new issue that's specific to what you're seeing—with screenshots if possible. ;)

stradicat commented 3 years ago

It's related, but as you say, the appearence is different. I'll open a couple of issues related to visual contrast, including screenshots.

hanaral commented 3 years ago

@cassidyjames I was probably particularly talking about when they are highlighted with the Banana accent: image while it looks OK in the screenshot, the already gray button looks far too lose in tone to the highlight irl for example, Blueberry and Strawberry look fine on these buttons while Grape and Banana don't look so contrasty in real life:

IMG_0386 IMG_0387 IMG_0385 IMG_0388 not sure if this warrants another issue for binary colours like blue and red being far more stark (comp. to yellow etc)