(Bug): The "accessible" color scheme is not accessible for people with Tritanopia

[MilesBHuff]

Hey! So, your "accessible" color scheme, while definitely accessible for people with protanopia and deuteranopia, is actually not accessible for people with tritanopia. Thankfully, people with tritanopia can actually see the default colorscheme just fine. However, I wanted to let you know that there is one colorscheme that supports all three kinds of human dichromats: magenta vs green. The reason why, is that magenta is obligatorily composed of equal parts red and blue -- there is no magenta wavelength of light; it's purely a fiction of the human brain. Protanopes see magenta as blue, and green as yellow; deuteranopes also see magenta as blue, and green as yellow (This is because primates duplicated their long cone, and protanopes and deuteranopes are missing just one copy of this cone.); and (lastly) tritanopes see magenta as red, and green as blue. Magenta-green is the ONLY two-hue scheme that has this ability.

For maximum accessibility with as few presets as possible, I would suggest the following:

• Conventional (red/green) (for trichromats)
• Colorblind (magenta/green) (for dichromats)
• High Contrast (black/white) (for monochromats and people with severe vision impairments)
• Custom

(Using magenta/green makes the "Neon" magenta/cyan colorscheme mostly redundant, so it can be removed.)

[cyrildtm]

Thanks @MilesBHuff for providing this information! Let me come up with a new palette for my next PR. P.S. The neon scheme is not for accessibility, it's intended for fun, but may be helpful. Blue means cool, pink means this video is so bad it should be burned down by Tommy Vercetti.

[cyrildtm]

Is the default grayish-whiteish scheme not enough to be high contrast? How can I draw black on black though (in dark mode for example)

edit: It's (3,3,3) and (255,255,255), so I guess it's fine?

[cyrildtm]

• We don't need to keep the list minimal. In fact I hate green and red.
• I don't want to make the scheme names too on the nose. Which way is better?

https://github.com/cyrildtm/return-youtube-dislike/blob/caeac539f5eb0364a329c7cd2ed1f48a3a39e990/colors.html

I can only guess through simulation.

[sy-b]

@cyrildtm The ability to set custom themes would be great.

[cyrildtm]

@sy-b What's the easiest/shortest way to implement a color picker, royalty free, no-copyright, fits to the popup window?

[sy-b]

I used this

<div class="custom-color-select">
    <label for="color_picker">Custom Colors</label>
    <input type="color" id="color_picker" value="#112233"></input>
    <input type="color" id="color_picker" value="#112233"></input>
</div>

[MilesBHuff]

Is the default grayish-whiteish scheme not enough to be high contrast? edit: It's (3,3,3) and (255,255,255), so I guess it's fine?

It's sufficient! :) That's probably why Google switched to it from its earlier color schemes.

How can I draw black on black though (in dark mode for example)

You'd have to add a border or glow around the black part of the bar, to differentiate it from the black background.

[MilesBHuff]

I don't want to make the scheme names too on the nose. Which way is better?

Oh, I like the name "Hibiscus"! You know, if you make that theme the default, you don't even need to bother with accessible schemes! :D But you'd also annoy people who prefer having traditional things be the defaults.

You could call the default theme "Watermelon", if you want!

The Prot/Deut theme is mostly pointless when there's Hibiscus (as you can see from your simulations); maybe rename to "Capetian" or something? (I'm sure someone can think of a better name, lol.)
I wouldn't favour removal, since many protanopes & deuteranopes are probably used to blue == bad && yellow == good, and Hibiscus inverts that.

[MilesBHuff]

One thing that struck me as interesting, was that none of the color schemes are consistently AA accessible for all viewers on white backgrounds. Maybe have an option (enabled by default) that darkens the chosen colors on a white background?

[cyrildtm]

option (enabled by default) that darkens the chosen colors on a white background

On this particular one I would prefer automation instead of user option. -- Is there any way to tell if my YT page is in dark mode? Especially when my YT setting is "Use device theme"

[MilesBHuff]

Oh yeah of course -- the option would only apply to light backgrounds, so it would be automated, like you mention. The alternative to such an option would be separate colors for light & dark backgrounds, which is a bigger time-investment. The option, when on, could darken colors on light backgrounds; and, when off, lighten colors on dark backgrounds. For the default colorschemes, the option would be grayed-out and set by the chosen theme.

[cyrildtm]

The Prot/Deut theme is mostly pointless

Oh! I see your point now.

blue == bad && yellow == good, and Hibiscus inverts that.

Does it invert or not?

Good: green / yellow Bad: red / blue Hibiscus: green-pink / yellow-blue

"Capetian"

I was thinking macaw, but Capetian is cool!

You see I want to have other options than the boring green and red, and this option gives me the only blue and yellow. There are for sure people who like the original, but since we are re-coloring it I want to (be able to) have it my way. Personally I use neon just because it's different, it's curious and therefore prettier than the traffic lights I have to stare at every living day.

[cyrildtm]

I had problems when choosing colors on both white and black. The CSS color code "green" for example is better on white than on black, but "lime" has it the opposite way.

It's relative easy to implement a dynamic color palette, but I need some help with determining the UI color scheme. How do I tell if I'm in dark mode or not? I can't make it manual since "Use device theme" follows the system, which then can follow the day/night cycle.

After that we can fine tune the colors on each background.

EDIT:

document.querySelector('html').getAttribute('dark') === "true"

I was overthinking.

[MilesBHuff]

Not sure if you saw (since it was an edit), but you could call the default color scheme "Watermelon". 🍉

[MilesBHuff]

Does it invert or not?

It inverts. But note that Hibiscus is closer in appearance to the standard than Capetian is.

[cyrildtm]

But you said blue is bad, yellow is good?

Anyway, what if we have another option to reverse the pair?

[sy-b]

This might help a bit https://color.adobe.com/create/color-accessibility

[MilesBHuff]

But you said blue is bad, yellow is good?

Yes, for Hibiscus. ;p

Anyway, what if we have another option to reverse the pair?

Lool, definitely not necessary; having Hibiscus and Capetian both as options is enough! :p

[cyrildtm]

I wonder if we have any colorblind friends in our plugin user community. There must be, the mighty 1% rule. I used to talk to mine back when I was a EE college student and ask what the color coded electronic parts looked like to them.

I'm a bit concerned about the naming, it's either better than using the disease's names or worse.

Besides, just wanted to clarify, introducing all these alternative color schemes was not only a way to improve accessibility, which is definitely one goal, but it also brings more options -- fits into the extension's category.

[MilesBHuff]

I'm a bit concerned about the naming, it's either better than using the disease's names or worse.

what if we have another option

Could always add an option that switches between the fancy name and the non-fancy one.

Or colorblind-accessibility could be indicated with an asterisk, or maybe a tooltip.

Could also go for a hybrid, and put "(accessible)" after "Capetian" and "Hibiscus".

If you're looking to just add options, you could also add an option for red/gray (like OG YouTube), or azure/gray (like an older version of modern-ish YouTube).

[cyrildtm]

An asterisk with a tooltip sounds great.

red/gray (like OG YouTube), or azure/gray (like an older version of modern-ish YouTube)

Do you have the CSS color code or hex code for these?

[MilesBHuff]

Do you have the CSS color code or hex code for these?

I didn't; but then I Googled and pulled them from old images:

2006: #fa0606

2013?: #9cbc7c (average)

2015: #167ac6

[sy-b]

Do you have the CSS color code or hex code for these?

https://davidmathlogic.com/colorblind/

---

I used to talk to ...... and ask what the color coded electronic parts looked like to them

probably like this -

[cyrildtm]

probably

Off topic:

The two friends of mine had a consensus opinion; I talked to them years apart. What you might think is a color, is not (or is less) to them. Our language is defined based on a full palette. If I'm asked to describe what a color looks like without saying it directly, I tend to associate it to a similar color or a thing close to that color. That does not work if you have a limited palette, and that part of the language is blurry. Besides, you may think "red is grey to people with deuter" but it's not -- my friend could tell red from grey!

[cyrildtm]

https://davidmathlogic.com/colorblind/

I saw that one, too. But I got lost quickly, and many combinations were unappetizing. I'll open up a testing ground soon.

[MilesBHuff]

probably like this -

Off-topic, but I've always found Tritanopia filters to look hauntingly beautiful.

That does not work if you have a limited palette, and that part of the language is blurry.

Very interesting! A fine point.

you may think "red is grey to people with deuter" but it's not -- my friend could tell red from grey!

When I say things like that, I mean that what deuteranopes see would look "grey" to us. But it's a distinct shade of grey, so they can still distinguish it. It's like... imagine having a single word for light grey, dark grey, etc.

[cyrildtm]

https://github.com/cyrildtm/return-youtube-dislike/blob/77c77864768106b78ac278d264acced8ca3e0bbf/colors.html

Give it a try.

[sy-b]

Another idea Ask users to select their condition & use https://www.npmjs.com/package/allyfe

[cyrildtm]

Wouldn't that make more sense for another separate extension that converts the entire page to colorblind friendly Besides, why is the alternative color for -anomaly different than for -anopia?

[sy-b]

Wouldn't that make more sense for another separate extension that converts the entire page to colorblind friendly

Exactly what I was thinking. These people must already be using some color filters/adjustments from monitor settings. I think that "accessibility" theme shouldn't have been there in the first place. 😄

[cyrildtm]

Lol its quite negative thinking about all our discussion and work goes to nothing. Hope by making the names not associated to diseases can justify.

Whenever i see green and red i just want to repaint it. So boring!

[cyrildtm]

https://github.com/cyrildtm/return-youtube-dislike/blob/77c77864768106b78ac278d264acced8ca3e0bbf/colors.html

Give it a try.

Any thoughts? Let's wrap up this issue and move on to others

[sy-b]

Appears 👍 to me

[MilesBHuff]

LGTM

[PickleNik]

👀👉👈

[cyrildtm]

@PickleNik How did you get both filled and hollow thumbs? Also what were you trying to say?

[PickleNik]

@PickleNik How did you get both filled and hollow thumbs? Also what were you trying to say?

Copypasta of YouTube's SVGs, it's for preview. Just something I'm working on related to the color stuff so I posted here :)

[cyrildtm]

Can you take a look at my PR? I have more color themes included over there, but I do want to include the picker as you and @sy-b pointed out above. Besides, how are the thumb graphics copyrighted? I would love to pick some free glyphs for the predefined themes as well.

[PickleNik]

Can you take a look at my PR? I have more color themes included over there, but I do want to include the picker as you and @sy-b pointed out above. Besides, how are the thumb graphics copyrighted? I would love to pick some free glyphs for the predefined themes as well.

I saw the PR, I thought it was just the additional themes. I'll rebase my changes on top if necessary, I removed lots of stuff from the settings panel so I'll definitely need to rebase once it's done. As for the thumbs, there is definitely a free version on fonts.google.com, though the outline is bulkier, but I could tweak some raw svg values to avoid any copyright issues.

[cyrildtm]

I'm not writing any actual code right now until probably next week. Just life stuff I need to take time to take care of. You may go ahead and build on top of my PR. Otherwise I can catch up maybe next week. For the thumbs I think we really need to be careful. A small infringement could be a fatal one.

[cyrildtm]

There's been a small conversation about reducing/streamlining user option implementation in #541 I plan to do it once I get back to this project but If by "removed lots of stuff from the settings panel" you meant something like that, I would be interested to see.

[cyrildtm]

there is definitely a free version on fonts.google.com

My quickest find is this: https://fonts.google.com/icons?selected=Material%20Symbols%20Outlined%3Athumb_up_off%3AFILL%400%3Bwght%40400%3BGRAD%400%3Bopsz%4048

There are several under "Social" section in "Icons". It appears SVGs are available for download. They are Apache 2.0 licensed, great, but do check for compatibility. What kind of license does this extension have?

The provided developer's guide seems satisfying. We may be able to customize the fill with example code like <div style="font-variation-settings: 'FILL' 1, 'wght' 700, 'GRAD' 0, 'opsz' 48;"> This might be the solution for #571

[PickleNik]

What kind of license does this extension have?

GPLv3

[PickleNik]

You may go ahead and build on top of my PR. Otherwise I can catch up maybe next week.

There's too many changes for it already, guess whoever's last will get to rebase 😅

I'd like to see Theme presets added though

[cyrildtm]

GPLv3

Good to go.

[cyrildtm]

There's yoo many changes for it already, guess whoever's last will get to rebase 😅

I always avoid GUI because when it grows in scale, it gets more and more troubles

I'd like to see Theme presets added though

As long as not too much merge conflicts to fix

Adding a few colors to fix this Issue is not that hard, but using the existing framework is problematic. It was not designed to be flexible enough to meet the needs for #571.

[cyrildtm]

There's too many changes for it already, guess whoever's last will get to rebase 😅

For the custom color picker, it would be nice if it's integrated within the color themes pull down list. For example, when "Custom" is selected, the two little thingy on the right are replaced with color pickers, although they may be a bit bigger. I experimented a bit with the appearance, and it should look fine. There is a callback function to update the colors when the pull down list selection is changed, and it should be able to cover this.

[PickleNik]

there is no 2 thingies on the right anymore, I plan to integrate most things to do with color right in the preview, and the pull down list is a separate thing for those who don't want to pick their own colors.

[cyrildtm]

What about syncing the pull down list and color picker, so after selecting a preset theme, the picker reflects new colors? Where is your build? I can't find it

[PickleNik]

What about syncing the pull down list and color picker, so after selecting a preset theme, the picker reflects new colors? Where is your build? I can't find it

Yes the 2 can work together once both are finished, my build is local for now, I haven't made a PR for it yet.