Massive Color Update 8/10: Better Contrast, Readability and New Accents!

Hey,
Thanks for the update, I find the “light” version really nice.
But as a “dark” version user, I have to admit I prefered the old version.
First as other said, the colors for each SRS levels are too close from each other, it’s hard to distinguish the difference, for this point I can’t understand the “improved contrast” point.
Also, I find the color on the review button and drop down menu too bright/too agressive for the screen surface it occupies (Maybe also that white text here should be more readable)
On the rest of the website these news colors are fine.

4 Likes

Here is the difference with and without the border in case anyone is interested in the side-by-side:

With

Without

Generally I like the redesign, but as others have said I think for Dark Mode the contrast between the different SRS levels is too low. It almost feels like if you kept the beginner colour then the colour for adept would have to be at least what the current one for seasoned is.

So going up two stops of contrast/colour per SRS level if what we currently have is considered to be one stop per level.

Current at one stop per level:

image

Alternative at two stops per level:

image

Then an additional two colours would be needed for Expert and Master. Similar to your suggestion I think? @pgooss

9 Likes

The steps in color difference you did look really nice. I think they’ll still have to include some kind of dark-gray-blue since they use it as the secondary color for their graph and without it, they might not be able to keep the contrast they like.

Summary

image

I still like the idea of gray being the starting color just because, it feels like you’ve encountered this grammar point but you haven’t truly learned it yet.

Here’s my next iteration playing off of @ThePurpleOrange :stuck_out_tongue:

Summary

image

8 Likes

Same here.

Until yesterday I used it on a highend IPS panel HDR screen and had no problems. Now I’m visiting my parents where I have only a cheap TN panel screen and I can’t barely see where the color changes, it looks like a gradient. Contrast is terrible. The old scheme worked much better on that monitor.

A color scheme with more contrast would be nice for not so great monitors.

2 Likes

The new update looks great. One minor gripe though is that when clicking on the grammar buttons, that say Beginner, Adept, Seasoned etc. I can’t easily see how many things I have at each level at easily. It used to have the sub categories at the bottom along with how many grammar points are at that level, but it no longer does.

2 Likes

Just updated the app and it works now!

2 Likes

Since trying out new colors I’m unable to do new reviews. Very frustrating for a service I’m paying for. Hope someone will respond to my email and fix it soon.

5 Likes

Hey,
I am looking into it :slight_smile:

Cheers!

2 Likes

Love the new colors, especially on dark theme red accent

4 Likes

Update on the update!

Apparently it’s now the age of Purple Bunpro, many users have switched to Purple as their accent!

In the name of transparency, I want to disclose that the part about WCAG Compliance has been updated to state we’re not WCAG Compliant yet. This change comes from @HotAirGun’s help bringing our attention to this. We’re working on making our former statement true!

Continuing, the feedback received so far seems to fall into one of these 3 points:

(Only tagging the people from this thread right now, but we’ve received feedback too through our other channels/posts.)

My guess is that the first and last points will sort themselves out once we make good adjustments to the Dark Mode.

I also see lots of requests for a yellow/orange theme. Yellow being the bright color that it is makes it very hard to work with on Light Mode, but Dark Mode is a great candidate for it.

That said though, we’re considering it. :face_with_monocle: Perhaps an ocher theme that’s leaning more into orange on Light and more into Yellow on dark is a solution? :thinking:

Also, some of you really want animals inside of Bunpro. Fox, Dragon and Possum themes are definitely more tricky. :sweat_smile:

Color takes a bit more to get right (as evidenced by, well, me) so this update will be a slower than usual. That said though, we’re working on fixing it. Thank you everyone for your feedback, and please keep it coming!

22 Likes

A yellow/orange theme would be so based. :sunglasses:

Our available color schemes would basically be the 5 main colors of the Ninja Turtles. And if that’s not exciting I don’t know what is.

11 Likes

This reply convinced me to upgrade to lifetime. Thank you.

9 Likes

Definitely agree with this one. Currently trying out Dark+Purple and I would be vibing with it, but not so much in love yet for this exact reason.

Other than that, it’s looking pretty okay contrast-wise for me. Site uses the screen space better now, and the layout is extremely clean and effective IMO.
Props :+1:

PS
I kinda miss the recent mistakes from WK, because you have to go through cram selection to do that, but that’s for another topic I guess.

4 Likes

I set my preferences to immediately create a ghost after the first mistake, this way I know that any error will come back to… haunt me.

3 Likes

8/17/2023 Update

These updates are not live yet, for this specific update we thought it might be better to gather more feedback before making a change to the live version.

Please take a vote on the proposed solutions!


  • We’ve toned down the intensity of the accents and SRS colors.


More screenshots on the change:

Left = Current Live Version | Right = Reduced Contrast




Do you think this helps reduce how stark the Dark Themes feel?

  • This solves the issue for me
  • This does not solve the issue for me
  • Other (Comment below)

0 voters


  • We’ve added slices between the levels to make it easier to discern between them and boost contrast further.

  • We added a shift in hue to make contrast clearer between the levels.
    Now, in order to have better contrast for the SRS levels we needed a bigger shift in tone/hue for the contrast to be good enough, we’re calling these Duotone Themes.

This makes the contrast way better across the board, but its very different from what we originally made available.

image

More screenshots on the change:

Left = Reduced Starkness Version | Right = Duotone Version




Do you think this makes it easier to differentiate between SRS levels?

  • Yes, it greatly helps.
  • Yes, it helps somewhat.
  • I don’t see too much of a difference.
  • No, this does not solve the issue for me.

0 voters

Should Duotone replace the current themes or be offered alongside?

  • The new duotone palettes should be the default, replacing the current themes
  • The new duotone palettes should be an extra set of themes, keeping the current themes
  • I don’t think duotone themes are the solution.
  • Other (Comment below)

0 voters


We believe that both the solutions are above are enough to warrant not going back to the old themes, or offering a way to do so.

What are your thoughts on this?

  • This is good enough for me not to want the old themes back.
  • The old themes were still better.
  • Other (Comment below)

0 voters


That concludes the first wave of changes! After we work out the colors, better WCAG compliance is next. If you feel like the polls don’t reflect your thoughts please just comment below.

And, as always, thank you for your feedback! :bowing_man:

@Lysquid @pgooss @ThePurpleOrange @FilthyBlasphemer @enbyboiwonder @Inounx @Yumari-1 @Alpacat @HotAirGun @Redglare @Buntebunpou

8 Likes

For the first one I commented Other
My comment is
I didn’t see a problem with contrast to begin with. BUT that being said either of those colour formats shown here are both completely fine by me

  • We’ve toned down the intensity of the accents and SRS colors.

More screenshots on the change:

2 Likes

I’m a little split. My enjoyment of the things depends a lot on the colour. For example, the low contrast red I think looks pretty great, but the purple is a bit ‘eh’ for me. I might be the wrong person to ask though since I like looking at bright colours for fun lol.

As for the duotone, I think it works a lot better than the low contrast. Again though, I think it really depends on the colour. Purple looks outstanding and I wouldn’t mind if that was released today, but the Blue Duotone doesn’t really make sense to me? It goes from a greenish-blue, to a more greenish colour, and then back to blue? And the change in brightness doesn’t make as much sense to me like purple does, as it goes to a light blue, to a semi-light blue, and then back down to a darker blue.

Personally I would probably swap the hues for the ‘Beginner’ and ‘Adept’ stages in the Blue Duotone (but keep the brightness so it’s still “ascending”, kind of like the Purple Duotone) and make the “Master” stage brighter.

I think it does need a bit more workshopping, but I’m really liking how some of these are turning out. Maybe if you really wanted to, you could implement a ‘high contrast’ and ‘low contrast’ modes like Visual Studio Code does. Good work guys :+1:

6 Likes

For me the biggest issue lies with the JLPT Progress bars not being easy to read with the “MonoTone” purple, but I get the impression that the split bars might be enough to solve the issue even without DuoTone themes. Hard to say decisively before trying it out for myself first, though.

And I agree with @Alpacat on the DuoTone looking best in purple. The other colors I’d personally keep mono.


I’m curious how the split bars is going look like in cases where there’s just a few left before mastering a whole jlpt level. The details don’t show in normal zoom.

Super zoomed in version:

Notice how N5 has two Expert left.


Normal zoom version:

Here the two Expert is not visible and it looks like I got N5 all mastered.
image
image

5 Likes

Hey,

Just some more feedback regarding these changes:

Do you think this helps reduce how stark the Dark Themes feel?

Yes definitely !

Do you think this makes it easier to differentiate between SRS levels?

My first impression on Duotone, is that it is promising ! It brings a completely different feeling by adding new colors. I really like the fact that there is more than one accent color ! The difference between the SRS level is now clearly visible. Compared to the high contrast version, there is no more ascending “brightness” (sorry if this is not the good word) order: the seasonned level becomes the lighter one, and it seems like a fade out from the first color (beginner level one) and then the minimum is reached at seasonned and fade in, up to the accent color.
I am sure I can get used to it, but it breaks the logic you had until now.
Maybe it is possible to keep the ascending tone / brightness but using the duotone color logic ?

About the colors in particular, I like the purple and red duotone version, blue is okay, but I have to admit I am not a huge fan of the greenish color, and green duotone, I don’t have an opinion as I don’t like green color in general.

Globally, in my opinion this is already a really good improvement !

3 Likes

I posted this on the other thread but someone pointed me here. For the JLPT progress bars you could add some sort of delimiter between the JLPT levels. Plus the color change option.

image

3 Likes