Rangi Bora

Category :

Experiment

Position :

Creator & designer

Duration :

2018 - 2019

Website :

rangibora.com

Problem

In 2015 there were no websites that generated harmonious color combinations that passed WCAG 2.0 AA/AAA standards. So I decided to build Rangi Bora to fix that.

What is WCAG 2.0 AA/AAA?

WCAG stands for Web Content Accessibility Guidelines. These are a set of guidelines that websites should be following in order to ensure that they are accessible by everyone, irrespective of disabilities and age. For Rangi Bora I focused on SC 1.4.3 that relates to the visual presentation of text and images of text ensuring they have a high enough contrast ratio.

That contrast ratio is defined as either AA or AAA. Level AA "requires a contrast ratio of at least 4.5:1 for normal text and 3:1 for large text, and a contrast ratio of at least 3:1 for graphics and user interface components (such as form input borders). Where as level AAA requires a contrast ratio of at least 7:1 for normal text and 4.5:1 for large text."

Large companies, such as financial institutions, need to make sure their color combinations pass either the AA or AAA rating to ensure key actions and information - such as buttons, alerts, and notifications - can be seen, otherwise they open themselves up to lawsuits.

Does Rangi Bora mean anything?

Yes, it means 'the best color’ in Swahili.

Background

It all seemed so simple at the beginning as things usually go. There were two problems I wanted to solve with Rangi Bora:

1. No accessible color generator from 2015–2018 was actually generating colors from our full perceivable color range. They were instead using hard coded sets of hex colors that they had put together, which limited the possible variations of available colors.

2. There were no accessible color combination generators.

My first step was to develop a high level understanding of color, our perception of it, and how, if possible to create harmonious combinations that are all WCAG AA compliant to a single input. This proved to be quite difficult and was finally cracked with the help of Anton and Flor after long discussions and many napkin sketches.

Process

Ideation

Having done some inspirational research for the project, I set out to quickly create a proof of concept for what I had in mind. This was before I had invested any time in diving deep into color theory and color perception.

My mindset at that time was to tackle the layout of the application first. I quickly put together multiple wireframes to stress test how this would function across devices and how I'd like to visually represent the color combinations.


The beginning - Rangi Tatu

My initial direction was to create a trio of harmonious color combinations, and I called it Rangi Tatu or "Three Colors" in Swahili.

I would also combine the trio of palettes with generating single colors on the fly, however since there was already a number of accessible color generators out there, the only main difference would be that Rangi Tatu created colors from our visible color gamut. So the idea of surfacing individual colors was scrapped.


Final Form - Rangi Bora

Further research and discussions with Anton and Flor on how to build a program to generate harmonious colors, revealed that the three suggested colors had to be modified to two or four. The reasoning behind this was that we would generate four colors since we'd use a combination of split-complimentary and triadic triangulation to generate enough variations between the palettes.

In order to reduce complexity, we decided to only serve up WCAG AA color combinations.

So Rangi Tatu evolved into Rangi Bora.

End Product

Special shout outs to the talented Flor for building this project, and to Emily for supplying the truly unique names.

The most current version is live at Rangi Bora. Enjoy!