Michał Jawiński

Designer

How I helped make the ChatWidget WCAG AA accessible

Context

A high-traffic widget used by thousands of companies was entering a new era of accessibility requirements

In 2021 the LiveChat widget was used by more than thirty five thousand companies and handled about one million chats each week. As the EU accessibility deadline approached we began receiving daily questions about whether the widget met the required standards. It did not. The default setup was not accessible and customer customisation often made things worse. My job was to make the widget accessible for visually impaired users and to introduce safeguards that kept it that way across all configurations.

if you let them break it they will do it

Problem

No color safeguards caused widespread accessibility failures and blocked public sector deals.

The widget allowed very broad color customisation which often led to unreadable states. Customers could create low contrast setups without noticing and these issues surfaced in support as reports that the widget does not work when the real cause was white text on a white background. Public sector clients required accessible interfaces and we could not meet their standards, which made deals harder to close. Updating defaults was also risky because thousands of existing customers were already using custom themes that did not meet accessibility requirements. These broken configurations also reflected poorly on our brand since the widget carried the LiveChat trademark in the footer.

Action

What I did

  • Audited the entire widget and documented all colors, states, and accessibility risks

  • Analysed customer configurations at scale to find the most common contrast failures and to understand which color settings customers never touched.

  • Added safeguards that prevented inaccessible combinations during setup

  • Updated default settings so every new widget started from an accessible baseline

impact

What Happenned

  • Passed an external WCAG AA audit with no blockers and get accreditation https://www.livechat.com/legal/widget-accessibility/

  • Reduced accessibility related support tickets by x%

  • Helped unlock potential deals with public sector organizations

aftermath

My learnings

I learned that accessibility is a system level challenge rather than a matter of styling. The project required me to build design tokens that scale across the entire widget and it strengthened my understanding of how to approach problems on the system level. It also showed me that accessible color schemes are not a limitation and do not diminish the look and feel of the product.