Color Systems and Accessibility

Streamlining Website Building with Color Algorithms

Create a accessible website builder with easy color manipulation

My team and I worked to diagnose the problems with the existing website-building product by analyzing user feedback and discovered that users were concerned about ruining the site when they changed colors.

Responsibilities
  • UX Research
  • colour strategy & algorithm
  • Color scheme palettes
  • Collaborating with cross-functional teams

User Needs:

Our research revealed that users often kept the original color scheme or made minor changes. They needed an easy way to manipulate website colors without compromising the design, while maintaining brand identity and accessibility.

Solution

We developed a new color system that enabled automatic color changes, maintained legibility and flexibility, and preserved brand identity and accessibility. This resulted in a color palette that allowed users to change website moods easily without any accessibility concerns.

  • Automatically changes all the section colours accordingly with legibility passed when the user's one click.
  • The new design colour palette system enables flexibility and consistency across the users' site.
colour palettes

Color Systems for Users

We used the 6:3:1 color golden ratio to select the three main colors (primary, supporting, and secondary) and the monotone colors, black and white. We assigned each element a specific color, enabling flexibility and consistency across the site. All section colors changed automatically with legibility maintained when the user clicked one button.

arrow_forwardUser-friendly color palette system that allowed users to change website colors easily

colour palettes
[Color selections]
colour palettes
[Color palettes]
[Color palette usage]

Color Algorithms for Designers and Engineers

I introduced the color system algorithm to engineers and explained the color pattern expansion strategy for each element. I created a designated color change method for each case, incorporating the number of cases that can occur in color use when users change layer options.

arrow_forwardEnabled the website to respond to user preferences preserved the site's identity and accessibility with just one click.

  • Introduced to engineers how to apply colour system algorithm.
  • Explained colour pattern expansion strategy to the elements.
  • Meeting accessibility standards for color contrast using W3C guidelines.
[Color Algorithm]

Color Palette Mapping Strategy for Engineers

To implement the color palette mapping strategy for engineers, I derived the number of cases that can occur in color use when users change layer options. I created patterns between the elements affected by the color change for each layout and developed a designated color change method for each case.

arrow_forwardEnabled a streamlined website building process.

  • Enabled the website to respond to user preferences following the palette’s theme
  • Met accessibility standards for colour contrast.

Takeaways

Our solution addressed user needs for flexible and accessible color systems while maintaining brand identity and adherence to accessibility standards. The new design color palette system enabled users to easily manipulate website colors without compromising the overall design.

Innovative approach achived,

  • Reduced development time
  • Increased productivity
  • saved money for the product owner
  • Fully satisfied the accessibility for all users
Increased reuse and productivity

Thoughts:

Making algorithms and strategies were fun for me.
I felt accomplished when things functioned as intended with minimal user Operation required. Simplifying the logic for programmers was also enjoyable.
I created the algorithm first and discussed it with the programmers. The colour logic made designers happy with a smooth and simple operation, not causing any issues with the website templates.
What fantastic cooperation!

Thank you!

TOP
Loading...