Contrast Mate

Contrast Mate helps ensure your designs are always accessible. If your design's colors fail the contrast checks, Contrast Mate gives you recommendations which you can apply to your design with ease.

Comment

Inspiration

As a designer, ensuring your designs have good contrast can be challenging and not always intuitive. When designing on Canva ourselves, we've struggled with gauging the contrast levels of our design which in turn, results in poor accessibility. We've often wondered why a contrast checking tool isn't natively available on Canva so we set out to build it!

Moreover, another challenge for designers is finding alternative colours that meet good contrast standards in case their current design's contrast fails. We found there was a huge gap in both Canva and third-party sites on web for this very useful service, so we also decided to include this in Contrast Mate!

What it does

Contrast Mate helps users ensure their designs meet accessibility standards. It allows users to check the contrast ratio of colours from the Canva design, and provides recommendations based on the Web Content Accessibility Guidelines (WCAG) 2.0, if any contrast checks fail.

How we built it

  1. We first brainstormed ideas for the app and settled on building a contrast checker and smart colour recommender.
  2. We used Notion as our project management tool and delegated the developer stories amongst us.
  3. We then set out to design the UX to flesh out what our vision for the app is on Figma.
  4. We forked the Canva SDK starter kit from GitHub to use the UI kit and the API functions from the Canva SDK that are integral to our app.
  5. In parallel, we worked on the front-end (using React) and the algorithm (using Typescript) and integrated it once the algorithm was completed.
  6. After integrating the algorithm, we ensured to test thoroughly and fixed multiple bugs that came after the integration.
  7. We added another feature that allows you to render the colour swatches onto the Canva design canvas using the SDK.

Challenges we ran into

  1. We had a lot of dependencies on elements of the Canva UI Kit which were still under development or under preview (such as the Colour Selector API - which is an integral part of our app). Thankfully, the Canva Dev team were able to push these out before the hackathon ended!
  2. Since we were curating a recommendation algorithm for alternative colours (if contrast checks fail) from scratch, it took a lot of testing and gaining a comprehensive understanding of colour theory to validate if our algorithm was doing what we set out to achieve. When trying to develop the logic for the recommendation system, we had to work with multiple colorspaces which proved to be quite the challenge as each colorspace had unique properties. We had to keep this in mind when trying to adjust the colors. For instance, in the HSL colorspace, changes to hue do not affect the color if the saturation is 0, or if the lightness is 1 or 0. We also conducted a fair amount of experimentation to determine which colorspace to work with and which channels to adjust to obtain a color that passed all the tests.
  3. We had to fix numerous bugs related to the algorithm once we integrated it into the front-end, where we could visually see the colour swatches rendered onto the app.
  4. It was a slight challenge to figure out how to draw circles using paths to render the recommendation colour swatches onto the design canvas.

Accomplishments that we're proud of

We're extremely proud to have a working algorithm that recommends colours in the case the contrast checks fail for a given colour combination.

If the input colors do not pass any one of the above requirements, Contrast Mate provides recommendations for the foreground and background colors. It gives at most 5 recommendations for each color.

  • The first 2 colors of the recommendations are found by adjusting the lightness of the original color. These colors are the most similar to the original color.
  • The next 3 colors of the recommendations are found by adjusting the hue, lightness and saturation of the original color. These colors are provided to give the user more variations of the original color.

What we learned

We learnt numerous things throughout this hackathon but notably, as below:

  1. We learnt a lot about colour theory and now, we have a deeper understanding of concepts such as lightness, saturation and hue and how this reflects on the colour code.
  2. We got to work with a new tech stack - we learnt React and Typescript on the fly to build our app!
  3. We learnt how to design and develop with an existing brand kit and also introduce our own components where necessary and ensure it meets the design guidelines of Canva.
  4. We massively improved on our documentation skills - we really want to go live on Canva (hopefully soon!) so we thoroughly documented how to use our app, our T&Cs and privacy policy as well as a support website so our future users can use our app with ease.

What's next for Contrast Mate

We aim to release onto the Canva marketplace for public use as soon as possible. We want to get user feedback to continue to improve our app and even expand to a web app!

Built With

Share this project:

Updates