Huet A React library for accessibile theming. Choose the contrast you want, and let Huet calculate the colors for you.

Demo ↗ Project Source

Dec 4, 2018-Mar 21, 2019

Summary

A React library for accessibile theming. Choose the contrast you want, and let Huet calculate the colors for you.

Demo: https://markmiro.github.io/huet

Motivation

It’s often assumed that re-branding a website is easy. In practice, there’s a big risk of accidentally creating an unpredictable number of contrast issues. This will tend to happen in parts of the UI that are often not tested, or are difficult to test, like error states—which is especially tragic.

Goals

Instead of letting the developer define the colors they want in the UI. Instead, they define the contrast they want. If you’re adding a button on top of a black page, instead of saying you want a white button, you instead say “I want a button with 100% contrast against the background”.

<Container bg="black">
  <Button bgContrast="100%" textContrast="100%">
    Button
  </Button>
</Container>

In the above code, the color dependencies look like this:

container background <- button background <- button text

Text is calculated off of the button’s background which is calculated off of the container’s background.

If we change the background bg="white", we want all the children to update recursively.

<Container bg="white">
  <Button bgContrast="100%" textContrast="100%">
    Button
  </Button>
</Container>

Solution

The first step was to see if I could get the contrast calculations working, even for intermediate values, and to have them propogate through the UI using React’s context.

I created an example based on the GitHub website UI to have a more realistic test case.

I eventually created a library called Huet. This library comes with a helper UI to help you test how well your Huet-colored interface will work with different themes. It’s a little buggy, but it’s a start.

Learnings

The biggest learning was I didn’t have a set of people that wanted to use it. I figured I’d build it because I wanted something like this, but the complexity involved in building it was higher than the benefits I gained.

Related posts

Themes are about accessibility first, personalization second

Stack