Yellow on white is an awful color choice for text

Glad to hear! I think I’m going to take a loonng break from CSS and Stylus heh

2 Likes

Think anoek said that 10 years ago :wink:

1 Like

I think we’re not quite there yet.

Today I wondered whether Kosh had some new status I hadn’t heard of before:

Screen Shot 2021-02-25 at 1.31.45 pm

It’s easier to read, but harder to understand what it means: these two players appear to be of a different “type” - gold vs brown.

This is what it looked like before:

Screen Shot 2021-02-25 at 3.43.40 pm

Clearly the same colour, albeit a little harder to read on the right.

3 Likes

Yes. Loser.
:rofl:
Congratulations on a very well earned win GaJ.

Back to topic: Is there a RGB based formula that can compensate for the optical illusion of a colour appearing different due to background colour?

3 Likes

I actually edited one of those pictures to keep that discrete, my friend :wink: :smiley:

You would think “surely” right, since there are all those illusions based on this sort of principle!

1 Like

Yes, there is. Colors of uniform brightness will make yellows and greens appear brighter than reds and blues due to human perception. Therefore, one must compensate by artificially making reds and blues brighter so that all colours are perceived as being of equal brightness. I use this technique regularly when presenting scientific data so as to avoid artificially highlighting unimportant features. I will find some links to a proper detailed discussion of this later and post them here.

1 Like

Actually, no, wait. Your question is slightly different. But presumably if they can do one then they can do the other…

I don’t think it will be easy to find a formula for this specific use case. But the relevant illusion is possibly the Bezold effect? I tried not to differ any more than the existing blues differ. But as @dragon-devourer mentioned, humans perceive yellow and blue differently.

@GreenAsJade I do agree with you, and I tried to make it so that we can play with the colors. A couple thoughts on our options:

  • lighten the light-theme gold
    • not a ton of wiggle room if we take the 3:1 contrast ratio seriously
    • easy to do
  • darken dark-theme gold
    • change aversion, might not look as good
    • easy to do
  • decouple the player boxes from the main themes
    • harder to do
    • e.g. dark.player_box_white_supporter = lighten(dark.supporter, 10%) or something

Because contrast across the page (excepting the game boxes) is important, I think that #2 and #3 are the options we should be considering.

1 Like

How long until we get back to scrapping colours and using shapes/badges instead!

3 Likes

Option #2 (Darken dark theme gold):

Chat included to see the how dark theme would change overall

@Kosh I covered up the game result with a box, so no one will see it.

Option #3

On dark (note contrast ratio on the light box is only 1.8:1):
Screen Shot 2021-02-25 at 8.39.12 AM
On light:
Screen Shot 2021-02-25 at 8.46.26 AM

Because I’m a light theme user, these options are equivalent to me. So I defer to you dark theme users to decide what looks best!

1 Like

No kidding >.<

From the WCAG:

Guideline 1.4 Distinguishable§

Make it easier for users to see and hear content including separating foreground from background.

Success Criterion 1.4.1 Use of Color§

(Level A)

Color is not used as the only visual means of conveying information, indicating an action, prompting a response, or distinguishing a visual element.

But I’ve decided there is no reason (besides the substantially increased prototyping effort) why we can’t use color as an indicator too.

1 Like

(Emphasis added)

So I think color plus badge is the kind of idea they’re getting at

Yes I see that. And if you read my post carefully, you’ll see I said there is nothing wrong with keeping color (as long as it doesn’t create other usability issues like low contrast)

But as you can see, it takes a lot of effort to find the “right” colors, especially when we have light and dark backgrounds on the same page.

Oh man, yeah, I’m agreeing with you :blush::+1:

One other idea I was thinking of… Could just make all colours customisable in settings: background, foreground, text, player names, special player names, etc. And themes could just be a selection of sensible defaults.

I would make solarized dark theme - super low contrast. Easy on the eyes if you can see it but nowhere near the 3:1 ratio :wink:

1 Like

Yeah!

I’m not against more customizability (well I do worry about “settings bloat”, but I can admit I’m probably quite alone in that). But that is another issue, and we still need to land on those “sensible defaults”!

I haven’t been following this too closely but noticed some other player colors used but not mentioned here (showing dark theme values):

An active/hover link color #0f74ff for the normal players:

image

(Other colors don’t seem to have a special highlight.)

A blue #539bff (the normal site link color?) and gray #888 for challengable and not-challengable players in ladders:

image

It’s odd that everyone is that slightly different shade of blue in the ladder, even supporters. On the other hand, supporters apparently get to keep their gold color in the navbar friends list, while normal players are a shade of gray.

If we’re cleaning up the colors, it might be a good time to make these more consistent.

3 Likes

Oh that’s interesting, the ladder row is overwriting the other colors. It probably makes sense for the unchallengeable players.

It happens for mods too eg top of the 9x9 ladder.

1 Like

Nice eye!

If the hover thing was a regression, I’ll fix it. Someone more knowledgeable than me will need to confirm!

The ladder thing definitely looks like my fault I’ll look into it.

The sidebar was like that by design I believe for consistency with the menu colors (?) I think consistency with other blues is a good idea too, but I won’t implement it myself :joy:

1 Like

Also happens in tournament chat for example and general site chat channels

1 Like

The short ladder view on the ladders page is much more colorful:

image

Also clicking around the ladder I noticed some very low contrast for the AGA Officials (which seems to be an issue wherever that light gray shows up - chats, player boxes, etc.):

image

Not sure what it means about my eyes being good or bad, but that’s really painful to look at.