An exploration into accessible branding colour choices that meet WCAG AA guidelines
The Requirement
The Akari platform aimed to meet WCAG AA compliance. As the platform grows to include multiple products, each product will be represented by a distinct WCAG AA compliant colour, which means that multiple compliant colours are needed.
There are three levels. The A must be met to achieve the AA and so on:
A for large text and UI elements, which require a contrast ratio of 3: 1.
AA is required for regular text. It requires a contrast ratio of 4.5: 1.
AAA requires a contrast ratio of 7: 1.
AA is required for regular text. It requires a contrast ratio of 4.5: 1.
AAA requires a contrast ratio of 7: 1.
Therefore, the Akari platform must ensure that all text and images of text maintain a contrast ratio that meets or exceeds the AA level, and for UI elements and large text, the A level must be met. By adhering to these guidelines, the platform will be more accessible to all users, including those with visual impairments.
Using HSB Colour Values, not RGB
The primary drawback of the RGB color model is that it not only fails to accurately reflect the true color space, but it also lacks intuitiveness. The three values involved in creating a color - Red, Green, and Blue - do not provide a clear understanding of the process.
A better alternative is the HSB color model, which addresses the lack of intuitiveness in RGB by transforming the values into more comprehensible components: Hue, Saturation, and Brightness. This model represents colours on a straightforward and easy-to-visualize 360-degree color wheel. HSB simplifies the color model process, making it easier to understand and manipulate.
Hue - The values are measured in degrees, based on the colour wheel.
Saturation - Measured in percentage, based on the richness of the colour.
Brightness - Measured in percentage, based on the presence of light in the colour.
Luminosity & Contrast Ratio
There’s a fourth property, on top of Hue, Saturation, and Brightness that needs to be considered: Luminosity. This is the perceived brightness of a colour. This is what is important for accessibility.
As can be seen in the 2 colours below, they both have a 100% brightness, but the blue is clearly darker than the yellow. If the two colours are desaturated and the brightness values are taken, the difference becomes clearer. This is what the contrast ratio is based on for WCAG.
HSB Colour Grid
I broke down “all” of the potential colours to what I call HSB Colour Grid. Doing this allowed me to truly understand the parameters of accessible colours and to communicate it easier to stakeholders. I separated entire range of the colour of Hue in 10° steps. Below each Hue tile is the Brightness stepped down by 10% for each tile.
Y axis: Hue
X axis: Brightness
Contrast Ratio to Black and White
Most texts are either displayed as black or white. Of course, there are many exceptions to this, but for the sake of simplicity and saving time I stuck with the two colours.
The ratio for the black to colour tile is displayed in black text.
The ratio for the white to colour tile is displayed in white text.
Separating Compliant Colours
My assumption before was that the separation between the colours that are compliant to black and those that are compliant to white would run different paths.
Colour tiles that met the 4.5 ratio for black is separated with a black line. Colour tiles that met the 4.5 ratio for white is separated with a broken grey line. Very interestingly, as you can see in the colour grid below, they pretty much run the same path. This instantly made me wonder whether it’s possible to have a colour to be compliant to both black and white. Achieving this would mean just a bit more flexibility in designing UIs with the one colour.
Quick, but interesting side note:
From this, I also learned that if a gradient of two compliant colours are used, all of the colours in between will also be compliant. The same applies to the opposite. If two none compliant colours are used then the colours between won’t be compliant.
Saturation Levels
Colours for AA Contrast Ratio
I created the color grids above to show the range of colors available to us within a 4.5 ratio. In the color selection below, I chose the most vibrant, saturated colors to create maximum visual impact. Red is easily recognisable, but yellow is difficult to distinguish. Moving to the right, green retains its vibrancy, but to maintain a balanced ratio for white and black, blue had to be desaturated, limiting our options for creating a true violet. As a result, we are forced to stay within the magenta range for purple hues.
Admin Blue
Partnership Teal
