Embracing Technology to Solve Design and Accessibility Challenges

In web design, you often encounter a significant challenge: clients or customers can modify your product in ways that may stretch beyond your immediate control. And usually, this is one of your product's unique selling points. You are allowing customers to customise the product and seamlessly integrate it into their suite of tools, making it uniquely theirs.

At Workhuman, I have personally tackled this challenge head-on. Our customers desire our product to reflect their brand identity, allowing them to adjust its look and feel so that their staff might need to recognise it as an externally sourced tool.

However, this customisation comes at a cost; ensuring client changes don't harm the overall user experience can be tough. And ensuring your product meets WCAG guidelines can be tricky when clients change your colour schemes. While it is challenging, I've found it's certainly not impossible to maintain accessibility.

An issue recently came up in our product, particularly with our award banners, where clients have complete control over the banner's background colour. Each award has a distinct colour, and we use that colour as the background for the award banner. However, accessibility problems arise when the background colour chosen does not contrast sufficiently with the white foreground text, causing our product to fail WCAG standards. Not great, to be honest.
‍

So how could we solve this?

Well, we could stop clients from changing the banner colour or limiting their choices. But our clients love their ability to customise our product, so doing this would not be great.

Another approach might involve adjusting the design—perhaps adding an overlay or a drop shadow or redesigning the banner entirely. While this is a standard route for many designers, it requires extensive validation across various scenarios, making it less than ideal.

Luckily, technology can solve these challenges without a banner redesign.

We dynamically adjust the foreground colours to ensure sufficient contrast. Knowing the background colour, the existing foreground colour and the required contrast ratio allows us to move beyond merely toggling between black and white, which could seem simplistic and uninspired.

Instead, we used code to generate a new foreground colour by either tinting (adding pure white) or shading (adding pure black), depending on the background colour. This approach ensures the foreground and background colours have enough contrast and are aesthetically pleasant. 
‍

How it works?

First, we calculate the contrast between the background and foreground colours. If the contract fails to meet the minimum ratio of 4.5:1, we generate a new foreground colour that complements the background colour's hue.

We then adjust the lightness or darkness of this colour to discover a tint or shade that achieves enough contrast.

Once we meet the minimum contrast ratio, we apply this new foreground colour to the text and images on the banner, thus ensuring optimal contrast and adherence to accessibility standards.

The beauty of this automated approach is that it easily handles any possible background colour.

‍

What it looks like?

‍

A sustainable approach to design challenges

When tackling design challenges, it's easy to default to a complete redesign of the existing experience or reject client requests. However, only some design problems need such a drastic approach, but we've the bad habit of always wanting to redo. We should consider how to solve these issues using technology and other readily available tools while being mindful of the waste generated by repeatedly redesigning screens.

For instance, could a cleverly crafted email serve the same purpose instead of creating a new dashboard?

I encourage you to embrace the possibilities that technology offers. By mastering the tools and techniques at our disposal—such as dynamic colour adjustments, algorithmic layouts, or responsive components—we can forge innovative, scalable, and adaptable solutions to various user needs.

The next time you face a design problem, before considering a complete overhaul, ask yourself if a technical tweak, an automated feature, or an existing tool could effectively address the issue. This approach saves time, conserves resources, reduces waste, and enhances user satisfaction without compromising design integrity.

Adopting this mindset can fundamentally transform how we approach design challenges, steering us towards solutions that are as smart and sustainable as they are beautiful. 

Remember, great design isn't just about aesthetics but functionality, adaptability, and sustainability. How sustainable a design is should be as crucial as how well it performs under different conditions and constraints.

I'm on a sustainability journey in my design, and I encourage you to do the same.