<?xml version="1.0" encoding="utf-8"?>
Open full project

The decision to redesign Trello’s color system was driven by the need to enhance visual clarity, user experience, and accessibility. In choosing the new color palette, several critical factors guided our decisions.

Firstly, we aimed to improve visual differentiation. The existing colors in Trello's palette often lacked the necessary contrast to distinguish between different elements easily. This sometimes led to confusion and reduced efficiency for users. To address this, we selected colors that are distinctly different from one another. By incorporating a broader spectrum of hues and ensuring a clear separation between colors, we have created a more intuitive and visually appealing interface.

Improving readability and visibility was another primary concern. Many users reported that some colors in the old system made text and interface elements difficult to read, especially in low-light conditions. To rectify this, we focused on high-contrast color combinations. We selected colors that not only stand out on their own but also provide sufficient contrast when paired with text and other elements. This ensures that information is easily readable, reducing eye strain and improving the overall user experience.

Accessibility was a key factor in our color selection process. We adhered to the Web Content Accessibility Guidelines (WCAG) to ensure that our new color system would be inclusive for all users, including those with visual impairments like color blindness. We conducted extensive testing to ensure that our chosen colors meet or exceed accessibility standards, particularly in terms of contrast ratios. This means that all users, regardless of their visual abilities, can use Trello effectively and comfortably.

Maintaining consistency with Trello’s brand identity was also crucial. While introducing new colors, we ensured that they harmonize with Trello’s established visual language. This balance between innovation and brand consistency helps in providing a seamless experience for users, making the transition to the new color system smooth and intuitive.

Share your insights — leave a project review and help others grow their skills

Reviews

2 reviews


I dig the way that you have templated all of this; really clean and easy to follow. I wish more figma files had this type of structure.


I really appreciate the structure and clarity you've brought to this template; it's very easy to follow. I wish more Figma files were organized like this.


10 Claps
Average 3.3 by 3 people
5 claps
4 claps
3 claps
2 claps
1 claps
<?xml version="1.0" encoding="utf-8"?>