Increase contrast between filtered and learning cards in graphs

[kamperemu]

Issue caused by fixing #3764
Now the problem becomes the filtered cards and learning cards are nearly the same color, and I really have to squint to tell the difference.

FULL DISCLOSURE I HAVE COLOR BLINDNESS

[kamperemu]

Here's a picture with filtered reviews.

[brishtibheja]

I'm thinking what if Anki provides a way for users to choose the colours for graphs? There are different types of colour blindness and there might be no one-size-fits-all solution for all users.

[GithubAnon0000]

Would also be nice if the colors where consistent.

E.g. the reviews graph uses rgb(179, 211, 233); for blue, whereas the card counts uses #6baed6 (equivalent of rgba(107,174,214) ;) for blue. Both represent new cards.

Making them user configurable could also solve the inconsistency issue between graphs.

Edit: This would probably need two colors per card state though. The left side of the graph has a ligher color then the right side, set by

const cappedRange = scaleLinear().range([0.3, 0.5]);
…
const blues = scaleSequential((n) => interpolateBlues(cappedRange(n)!)).domain(
    x.domain() as any,
);

[GithubAnon0000]

As an additional info: There is a color contrast checker: https://www.audioeye.com/color-contrast-checker/

Using the color picker (in dev tools) I get #9f9cba for violet and #84a8c3 for blue in the current implemention for the graphs.

This gives a contrast of 1:1 – the minimum standard is 4.5:1 (and 7:1 recommended).

Changing the code

anki/ts/routes/graphs/reviews.ts

Lines 177 to 189 in 8e13e6b

	const cappedRange = scaleLinear().range([0.3, 0.5]);
	const shiftedRange = scaleLinear().range([0.4, 0.7]);
	const darkerGreens = scaleSequential((n) => interpolateGreens(shiftedRange(n)!)).domain(x.domain() as any);
	const lighterGreens = scaleSequential((n) => interpolateGreens(cappedRange(n)!)).domain(x.domain() as any);
	const reds = scaleSequential((n) => interpolateReds(cappedRange(n)!)).domain(
	x.domain() as any,
	);
	const blues = scaleSequential((n) => interpolateBlues(cappedRange(n)!)).domain(
	x.domain() as any,
	);
	const purples = scaleSequential((n) => interpolatePurples(cappedRange(n)!)).domain(
	x.domain() as any,
	);

to something like

const cappedRange = scaleLinear().range([0.3, 0.4]);
    const shiftedRange = scaleLinear().range([0.75, 0.85]);
    const darkerGreens = scaleSequential((n) => interpolateGreens(shiftedRange(n)!)).domain(x.domain() as any);
    const lighterGreens = scaleSequential((n) => interpolateGreens(cappedRange(n)!)).domain(x.domain() as any);
    const reds = scaleSequential((n) => interpolateReds(cappedRange(n)!)).domain(
        x.domain() as any,
    );
    const blues = scaleSequential((n) => interpolateBlues(cappedRange(n)!)).domain(
        x.domain() as any,
    );
    const purples = scaleSequential((n) => interpolatePurples(shiftedRange(n)!)).domain(
        x.domain() as any,
    );

does fix the issue with purple and blue but causes issues with purple and dark green instead.

It also looks a bit off, since dark green got changed in the process as well:

[tommylenz]

+1 for colors being consistent.

Regarding the colors in general: @kamperemu won't be the only color blind user of Anki. As @brishtibheja pointed out: Wouldn't it make sense to let the users pick a color scheme that is based on the type of color blindness, so that color blind people can pick a set that'll allow them to see everything without problems?
As per this site (see under "Types of colour blindness"), there seem to be four types of color blindness, an app should adapt to for being accessible (at least those seem to be the majority of cases). We could add a dropdown menu in Settings > Appearance > User Interface, where the user could select either "Standard" or any of the cases referenced above, just like they are able to pick a theme or style right now.
Based on the setting, the graphs could then display colored bars accordingly (The setting could be used as a switch in ts/routes/graphs/reviews.ts).

What's your opinion? @kamperemu do you think this is a reasonable approach, or do you know a better solution (maybe the way another app you are using is handling this?). If this approach sounds good, I'd be willing to give it a shot.

[GithubAnon0000]

I'd like to add as a heads up that changing the colors in Reviews Graph should also change the colors in other places accordingly.

E.g. the Card Counts graph uses the same color distinction for the card states. Same for the Info (browser → right click card → info): Here, the type is based on the same card states and thus should be consistent. Same applies to the deck overview screen (where e.g. the new cards color is blue, too).

[kamperemu]

@tommylenz My own color blindness is minor enough that I rarely ever have to use color blindness settings in apps. Most apps have color choices that are contrasting enough where I don't need to worry about it. However, I have generally seen a lot of games having color blindness settings and the color profiles for different types of color blindness is exactly the approach they use.

The approach you're using seems reasonable but I'd also suggest considering more contrasting colors for the defaults.