ankitects
Accessibility features in stats page for color blindness
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
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.
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,
);
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 https://github.com/ankitects/anki/blob/8e13e6bfc159a0d73bbec146c75c16613f9a597e/ts/routes/graphs/reviews.ts#L177-L189
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:
+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.
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).
@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.
Are you currently working on fixing this issue @tommylenz ? Else I would like to try to solve it, both by choosing a new color palette that respects the recommandations of contrast (using this website), and by implementing a setting that allows to change it for colorblind-friendly (if I may say so) options (with 4 different adjustments, at first glance).
@Dissiecle No, I'm not. I'd love to see those features being implemented, helping people with any of the variations of color blindness there are. Please go ahead! If you were open for breaking up this task into subtasks, maybe I could find the time next week to support you. If this seems to be too much legwork for you, don't hesitate to do it on your own completely. Looking forward to seeing your commits anyways!
@tommylenz @Dissiecle Are any of you currently working on this? Four of my friends and I have to contribute to an open source project for university and would like to contribute to this issue!
@TheFefel Hi! Great that you guys are willing to get this going. I haven't done anything besides figuring out the logic behind this. As I didn't receive an answer, I haven't gotten back on it, since I have tests coming up soon. Please go ahead and give it a shot! Looking forward to your ideas and solutions.
Hello guys, is there any progress with this issue ? I have not found any commit @TheFefel
@thomasrixen We are still working on it and have to commit something till August 15th. I don't know how many changes there will be, but we try our best!