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.
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.
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.
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.
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.