[IDEA] Improve contrast for muted text

[EvidentlyCube]

Is your feature request related to a problem? Please describe. The default color for Vanilla palette's muted text has terrible contrast:

I think it should be improved. To make it pass the AAA level it has to be at least #595959:

Or #767676 to pass the AA level:

Describe the solution you'd like I'd like the muted-foreground color in Vanilla palette to be either #767676 or #595959. I have a fairly decent eyesight and I still have trouble reading it.

Describe alternatives you've considered It affects me in my plugin development as I want to make the adapt to user's palette by using their colors. Best I can do is make my own CSS class with something like this:

.my-muted {
    color: <<colour foreground>>;
    opacity: 0.75;
}

But I'd much rather prefer to use user's selected palette.

[EvidentlyCube]

I also checked how things look in other default palettes and some notes:

• Blanca - Contrast of only 2.84:1
• Blue - Contrast of only 2.84:1
• Contrast (Dark) and Contrast (Light) - muted text displays the same which I consider expected since it's supposed to be high contrast
• Cupertino Dark - Contrast of 5.13:1 (Passes AA, misses AAA)
• Dark Photos - Contrast of 1.35:1, absolutely terrible!
• Desert Sand - Contrast of only 2.16:1
• Gruvbox Dark - Contrast of 6.75:1 (Easily passes AA, misses AAA)
• Muted - Contrast of only 1.91:1, terrible!
• Nord - Contrast of only 1.36:1, absolutely terrible!
• Rocker - Contrast of only 2.84:1
• Solar Flare - Default text has contrast of 4.12:1 (Doesn't pass AA level), muted is measly 2.47:1
• Solarized Dark - Muted text has actually better contrast than the regular text, muted has contrast 5.61:1 and regular text is 4.74:1. Consider swapping?
• Solarized Light - Muted text has actually better contrast than the regular text, muted has contrast 4.98:1 and regular text is 4.12:1. Consider swapping?
• Spartan Day and Spartan Night actually use opacity so no clue how to treat it here
• Twilight - Muted text has actually better contrast than the regular text, muted has contrast 14.35:1 and regular text is 6.84:1. Consider swapping?

But truth be told, I'd just improve the contrast of ones where contrast is below 4.5, which is enough to pass AA level for small text. And for ones where default text color has worse contrast than that or than muted text just do nothing.

[pmario]

IMO you talk about "muted" text. I'm OK if the default text has a contrast ratio of 7:1 but "muted"?

IMO muted is used to show disabled stuff and elements that change contrast on hover,

[EvidentlyCube]

IMO muted is used to show disabled stuff and elements that change contrast on hover,

@pmario Counterpoints:

• Disabled stuff should still be at least somewhat readable. 2.84 is tough even for someone with good eyesight.
• If it changes contrast on hover it's very unfriendly for mobile devices
• I want to say in my experience muted text is mostly used for text that's less important than something else - hints, descriptions and such. But perhaps I've just been naming it wrong
  • Though Bootstrap uses fairly dark and readable gray for muted text. They also have an example of using muted as a secondary text
• TW itself uses tc-muted for descriptions of tools which would fit my above usage pattern
  • And descriptions in control panel for toolbar items. And I think that's pretty much all it is used for.
• The color itself has a bit more usage:
  • Including disabled elements
  • Quote left bar
  • Button background
  • Some secondary texts

All in all I'd say it's used a lot for secondary text in TW so it makes sense to treat it like that, rather than just something explicitly for disabled/hoverable elements.

[pmario]

You are right, in Palette-Manager I did also mark it as problematic: muted-foreground is used 43 times in vanilla.

I think we need a new name for "disabled-foreground" and "disabled-background" so we can use muted with more contrast. So I think I support your request

[pmario]

I also checked how things look in other default palettes and some notes:

I think all of them have to be checked. Eg: Rocker is terrible, It hides some elements on-hover ... Which is also the case for some others.

I think the new palette-manager edition would make it easier to see the problems.

I found out, that there is a general problem, that some colours are used for completely wrong elements. .. So IMO it would be good to have a closer look in general and fix that too.

IMO foreground muted can be fixed as the first step .. I think

[EvidentlyCube]

I think a neat thing to have would be a kind of component explorer page which would have all the components displayed and described to make styling easier in general (did someone make anything like that yet?). I think it might be a better idea to convert this issue into a larger "do things properly" one (or create a new one and close this) since this is just one issue out of potentially so many and it's not like there is any hurry in getting this one done right now.

[pmario]

May be --> [IDEA] Improve contrast in TW palettes for better readability .... or something similar

[pmario]

I think a neat thing to have would be a kind of component explorer

With the palette-manager I did try to use "real UI elements" so to be able to interact with them when changing colour. There is no help text though.

But I would welcome some improvements for the preview tiddlers, which are part of the plugin. They are still somewhat rudimentary. ... Some have "todo" in them and some have "I don't know" (how it is used ;)

[Jermolene]

I'd like the muted-foreground color in Vanilla palette to be either #767676 or #595959. I have a fairly decent eyesight and I still have trouble reading it.

I concur @EvidentlyCube, and would favour #595959.

There's a very strong case for fixing as many of the contrast issues that we can, so I'd be very happy to see a PR.