Websleuths is changing our colors

[SteveS]

Forgive me if this sounds pedantic - that's not what I'm going for, just illustrating my thought process!

From a UI-philosophy position, having text enclosed within a block that's visually separated from the background conveys meaning. For example, the background of the block above this text, being slightly darker than this text-block's background, conveys that it's separate. It's obvious to anyone who's visited web forums for years that this means it's a quote from a previous poster.

It conveyed all that meaning without me having to label it with "THIS IS A QUOTE".

To convey that with just borders is possible, but modern web-design standards aren't leaning in that direction. We want Websleuths to grow, and if it looks looks old and outdated, they'll think the content is also old and outdated, and likely leave. That said, our long-time users won't appreciate big change. It's up to me and my team to strike a balance, and that can be harder than writing the code itself!

I could make the background (what is white on the High-Contrast - Light theme) some accent-color. Going with the blue-theme, I could experiment with a light desaturated-blue, and move in a stepped-fashion towards white as we get closer to the actual text-editor.

Thanks for the reply, but I don't think you actually addressed my question. Or maybe you did, I'm not sure. So I will be bit pedantic in this reply, to try to make sure I am clear, and please forgive me if it's too belaboring or feels off-putting, because it's not meant to be. I do appreciate your willingness to work on this and allow feedback and flexibility.

The High Contrast mode [Light} is being offered to accommodate those whose eyes (or personal preferences) are for the easiest readability, right?
And you have all the other other modes that offer fancier color and new "modern" updated feel, for those who would enjoy that.

If I understand you correctly, what I am hearing is that it would be easy to make the background white, but it's not quite as fancy, so it's being made a different color ever so slightly.

Isn't the High Contrast [Light] mode being created and offered to try to get an easy-to-read format for aging eyes, as perhaps its main purpose? So how is opting for the not-quite-white color (which LESSENS the readability in that format) going to be helpful to the subset of your patrons who opt for that format because they want and need the MOST readability possible?

Let me clarify that I am not talking about the quote box background. I understand how that box needs to be a contrasting color scheme to differentiate. When I express the need for a white background, I am talking about the general background on which I write my post and on which it is read. So far, it is being created as some sort of off-white or light blue or light gray or similar background, which only serves to make it less contrast and harder to read for those of us with aging eyes. For me, it makes the black lettering look gray, and harder to read (and more eye strain in using your site), because of the lessened contrast.

My request is that in that one High Contrast [Light} mode, you please do the color modifications in other areas besides the basic place to read and write, rather than sacrificing basic readability. Offering one "maximal readability" option (pure-black letters on pure-white background) in that one color format option still leaves all the other mode options and dark schemes available for those who can easily utilize less contrast and like the variety.

Thanks for your consideration.

 

[Gemmie]

I just realized something when I went to bookmark a post in a many paged DM. There is no Bookmark link. Is that by design? I know DMs are a little different than MTs. Thanks.

 

[slowpoke]

Thanks @Bounceycat. Admittingly, I find screen shots are the easiest way for me to learn. I'm so visual, huh. Snip and Sketch screenshots are a blessing. Still haven't found the new app you talked of because I don't know what you consider the "hamburger menu" and which three lines. Thank You though. ​

^snipped

I didn’t see any hamburger menu, either. I use an iPad the majority of the time. But then I looked on my iPhone, and there it was!

See screenshots:

What my iPad looks like. Top of the Home page. No hamburger icon.

BUT! What my iPhone looks like.
Left pic is the top of the Home page. There’s the hamburger menu icon (the 3 horizontal lines in the black area next to the WS logo.
Right pic shows when I tap the hamburger icon, this opens up. At the bottom, it says “Install the app”.

 

[Fraize]

^snipped

I didn’t see any hamburger menu, either. I use an iPad the majority of the time. But then I looked on my iPhone, and there it was!

See screenshots:

What my iPad looks like. Top of the Home page. No hamburger icon.

Ah, that app is also a PWA that turns Websleuths into a shortcut link you can place on your iPad's desktop.

 

[Curious Me]

Offering one "maximal readability" option (pure-black letters on pure-white background) in that one color format option

RE: High Contrast Light Theme
This is MOO, being brutally honest. Sometimes the truth hurts.
I agree we need pure black letters and please a larger text size.
Not sure I'd want a bright glaring white read background though. Just darker bigger text.

The trend for light gray text is a real turn off for me. I go to forum sites and blogs to read, and I don't care if they look modern, so much as they're easy to read. People on WS are reading here for hours sometimes.

I'm in High Contrast Light now and this text size is too small and it's not black. Even a Light Theme in a High Contrast should have impact, and not appear washed out. I think the body of the text ends up as a weak impact contrast for those that need easy to read.

Testing readability. The text size of 15 seemed bigger in the old Orange-Black Theme, and even then in some fonts it was set up to not be black. That why I always tried to darken the Verdana font ink color, but couldn't. Now, this text size on the Light Theme seems even smaller than the old site's size that was 15. Now it looks so small. This is size 18. I wish we could have a happy medium. ​

 

[SteveS]

RE: High Contrast Light Theme
This is MOO, being brutally honest. Sometimes the truth hurts.
I agree we need pure black letters and please a larger text size.
Not sure I'd want a bright glaring white read background though. Just darker bigger text.

The trend for light gray text is a real turn off for me. I go to forum sites and blogs to read, and I don't care if they look modern, so much as they're easy to read. People on WS are reading here for hours sometimes.

I'm in High Contrast Light now and this text size is too small and it's not black. Even a Light Theme in a High Contrast should have impact, and not appear washed out. I think the body of the text ends up as a weak impact contrast for those that need easy to read.

Testing readability. The text size of 15 seemed bigger in the old Orange-Black Theme, and even then in some fonts it was set up to not be black. That why I always tried to darken the Verdana font ink color, but couldn't. Now, this text size on the Light Theme seems even smaller than the old site's size that was 15. Now it looks so small. This is size 18. I wish we could have a happy medium. ​

CM, are you aware that the existing/old background has been white all along? At least, it is notably whiter than the High Contrast (Light) format being proposed.

You now see High Contrast (Light) format letters as gray (and request black), but fyi I think the letters in the High Contrast (Light) are indeed black already! But they LOOK gray or faded to you (and me too) because of the change to an off-white or pale blue or gray background that offers less contrast.

I thought like you, until I did side-by-side browser windows (previous Orange-Black, vs new High Contrast [Light]) to try to understand what I am seeing and why it's harder to read. When I did, the letters themselves in High Contrast (Light) side-by-side comparatively appear to be as dark as before, but the background is now darker, reducing the contrast, making the letters now look faded or gray as a result by being on a darker background. As I understand it, that's how the eye perceives images and color, in a comparative way. IIUC, the way for us to now get "darker (blacker) text" would be to make the background white again, because the text as proposed is already as dark as it can be.

Oh, and btw, in case you don't know, you can manipulate text size in a browser window, especially on a computer. You type "Ctrl" and "+" at the same time to increase text size in that window, and "Ctrl" and "-" to reduce text size.

 

[Fraize]

The font-pitch on Black-Orange was 15px. It's the same on Websleuths_2025 and on the High-Contrast version. The difference is the font.

Black-Orange used Trebuchet while Websleuths_2025 uses Segoe. Here are the two fonts next to each other, zoomed in tight:

They're not all that different – if anything, Trebuchet is more condensed horizontally – but the Black-Orange designer set a line-height of 24px while we're set to 21px for the line-height. A line-height of 24px would make the text seem larger and more expansive.

Best practices for line-height as a function of font-pitch is a multiplier from 1.2 to 1.5. This means that if your font is 15 pixels high, your line-height should be 15 x 1.2 = 18px to 15 x 1.5 = 22.5px. Websleuths_2025 has a multiplier of 1.4, within best-practices, but Black-Orange had a multiplier of 1.6.

This isn't an elaborate way for me to say, "if you like the old font, you're wrong!" But I am trying to follow best-practices for UX-design, which means pleasing the masses, but can also mean leaving some by the wayside. I'm trying to help, but I won't be able to make every change requested. I may solve problems in an unexpected way!

 

[friendlysleuther]

The font-pitch on Black-Orange was 15px. It's the same on Websleuths_2025 and on the High-Contrast version. The difference is the font.

Black-Orange used Trebuchet while Websleuths_2025 uses Segoe. Here are the two fonts next to each other, zoomed in tight:
View attachment 570777
They're not all that different – if anything, Trebuchet is more condensed horizontally – but the Black-Orange designer set a line-height of 24px while we're set to 21px for the line-height. A line-height of 24px would make the text seem larger and more expansive.

Best practices for line-height as a function of font-pitch is a multiplier from 1.2 to 1.5. This means that if your font is 15 pixels high, your line-height should be 15 x 1.2 = 18px to 15 x 1.5 = 22.5px. Websleuths_2025 has a multiplier of 1.4, within best-practices, but Black-Orange had a multiplier of 1.6.
View attachment 570781
This isn't an elaborate way for me to say, "if you like the old font, you're wrong!" But I am trying to follow best-practices for UX-design, which means pleasing the masses, but can also mean leaving some by the wayside. I'm trying to help, but I won't be able to make every change requested. I may solve problems in an unexpected way!

I get it
It’s just hard for me to read


Wish you would consider incorporating the blue more into the light theme, practically just swapping out the orange for blue so we can get that contrast back!

 

[Ghostwheel]

I have BLUE on my high contrast light . YES!!!!!

 

[Ghostwheel]

I have BLUE on my high contrast light. YES!!!!!

Quote box

 

[Curious Me]

Just things I notice, but no big deal. For some reason I still have the old W logo symbol on one of my tiles. Old logo does show up more plainly as a W. ​

More subdued, it's harder to find on my tabs than before.

 

[Ghostwheel]

I like this. White background, easy to see quote box, dark letters, blue for the poster. I can easily read it desktop and phone.

 

[Curious Me]

I'm trying to help, but I won't be able to make every change requested. I may solve problems in an unexpected way!

@fraize, I was in the Light mode, but just tuned into High Contrast Dark and noticed another couple of surprises. Two things I wished for for the Dark theme. (1) The quoter's name shows up more now. (2) The quote box has more color and shows the quote box with contrast. Thank You. I think you did a fantastic job on the High Contrast Dark.​

 

[GXP Sleuther]

I wondered what was going on.. tried to look for settings for like 20 minutes and gave up.

 

[Curious Me]

Two things I wished for for the Dark theme.

@fraize, maybe make it three things because I could swear the text in the High Contrast Dark isn't as glaring white now. Is it my imagination? I see a tint to the text. In any case, everytime I use the Dark it looks better. We're talking about Art. ​

 

[Gemmie]

Just things I notice, but no big deal. For some reason I still have the old W logo symbol on one of my tiles. Old logo does show up more plainly as a W. ​

View attachment 570926

More subdued, it's harder to find on my tabs than before.
View attachment 570927

I totally agree but figured it was a nit so hadn't said anything. I figured I could simply aim for the faint, washed out tabs (mine are tiny, unlike yours, because I have so many open in the same window). However, it's actually easier said than done. Sure, I can do it, but it actually takes effort on my part.

With that said... I've noticed that some didn't use to have a tiny red dot in one corner, now they all do so not as washed out and faint with that red dot. I guess I could always aim for the small red dot. lol As I said, it's a nit but something not as faint would be ideal.

 

[Anxala]

Love the new look. So fresh and spring-like!

Appreciate that it's not for everyone but I love it.

 

[AZDesertGal]

I also prefer the new look. There may be bugs to be worked out, but with all the heaviness of the content in these threads, less solemn colors are probably a better choice. Orange and black made me think of Halloween, and all the bad stuff that goes on during that time of year.

 

[Curious Me]

With that said... I've noticed that some didn't use to have a tiny red dot in one corner, now they all do so not as washed out and faint with that red dot. I guess I could always aim for the small red dot. lol As I said, it's a nit but something not as faint would be ideal.

Yes, the red dot. Hmm... maybe it's just us being urged to chase the red dot because we are cat avatars. Sometimes the red dot is not there. Oh, and look, now both tiles have the new W. That happened overnight. No red dots today though.

These are most used tiles on my home page that I set up which ones I want to see.

I'm using a home computer with a big screen monitor. So, it's no wonder I notice most changes, and should be able to read text with ease on this big screen. On a phone might be a different story.
​

I was on High Contrast Dark theme when I typed that, and now switched to Light theme to check that one out. Posters keep saying they like the new look, but don't say which theme they're using.

​

 

[chaz]

I have noticed the red dots too and they are only there if I have one or more alerts.