#1: Gator (gator) on Jul 6, 2022

I have always had somewhat of an issue telling the difference between the blue and black clue numbers (especially the 1 clues) on the sides of the puzzles. I usually have to zoom in my browser resolution to 150% or greater to more easily see the difference. This becomes problematic on larger puzzles though. I was wondering if someone has a similar issue and what solutions they have come up with for this. I was also thinking that the name of the color could be displayed somewhere when the mouse cursor hovers over the clue number, but that would require code changes. Any feedback appreciated!

you can also futz with your monitor, so the blue looks different, but that would make the rest of the internet look weird. :)

My last computer was a used laptop and I could distinguish between blue and black, but not blue and green. With my present monitor I also have trouble with black and blue. I did futz a little as Kristen suggested and made a slight difference, but was afraid to go further. If the blue were made a bit lighter hue that would probably help, but I don't know how that works.

I sometimes have trouble but my solution is to hover the cursor over the clue and a popup will appear with the number in color. That popup, for me, is a little larger and the color easier to see.

The popup works for some people, but it never has for me. In Settings|Options|Hover Text, I have [For Clue Numbers Only] selected, but it has never worked for me on any setting.

My suggestion is to change the color of the blue numbers to a lighter blue. This would be difficult in the HTML mode since it would require new gifs for every number, but it would just entail changing the color code for the SVG mode.

Having a slightly lighter blue for the clue numbers would make them much more distinguishable but not make them stick out as being weirdly not the same color as the blue pixels

The hover does not work for me either. I did change it from HTML to SVG mode. It does make it a little easier to tell the black from the blue as it seems to inherently make the puzzle and clues larger.

Hm. When I hover my mouse over a clue number, the pop-up says the name and number, for example "blue 3."

I clicked on the "Settings" button at left, then on the "Options" tab, and under "Hover Text" it's set to "Clue Numbers Only." Also my Drawing Mode is set to HTML. Reminder that changes aren't saved automatically, so you need to click on "Save Your Changes" at the bottom of the page to change the setting.

I would like to make the color of the blue clues a little bit lighter, but re-creating the images of all the blue clue numbers is going to take some work, and getting them to match the look of the other clues may be impossible, so I haven't dug into it.

If Joe is correct and it's easy to lighten the shade of blue when people use SVG mode, should I? It would mean that people with HTML mode would be seeing a different shade of blue than people with SVG mode. But maybe that's okay?

(Non-geeky people: HTML mode and SVG mode are two different ways of drawing on a screen. You can use the Settings page to change which one your computer uses on this site.)

Another thought: I could lighten up the blue "1" clue image, for HTML mode. That would be easier than changing the entire set of images. Should I?

Joe, I know you've told me before, but what browser are you using, and are you in HTML or SVG mode?

I tried hovering my mouse over a clue number in several different browsers. It worked in Google Chrome, Opera, Firefox, and Microsoft Edge. The hovering only has the pop-up when I'm logged in, not on the front page puzzle. For whatever that's worth.

So I tried Edge and it is working there (not on Chrome). So I will switch over to that browser for webpbn purposes.

Which makes we wonder why it does not work on Chrome for me but does for others?

I tried messing with the colors and changing the blue. You can get it to be lighter; however, it makes everything (icons, while in applications, pictures on websites, etc.) look weird so was not worth it.

I accidently discovered something that helps on my monitor, at least. I had tried svg quite a while ago but I couldn't hover and get the colors so returned to HTML and forgot about it. I was given a TV which I am using for a monitor. It works great for everything else but try as I might I could not get the grids to appear as they should and it was impossible to solve puzzles. Finally, I recalled being able to swith to svg. I tried it and the grids appeared correctly but no hover. The other day I was looking at a puzzle I had just solved and took a good look at the numbers. Usually I ignore the numbers after I have solved a puzzle, but I noticed that with the grey background they now had I could distinguish the colors much easier. I experimented a bit and by swiping a whole row or column of numbers you can turn the background grey and make the colors stand out. You have to swipe the whole row or column or it doesn't work. Hope this helps others.

I have the most recent Firefox on win10 (64bit). I also have it in SVG mode because it scales much larger, and has clearer text. When I switched to html mode, the popups worked (but that's no good to me because of the size limitations).

I know there are several gifs that hold the html numbers, for the different sizes. I noticed that when my webpbn window was scaled (in the browser) to 200% it used the smallest numbers and the blue 1s were quite a bit lighter than the blacks. In case anyone wants to try that trick


Valerie, is the blue value stored as a constant for the SVG mode, or is it hard coded in each instance? If it is hard-coded, then you could just change the color value in the clue-rendering portions while leaving the pixel-rendering code the same so that the puzzles will end up looking the same.

Even if it is a constant, you could add a second constant array for the clue colors and then change the clue-rendering code to reference the new constant array

Just for the record, I'm using Chrome in Win10. For what it's worth, I'm using a 2 monitor system on my laptop - the second monitor is a 23" hooked up via HDMI cable.

I did take a recent vacation where I was on the laptop alone and smaller screen. I did have to use the hover trick frequently as my eyes are not what they used to be. Unless the puzzle is already in the "biggest" size, I typically go full screen and then as big as will fit without loosing any clues.

I've been intending for a long time to make a staging copy of the site, where I can test out new code before rolling it out on the live site.

I finally set that up. It is here:
https://staging.webpbn.com

You are welcome to log in there.

I copied all webpbn users and passwords to it, so you should be able to log in with your usual username and password. I copied puzzles with ID numbers under 10. I didn't copy over the discussions.

You are welcome to enter things there, but keep in mind that anything on the staging site may be deleted, so a better place to put things you want to keep is here on the main site.

On the staging site, I lightened up the blue 1 images. (There are six of them!)

Here's a test puzzle, on the staging site, with lots of black and blue ones, and a few twos and threes:
https://staging.webpbn.com/35294

If you'd like, please go try it out and see if the lighter blue 1 images are better.

I haven't dug into how SVG mode works yet. This should only affect HTML mode.

Comparing this test puzzle, that has a lot of black and blue 1's, on the staging site, where the blue 1's are a bit lighter-colored: https://staging.webpbn.com/35294 , with this puzzle on the main site that also has a lot of black and blue ones, and the blue is the way it's always been: https://webpbn.com/35799 , I don't think that lightening the blue ones made much of a difference. My new idea is what if the 1's of all colors were a pixel wider? I think that might help more.

What do you think?

If anybody is reading this, I would appreciate comments on the changes to the blue 1's on the staging site:
https://staging.webpbn.com/35294
versus how they look on the live site:
https://webpbn.com/35799

Please post feedback? Also, would making the 1's a pixel wider help? I think wider 1's, in all colors, would be easier to distinguish.

I used both links, staging and live...and have no trouble at all seeing the blue clearly...easily distinguishable from the black, without enlarging anything from the 100% magnification level. I also think wider 1's would be great, if it's not too difficult to do.

My only suggestion is to also look at the new blue with green clues as well. I've never had trouble telling blue from black, but great difficulty telling blue from green.

Thanks Billie - that is good to know. I'm hoping that maybe wider 1's will help make all of the colors more distinct from each other.

(I haven't widened the 1's yet -- still collecting comments on the current lighter blue 1's before changing the next thing.)

I am a fan of the lighter blue.

Both blues look fine for me. I think making the 1 wider would help me best.

Oddly my last computere was a laptop. On that display I had trouble telling blue and green apart. Then when I switched it was problems with blue and black. I'm trying to remember monitors from a long time ago. Didn't we used to have dials at the bottom of the monitor that gave us a lot more control on how our display looked?

I think 1 pixel wider would be good.

It is considerably easier for me to tell the difference between black and blue with the light blue color.

I agree with bpat #18

I've been making changes on the staging site to experiment with the colors, and I am hoping for lots of feedback from lots more people. It's at staging.webpbn.com

On the staging site, currently, in HTML mode (which is what most people see), the blue 1's are lightened, and the blue and black 1's are a pixel wider. In SVG mode (which most people don't see unless they choose it), the blue for clues and squares is lightened.

I'd appreciate your feedback.

I think the widened 1's look weird, but their colors are easier to distinguish. I'm thinking about experimentally widening the red and green 1's too, to see if that decreases the "looks weird" effect. Is it worth "looking weird" in order for the colors to be easier to distinguish? Or would "looking weird" bug people too much?

In SVG mode, I'm thinking of leaving the clues in the lighter blue but displaying the squares in the classic blue color.

I would appreciate feedback!

As an example, here is a puzzle on the staging site with lots of blue and black 1's:
https://staging.webpbn.com/35294
You are welcome to log in on the staging site and try out the other puzzles there, post puzzles, and test things to decide if they would work for you.

Reminder: If you want to change from HTML mode to SVG mode, these are the steps:
1) Click on "Settings," and then on the "Options" tab.
2) Under "Drawing Mode" select SVG.
3) Click on the Save button.
4) If you've looked at a puzzle in HTML mode and you go back to see it in SVG mode, your browser will remember and show it in HTML mode. To change it to SVG mode, view the puzzle, then right-click on a white area near the puzzle, and select "Reload Frame."

To switch back to HTML mode, repeat those steps but choose HTML as the drawing mode.

The main site and the staging site use different settings, so changing your settings on one site doesn't affect what you see on the other site.

It looks terrific, to me! The blue and black are easily distinguishable. How does this blue look next to green?

The 1s do look a bit oddly wide, but not in a way that would detract from solving the puzzle.

I agree that every color of 1 should be widened, for uniformity. :)

Kristen - Here's a puzzle that Joe posted on the staging site that has several colors of 1's in it:
https://staging.webpbn.com/35296

The clue for row 4 currently has a widened blue 1 and a normal red 1. They definitely look weird together!

Aha! That's also a good example of the blue next to the green. Hopefully, more chromatically-challenged users will chime in, but I'm even more in favor of widening ALL the 1s.

Much easier to see. And the other colors would look better if they were fatter. Unfortunately because of the TV moniter I use I have to use SVG orhterwise the grids don't look anything like they are supposed to. Unfornately the SVG doesn't seem to help the create page as the grids are still in a weird mode there for me.

The widened 1s are great! Agree with Kristen on uniformity.

Agree with Gator. Thanks Val.

Thanks for the feedback -- it is helpful!

For people who use SVG mode (the only people I know of who use it are Joe and Norma), how does the lightened blue on the staging site look to you? Should I lighten only the clues and not the puzzle squares, or lighten both? Is the lighter blue enough lighter?

To look at sample puzzles, there are links earlier in this thread that you can use to find them. Or try this one that Joe posted over there: https://staging.webpbn.com/35296

Hm. I widened the red and green 1's on the staging site. (But if you've visited it recently, your browser will probably remember the 1 images that you saw earlier and show you those instead of the changed images.) I am still not entirely happy with any of the widened 1's. I look at them and see a blob that I can't immediately identify, and then I figure out "Oh! This is a 1!" -- and I don't want newcomers to the site to be confused about what digit that blob is.

I wanted to sleep on the change in colors. Originally I thought that the blue field color should not change, but not strongly enough to "demand" it.

Having come back to it, I think that the lighter blue in field also works. The original blue is actually darker than the black (which is actually a dark grey). The new blue is lighter.

However, if the field color changes in SVG, it should change in HTML, so that images look the same to everyone.

Some comparison images:
Full color comparison: https://sta.sh/0j2dt80xiz8
The difference in lightness: https://sta.sh/01l93mj7tm7l
Use of blue in "grey-scale": https://sta.sh/03f5r503a3q

Several years ago I had a laptop which had no problem with black and blue but had a terrible problem with blue and green. I have seen others that say they have a blue and green problem. I am wondering if lightening the blue would help them also.

Remember when computer monitors came with the little wheels at the bottom of the screen that you could use to adjust the appearance? Too bad they did away with them.

Goto next topic

You must register and log in to be able to participate in this discussion.