New Color Scheme Lacks Contrast (Especially For Those With Color Blindness!)
The new color scheme simply doesn't work. The new colors not provide enough contrast. With my type of colorblindness, I can barely see the difference between the red & green. They actually look very much the same at a glance and I can really only spot the difference when I take a really close look. This is bad. Like really really bad.
Please don't make this the only option! You have literally broken a very important part of the design for a lot of people. Please revert ASAP until you can find a better design than this (or at least give us the choice in the settings!).
-
Actually, I like the new color scheme, but the old was fine too. What I *do* want to see is something that differentiates between "I haven't reached my budgeting goal for the month" (which often happens with variable categories) and "I've overspent on credit" and "I need to budget more for upcoming." They're all yellow. The little icons are confusing and (with the old color scheme) not terribly visible at a glance.
-
What would make the biggest difference for readability, both in YNAB and on this forum, is switching to black type, like deep black, rather than gray. At least for me. Not color blind, just late-middle-aged.
-
Uuuuh, I really dislike the new color scheme. The old one was much more readable. I would suggest not to make such changes at will but give users the option to decide themselves.
-
MacMorri This is YNAB. Don't you realize that they know what you want better than you do!
-
-
I do not like the new pastel shades, I think a choice to take the old one should be added.
-
HATE this change. I have perfect color vision (I actually have it tested regularly because color is an integral part of my job), and this is decidedly not good.
Yesterday I would have said I was a 100% in love with YNAB.
Today... it's about 85%. The more you make me look at this, the lower it's going to get. -
I am colourblind and now can't see the text, especially black on red. Who tested this?
-
Ruthi Nobody it seems.
Use the Toolkit for YNAB browser extension in the meantime. Its the only way I can use the software for now until they fix this gross error (which I assume will take forever to correct given YNAB's history of development and listening to user feedback)
-
Forest Green Stallion
How did you fix this issue in the browser extension? Cant find anything that directly addresses editing pill colors other than the color blind option. Dont wanna go stumbling in and really mess things up irretrievably. Thanks!
-
Molly McGuire Check the comment from LEGO that was just posted. Only helps with the red/green issue though, not green/yellow.
I wouldn’t be fearful of playing around with the toolkit though. If things get weird, there is a ‘restore to default’ option . Also, the toolkit doesn’t actually modify YNAB; it more just puts a mask over it (has some other useful features you might like as well)
-
Molly McGuire Seeing that my toolkit "you didn't meet your goal yet" color is still the bright blue, I don't think the YNAB toolkit has caught up to this change just yet. I have faith! (In the toolkit.) There is a workaround posted in this thread that is another chrome extension not connected to the YNAB one (I think).
With the toolkit you just toggle on the features you want, click save, and restart your browser. If you hate it just go to the toolkit and untoggle. If you can't remember what you did, just uninstall & reinstall the toolkit from chrome and start over.
-
Purple Admiral You don't have to uninstall and reinstall the toolkit, there is a 'reset to default' option which is faster and less hassle.
-
Ruthi Thanks for the tip! I didn't know that 😊
-
-
Totally agree! Don't like the new colors. Not to harp too much, but this is going back to voting on feature requests. If users were voting, who would have voted for this? If the current replacement for voting in this forum, where are the discussions on needing a color change?
-
Ben Khaki Storm if the color change truly helped those with color blindness, I would say that there should be no voting whatsoever because accessibility trumps individual opinions on color. However people with color blindness are telling us that this change makes it worse and they need to be heard and listened to post haste.
-
jenmas Absolutely. If it was a matter of taste, then fine; I might complain, but you can't please everyone. But this has objectively harmed users ability to use a product they pay for (and ironically, they have harmed the very users they claim they are trying to help).
-
jenmas even if the change is mandatory, I still think voting could come into play in how the change is implemented. (Is it an option, is it the default, etc.)
-
Ben Khaki Storm YNAB has repeatedly stated that they do not want to have toggle options. I'm not saying that their stance is correct, but if toggles are inherently a no-go there is no point in asking to vote on it.
-
-
No offence, but I like the new color scheme very much, it looks great.
-
Mano no offence taken. The colours are pretty but when some people can't read the numbers it makes it kind of difficult to use the program... :(
-
-
Color blind here as well and can barely see the difference in the colors. Love all the continuous improvements but this one hurts...Please revert.
-
Not a fan of this color scheme change at all! As I look through My Budget, I cannot get a quick glance at my balances. I am struggling to see the balances and differentiate those budget items needing attention. I am a HUGE YNAB fan, but this definitely affects my excitement to use this program.... and I use this program ALL THE TIME! Please allow us to make a choice as to the color scheme we prefer.
-
Simply put, the new colors are harder to see and do not emote the energy that the bold colors conveyed.
This is what a negative balance looks like to me now. If I were colorblind I'm pretty sure that's just a red box.
-
pksublime I'm curious, do you have the toolkit on? That's not at all what my screen looks like after the change.
-
Hi pksublime ! Are you using the Toolkit extension? If so, you might have the Highlight all Negative Category Balances Red setting turned on.
-
pksublime With the Toolkit I was able to get it to look like this. Not great, but better.
-
-
I am also colorblind and cannot see the difference in these colors. Please revert back ASAP!
-
While I appreciate the YNAB reps posting in this thread what I'd really like to see is a letter similar to the one discussing the original color change. Just acknowledge this rollout hasn't had the intended effect and you're working on correcting it as soon as possible. This isn't a "nice to have" feature you'll get to eventually, it's a debilitating change for a lot of folks.
-
I find the new color scheme to offer much LESS contrast. I really dislike the way it looks. The bolder colors offered better contrast and much more visual distinction. The old colors communicated information much better. This is brutal. PLEASE allow us to change the colors back!
-
What would be wrong with solid black numbers on a white background, and colored indicators *beside* the number instead of a pill around the number making it hard to read?
-
Yah, I think this was a case of fixing something that wasn't broken. Please either bring back the old scheme, or implement "themes" where I can choose the color scheme. Thanks.
-
Jesse Adelman I agree completely. It is change for the sake of change. The old color scheme was perfect and served its purpose well...who exactly decided that this new pastel color scheme offered more contrast? This was a solution in search of a problem that didn't exist.
-
-
My partner also has mild Deuteranopia and laughed when I said that the new colours were developed to help with that. He thinks they are awful.
However, he is also a graphic designer (yes, ironic I know) and thinks that YNAB are confusing two things here. He thinks the darker text is far easier to read against the new colour backgrounds, which improves legibility for that one pill (for him). However, the difference between the new red and green pill colours is indistinguishable for him, he can only just see the difference between the red and green in the old colours. So scanning through a budget, he wouldn't notice the new colours at all.
He pointed out that people with degrees of colour blindness rely heavily on tonal difference to distinguish one colour from another and, in both the old & new colours, all the colours are from the same tonal range. Choosing a red and green from different tonal ranges would help.
Personally I don't much like the new colours, but I'm a bright colour kind of girl.
-
HappyBean They did say the goal was to reduce the reliance on color based signals and the contrast between the text and the background color was made to make the numbers more readable. Seems they achieved what they set out to, even if people don't like it.
-
HappyBean This is an excellent comment. I think your partner nailed it - the text is more visible, but the colors are difficult to distinguish except by side-by-side comparison (at least for me).
I think the lesson here is that they should really offer a number of color schemes, and make them user-selectable. Accessibility issues cover a very wide range of responses, and it's unlikely that a single color scheme will work for everyone. With my particular form of colorblindness, for instance, I find that in practice, my biggest problem isn't distinguishing between red and green, but between green and brown.
-
Herman I don't think they've achieved it yet. Reducing the reliance on colour based signals will require replacing them with something else (ticks & crosses?) so that you can quickly scan your budget and see which categories need attention. At the moment they are still relying on the colours and the new colours seem to be much harder (if not impossible) for people with colour blindness to see.
The improvement in legibility, at least for David, comes when looking just at one pill - darker text on a lighter background - not when scanning through the whole budget.
-
HappyBean The icons in the pill our now more visible as well. of course that requires getting used to the symbols as your cue. They also indicated this was only step one.
-
I just want to clarify my answer. As Violet Crab said in another comment, there are many ways that colour blindness manifests itself, but this is what David found when he looked at the new colours;
Legibility of an individual pill - improved, thanks to the contrast of darker text on a lighter background
Legibility of the overall budget - drastically worsened, because the contrast between the new yellow/green/red is much lower than between the old colours
-
Herman The issue is if you have a monthly funding goal, the symbol doesn't indicate whether you've met the monthly goal, only how far you are away from the total fund. Whether you've met the monthly goal is indicated solely by color.
-
-
This new color scheme is horrible. I'm sorry, YNAB. I'm really struggling to see the categories.
-
Horrible, horrible, horrible. With the old colour scheme, I could distinguish the green and orange, though barely. Now I cannot tell the difference at all. Do you guys actually do user testing before releasing a feature (let alone while *scoping* a feature)?
It seems like in all the months of "research" that your development team had done, you guys with perfect eyesight simply read up on it and didn't actually get people with colour deficiency to test your choice of colours. It is both disappointing and ridiculous.-
Everyone, if you need a quick fix, you may use this "User CSS" Chrome extension:
https://chrome.google.com/webstore/detail/user-css/okpjlejfhacmgjkmknjhadmkdbcldfcbGo to your YNAB budget, and click the User CSS button next to your Chrome address bar. The User CSS side panel will open.
Paste the CSS code below into the side panel and the colours would be reset to the previous scheme, except that I have changed the "cautious" colour to a lighter shade of orange which works for my colour blindness.
You may change any of the background-color values below to colours that suit you better. You may do a Google search for "color picker" to find the hex code for the colours you desire:
https://www.google.com/search?q=color+picker.ynab-new-budget-available-number.positive{ background-color:#da953f; color:#fff; } .ynab-new-budget-available-number.positive:hover{ background-color:#da953f; } .ynab-new-budget-available-number.positive .icon-goal .inner{ fill:#fff; } .ynab-new-budget-available-number.positive .icon-goal .outer{ stroke:#fff; } .ynab-new-budget-available-number.negative{ background-color:#c54b3d; color:#fff; } .ynab-new-budget-available-number.negative:hover{ background-color:#c54b3d; } .ynab-new-budget-available-number.negative .icon-goal .inner{ fill:#fff; } .ynab-new-budget-available-number.negative .icon-goal .outer{ stroke:#fff; } .ynab-new-budget-available-number.cautious{ background-color:#ffd700; color:#fff; } .ynab-new-budget-available-number.cautious:hover{ background-color:#ffd700; } .ynab-new-budget-available-number.cautious .icon-goal .inner{ fill:#fff; } .ynab-new-budget-available-number.cautious .icon-goal .outer{ stroke:#fff; } .ynab-new-budget-available-number.cautious.credit svg,.ynab-new-budget-available-number.cautious.upcoming svg{ fill:#fff; } -
Isaac C. Thanks for posting this workaround...however, when I copied and pasted the CSS code, it turned all the bubbles that used to be green to orange. Can you provide some updated values to re-create the original theme? OR show where I would make those corrections? Thanks!
-
Green Trombone (73279a04b9d9) sorry, my bad! This is where the colour blindness affects me. I couldn't really tell the difference between the original green and orange and I mixed the two. Please use this updated one below. Thanks for pointing this out!
.ynab-new-budget-available-number.positive{ background-color:#499f4a; color:#fff; } .ynab-new-budget-available-number.positive:hover{ background-color:#499f4a; } .ynab-new-budget-available-number.positive .icon-goal .inner{ fill:#fff; } .ynab-new-budget-available-number.positive .icon-goal .outer{ stroke:#fff; } .ynab-new-budget-available-number.negative{ background-color:#c54b3d; color:#fff; } .ynab-new-budget-available-number.negative:hover{ background-color:#c54b3d; } .ynab-new-budget-available-number.negative .icon-goal .inner{ fill:#fff; } .ynab-new-budget-available-number.negative .icon-goal .outer{ stroke:#fff; } .ynab-new-budget-available-number.cautious{ background-color:#ffd700; color:#fff; } .ynab-new-budget-available-number.cautious:hover{ background-color:#ffd700; } .ynab-new-budget-available-number.cautious .icon-goal .inner{ fill:#fff; } .ynab-new-budget-available-number.cautious .icon-goal .outer{ stroke:#fff; } .ynab-new-budget-available-number.cautious.credit svg,.ynab-new-budget-available-number.cautious.upcoming svg{ fill:#fff; } -
Isaac C. Amazing! Thank you so much for this workaround...now it looks exactly like it did prior to the latest update...thanks a million!
-
Isaac C. Green: Dont actually see a link for the second workaround you mention here. Would you post it? Thanks!
-
Molly McGuire Hi Molly...Isaac C posted two different blocks of code. Follow his directions in the first post he made, but paste the code from the second (follow up) post into the extension to restore the original colors. You will have to refresh your browser window (and make sure the slider is set to "on" in the extension).
-
Green Trombone (73279a04b9d9) FANTASTIC!! Thank you!
-
Isaac C. Your workaround is fantastic.. Thank you so much!!
-
Green Trombone (73279a04b9d9)
This made it work for me, thanks!
Isaac C.
I'm not sure that the green in your code is the original green, but I don't care! I really appreciate your doing this since I could not in a million years do what you did.
-
Isaac C. Thank you for the color fix! Brilliant and I'm back to loving my budget same as before. 🎉
-
Isaac C. This is fantastic! Thank you so much!!!
-
Dear everyone,
Chris M brought up on another thread that the inspector view available "pill" was not recoloured using the original code I put up. I went back to dig into the YNAB code to find all the other areas that have been changed with the latest colour update and found these were the places:
- Budget available "pills"
- Inspector view available "pill"
- Account header payment
- Account header overspending
As such, I have updated the code and provided below, and simplified it further so you can make your own changes without too much trouble. Also, I managed to find the exact colours that were used previously from YNAB's code, and updated the code with them. Lastly, I have included the full instructions so that those who are new to this will not get lost with the earlier posts.
Steps to Fix Your YNAB Colours
1. Assuming you use Google Chrome, download this "User CSS" extension:
https://chrome.google.com/webstore/detail/user-css/okpjlejfhacmgjkmknjhadmkdbcldfcb2. Go to your YNAB budget, and click the User CSS button next to your Chrome address bar. The User CSS side panel will open.
3. Paste the CSS code below into the side panel and the colours would be reset to the previous scheme:
:root{ --fill-positive:#16a336; --fill-cautious:#e59100; --fill-negative:#d33c2d; --text-positive:white; --text-cautious:white; --text-negative:white; } .ynab-new-budget-available-number.positive{ background-color:var(--fill-positive); color:var(--text-positive) } .ynab-new-budget-available-number.positive:hover{ background-color:var(--fill-positive) } .ynab-new-budget-available-number.positive .icon-goal .inner{ fill:var(--text-positive) } .ynab-new-budget-available-number.positive .icon-goal .outer{ stroke:var(--text-positive) } .ynab-new-budget-available-number.negative{ background-color:var(--fill-negative); color:var(--text-negative) } .ynab-new-budget-available-number.negative:hover{ background-color:var(--fill-negative) } .ynab-new-budget-available-number.negative .icon-goal .inner{ fill:var(--text-negative) } .ynab-new-budget-available-number.negative .icon-goal .outer{ stroke:var(--text-negative) } .ynab-new-budget-available-number.cautious{ background-color:var(--fill-cautious); color:var(--text-cautious) } .ynab-new-budget-available-number.cautious:hover{ background-color:var(--fill-cautious) } .ynab-new-budget-available-number.cautious .icon-goal .inner{ fill:var(--text-cautious) } .ynab-new-budget-available-number.cautious .icon-goal .outer{ stroke:var(--text-cautious) } .ynab-new-budget-available-number.cautious.credit svg,.ynab-new-budget-available-number.cautious.upcoming svg{ fill:var(--text-cautious) } .inspector-overview-available .positive,.inspector-overview-available .positive:hover{ background-color:var(--fill-positive) } .inspector-overview-available .negative,.inspector-overview-available .negative:hover{ background-color:var(--fill-negative) } .inspector-overview-available .cautious,.inspector-overview-available .cautious:hover{ background-color:var(--fill-cautious) } .accounts-header .accounts-header-payment .currency.positive{ background-color:var(--fill-positive); color:var(--text-positive) } .accounts-header .accounts-header-payment .currency.positive .icon-goal .inner{ fill:var(--text-positive) } .accounts-header .accounts-header-payment .currency.positive .icon-goal .outer{ stroke:var(--text-positive) } .accounts-header .accounts-header-payment .currency.negative{ background-color:var(--fill-negative); color:var(--text-negative) } .accounts-header .accounts-header-payment .currency.negative .icon-goal .inner{ fill:var(--text-negative) } .accounts-header .accounts-header-payment .currency.negative .icon-goal .outer{ stroke:var(--text-negative) } .accounts-header .accounts-header-payment .currency.cautious{ background-color:var(--fill-cautious); color:var(--text-cautious) } .accounts-header .accounts-header-payment .currency.cautious .icon-goal .inner{ fill:var(--text-cautious) } .accounts-header .accounts-header-payment .currency.cautious .icon-goal .outer{ stroke:var(--text-cautious) } .accounts-header .accounts-header-overspending span.currency{ background-color:var(--fill-cautious); color:var(--text-cautious) }4. You may change any of the colour values to those that suit you better. To do this, simply replace the colour code in the ":root" section in the code (bold-italics below):
:root{ --fill-positive:#16a336; --fill-cautious:#e59100; --fill-negative:#d33c2d; --text-positive:white; --text-cautious:white; --text-negative:white; }The items that begin with "fill" refer to the solid colour fills on YNAB, such as the pills, whereas the items that begin with "text" refer to the text colours in those pills.
So for me, I find the original orange indistinguishable from the green, and so I use mine with what we call the HTML orange (bold-italics below):
:root{ --fill-positive:#16a336; --fill-cautious:orange; --fill-negative:#d33c2d; --text-positive:white; --text-cautious:white; --text-negative:white; }You may refer to this link for the list of colour names available:
https://htmlcolorcodes.com/color-names/If you would like a custom colour, you may pick one using this link and type in the hex value with the hash (#) in front:
https://htmlcolorcodes.com/color-picker/ -
Isaac C. 1,000 'likes' for this. Thank you.
-
Isaac C. You are my hero!
-
George Peden for some reason your post disappeared. Personally I don't use the YNAB Toolkit, but if it helps everyone then please go ahead!
-
Isaac C. Someone beat me too it :-)
-
Isaac C.
Thank you!!!
I found that if I could eliminate all pills entirely, get black positive numbers and red negative numbers by simply using the names white, black, and red in your root section; and adding code for the case of zero values:
.ynab-new-budget-available-number.zero{
background-color:var(--fill-positive);
color:var(--text-positive)
}
.ynab-new-budget-available-number.zero:hover{
background-color:var(--fill-positive)
}
.ynab-new-budget-available-number.zero .icon-goal.inner{
fill:var(--text-positive)
}This meets my desire of getting rid of the obfuscating pills entirely. Now I can use goals and not have the stupid goal nags that don't tell me anything.
YNAB official customer support sucks, but the user community is pretty darn good at solving budget problems.
Note for Toolkit users: I needed to turn off the budget screen options of Unhighlight Postive Category Balances and Goal Warning Indicator color.
-
Isaac C. Thank you kind sir! I'm hopeful the YNAB devs will address this soon, and maybe the Toolkit devs sooner. I too suffer from red/green color blindness, and some browns.
-
Patzer this below might be somewhat more useful as it covers other areas where there are pills too. You might want to use "transparent" instead of white.
.ynab-new-budget-available-number.zero{ background-color:transparent; color:black } .ynab-new-budget-available-number.zero .icon-goal .inner{ fill:black } .ynab-new-budget-available-number.zero .icon-goal .outer{ stroke:black } .inspector-overview-available .ynab-new-budget-available-number.zero{ background-color:transparent; color:black } .accounts-header .accounts-header-payment .currency.zero{ background-color:transparent; color:black } .accounts-header .accounts-header-payment .currency.zero .icon-goal .inner{ fill:black } .accounts-header .accounts-header-payment .currency.zero .icon-goal .outer{ stroke:black } -
Isaac C. Thanks for the tip on "transparent." It turns out that doesn't work for me in the budget, because the black text doesn't show well when I select a category and I don't think I can dig through the logic to change it based on row selection. But transparent works great in the inspector.
I might play with the account header payment in a test budget, but I don't need it in my own budget because I don't use the standard YNAB credit card handling. But knowing more about the display is good, particularly if the YNAB development team decides to make more random changes in the future.
ETA: Found how to edit the fill for the selected row. Toned the color down to 75%, and now transparent works fine.
-
-
Sometimes I get the feeling the developers get restless on their lunch hours when there's no projects pending, so they go in and fix stuff that aint broken just to pass the time. The new color format is absolutely awful. Really kinda ruins the user-friendliness of the whole site. Please make it stop.
-
Molly McGuire I completely agree...the new colors are terrible...it significantly changes the user experience for me.
-
Green Trombone (73279a04b9d9)
Yes, Green... for the most part YNAB is pretty darn perfect and I really believe they've reached the point where they need to put it down for a while and maybe work on something else that's useful and helpful. Maybe a dedicated Grocery Shopping program or something. Every few weeks there's some little surprise (usually unhelpful and burdensome) waiting for us in the program and now it's like waiting for the other shoe to drop. Ive loved the program and been a devotee for almost a year now but I fear they may be "new and improving" themselves into oblivion. Think I'm gonna start exploring other options just in case. Thanks for your reply!
-
Molly McGuire If there's no projects pending, then the customer base has a serious problem. They've been promising certain things have been coming soon for the last 3+ years.
-
-
Just adding my voice to the chorus. The new colors are stressing me out. I can no longer tell if I'm over or underbudget unless I look directly at the number and squint at it. Now I'm panicked because now I'm having to double and triple check every category. Please revert!!!
-
Is this really what it's supposed to look like? I'm not color blind, but that dark text on red is very hard to read. I can't imagine if I had an issue distinguishing colors.
I also find adding the icon in front of the numbers make everything harder to read. Can't there just be numbers on white background? And if you want to put icons on there or color indicators, put them to the side?
-
Lego My red is much lighter, more like other colors in your screenshot.
-
Lego I would prefer black numbers on a white background, with any color flags *beside* the available column instead of wrapped around the number as a pill. However, YNAB has made it abundantly clear that what I would prefer is irrelevant to what happens.
In the spirit of the workaround for colors, some time ago I found CSS code to turn off the annoying goal nag icons that don't give me any useful information. Follow the instructions from Isaac C. above, and here's the code to get rid of the icons:
.icon-goal, .icon-credt, .icon-upcoming {
display: none;
}I have none of the annoying little icons regardless of whether Toolkit is enabled or disabled. Yes, YNAB really should let users turn off the stupid icons as well as choose what colors are best for each individual user's eyes; but as stated above, what I think ought to happen is irrelevant to the developers.
-
-
OK I went searching through the Toolkit settings and found the culprit. There are other settings that override the colors in the toolkit, too, but I had those off already.
I actually find the text of the numbers more of my problem. I can see colors but would prefer more contrast on the text.
-
I don't love using the app (mostly because I prefer my morning routine that includes checking email & updating YNAB on the computer) but the colors have not changed in the app *yet*
-
Purple Admiral Same here! And now I’m afraid to update the app...
-
-
Apparently they did not check for WCAG2 compliance of text on background contrast ratios. Most of these combinations fail AAA recommendations, many of them AA.
