
Update: Change in Pill Colors
Hello everyone,
We recently introduced a change to the colors (the “pills”) around Available amounts on the budget in order to bring those colors into compliance with Web Content Accessibility Guidelines. We were made aware that these changes actually made it more difficult for some to quickly identify key information, which is the opposite direction we want to move in for accessibility.
Today, we’re following up with two related updates, which will roll out to YNABers over time.
- We've tweaked those new colors a bit. It’s a small change that made a significant difference for some of the folks who tested it in the past weeks.
- We’re introducing the option to use the classic colors, if that’s your preference. To check that out, open your Budget Menu by clicking on the name of your budget in the top left, select My Account, and scroll down to the Options section.
If you'd like early access to these options, please send us an email at [email protected]! Otherwise, please know that your account will automatically be granted access within the next couple of weeks.
We've got lots more work to do to make YNAB even more accessible, including not relying solely on color for important signals in the app. We're excited about that work to come.
-
One piece of (professional) advice for your design team (or development team): Don't sacrifice contrast for color or color for contrast. Embrace both and enhance the colors with contrasts. This makes large sets of data infinitely more glance-able in compliance with WCAG.
Here's a quick mockup what a design could look like that embraces both color and contrast for good glance-ability for both perfect and impaired color vision -
Faness
If YNAB has any ability to influence the appearance of text on this forum, you might also wish to increase the contrast here. I had been happily reading solid black text instead of the default dimmer grey, until you posted an ordered list in this subject. Okay, I need to add to the CSS to make the forum more readable. I had been using:
.formatted p {color:black}
.topic-summary__text-link {color:black}
.idx-recent-topic__title {color:black}And I just added:
.formatted ol {color:black}
.formatted ul {color:black}Ah, yes. Much easier on the eyes. But it would be better not to have to dig through the CSS code to find how to correct the poor contrast.
-
I just got the new rollout yesterday. Previously I was in the colorblind camp of not being able to use the new colors but I’m happy to report the tweaked new colors work well for me and look good! And being able to revert to original colors should help everyone affected by this.
Thank you for making these updates and making YNAB useable again!