website-v2 icon indicating copy to clipboard operation
website-v2 copied to clipboard

Contrast issue with brand color

Open raynecloudy opened this issue 11 months ago • 13 comments

i'm surprised nobody else has brought this up yet

white-on-orange

black-on-orange

raynecloudy avatar Jan 20 '25 10:01 raynecloudy

https://www.google.com/url?sa=t&source=web&rct=j&opi=89978449&url=https://www.bounteous.com/insights/2019/03/22/orange-you-accessible-mini-case-study-color-ratio/&ved=2ahUKEwjC3cnJo4SLAxVInf0HHc_DHOYQFnoECBoQAQ&usg=AOvVaw275GC7MfHruGEKy3p5SdGH

Secret-chest avatar Jan 20 '25 12:01 Secret-chest

https://ux.stackexchange.com/a/147684/158185

Secret-chest avatar Jan 20 '25 12:01 Secret-chest

There is also an issue about this on the main repository. https://github.com/ScratchAddons/ScratchAddons/issues/7357

Samq64 avatar Jan 20 '25 13:01 Samq64

Yep. This is a problem that I'm aware, but unsure of what to do. I'm trying to create a higher constrast by darkening the orange to get it to at least AA, but it's kind of ugly. At least the dark mode is quite contrast.

Anyways, this should be handled on the extension side, as it follows the design of the extension. I will still open the issue just so we remember to update it.

Hans5958 avatar Jan 21 '25 10:01 Hans5958

I just remembered this: I actually have adjusted the colors when prefers-contrast: more. I adjusted more of the colors (not just the brand orange), and now it should be like this.

Image

Hans5958 avatar Jan 21 '25 10:01 Hans5958

I just remembered this: I actually have adjusted the colors when prefers-contrast: more. I adjusted more of the colors (not just the brand orange), and now it should be like this.

oh, that's awesome. i didn't even know that media query existed until right now

raynecloudy avatar Jan 22 '25 17:01 raynecloudy

I've seen the high contrast colors on my iPad because I use the Increase Contrast setting on my iOS devices.

DNin01 avatar Jan 23 '25 19:01 DNin01

White on orange can surely be hard for some people to read, but black on orange can also be hard for some people to read, based on current research.

There might be other color palettes we could use. I think we should try not to overuse text on color, but if we have to, text size, weight, and even shadow all contribute to legibility.

DNin01 avatar Jan 23 '25 19:01 DNin01

There might be other color palettes we could use.

~~i think this is the best course of action.~~ in all honesty i find both white-on-orange and black-on-orange an inconvenience to my eyes

raynecloudy avatar Jan 23 '25 20:01 raynecloudy

actually, would black-on-light-orange work, like scratch's high-contrast mode?

visual representation of a black-on-light-orange colour scheme

raynecloudy avatar Jan 23 '25 20:01 raynecloudy

Yes, but it looks like a jewellry brand.

Secret-chest avatar Jan 24 '25 07:01 Secret-chest

Why not something completely different?

Secret-chest avatar Jan 24 '25 07:01 Secret-chest

Yes, but it looks like a jewellry brand.

....?

Why not something completely different?

completely different than what?

raynecloudy avatar Jan 29 '25 18:01 raynecloudy