Notion - Accessibility Color System

You approached accessibility solidly and I can see you did the work with contrasts. The methodology is clear. Each color category has its justification and verified ratios compliant with WCAG. I particularly appreciate that you didn't stop at dry calculations but showed concrete problems in the current Notion UI (that poor visibility of the border and "New Project" was a good catch).

However, I have doubts about a few things. First, I don't see any user research here. Did anyone actually struggle with readability in Notion? Is this a problem based on data or just a theoretical observation? Second, I'm missing broader business context. How will this change affect brand recognition? Does the Notion team even want to change these pastel colors that are part of their DNA? And finally, there's no word about testing. Do these new colors actually work better in real conditions?

The project is well done from a technical standpoint and I can see you understand accessibility principles. It's a solid foundation for discussing how to actually approach this challenge in a real project.

Hey Marceline! 👋

Your color system strikes a great balance between the calm aesthetic of Notion and the practical needs of a productivity tool. The way you've documented accessibility considerations throughout shows real attention to how people will actually use these colors.

The secondary color improvements are noticeable. Switching from overly transparent containers to colors with proper contrast makes a tangible difference when it comes to scanning tasks and identifying areas of action. Boosting vibrancy while keeping the pastel foundation intact feels just right for Notion's personality. Your tertiary colors solve a real problem, too: they bring enough punch to make highlighted content pop without screaming for attention. 👏

One thing that could be refined: Figure 4 feels cluttered with all the connecting lines. Have you considered using color-coded circles with numbers instead? Also, your warning state doesn't meet WCAG standards. Replacing the light text with dark charcoal text would solve this issue without losing visual impact.

For your next iteration, consider showing all button states (hover, pressed, disabled, and focus) for each color role. This is an easy way to determine if you have enough shades in your palette to meet real-world component needs.

Hello Marcelin,

You have delivered a highly detailed and professional color system redesign for Notion, effectively balancing the brand's aesthetic with strict WCAG Accessibility requirements. The documentation of all color categories and clear rationales for your choices are exceptional.

What's Good

🌟 The submission is exceptional in its documentation, strategic thinking, and adherence to accessibility standards.

• The design rigorously confirms WCAG compliance for nearly all color pairings, explicitly showing contrast ratios against their respective backgrounds for Primary, Tertiary, and Neutral colors. This strongly satisfies the Accessibility criterion.
• The choice of blue as the Primary color is well-justified by aligning with Notion’s "cool, calm and collected" brand personality and the color psychology associated with productivity.
• The analysis of the original design's flaws (dull CTA, faint borders) is excellent, and the redesign successfully addresses these by implementing higher contrast for action elements (4.5:1 ratio) while maintaining the aesthetic.

Areas for Improvement

While the project is very strong, the following areas could add nuance and enhance the Visual Design and Presentation of the System.

• The System Colors section notes an intentional "slight contrast reduction in the yellow toast" to keep icons visually consistent, accepting a 2.09:1 ratio. While you acknowledge this is low-severity, falling below the WCAG AA minimum of 4.5:1 for text (or 3:1 for non-text components) on a yellow background could still fail accessibility checks for key messaging.
• The Information State uses Notion's "On Surface" charcoal gray (#2C2C2B). While this reinforces brand identity, using a distinct color would differentiate system information from standard text/surface color, making the communication less ambiguous.
• The Tertiary section details the vibrant palette and high contrast ratios but the UI example (Figure 3) primarily shows the neutral navigation.