How I use Luminosity to assess colour contrast
A cool trick I learned to determine if there is enough contrast between two swatches of colour or in a screen’s layout overall
Homage to the Square by Josef Albers. Apparently he painted over 1000 of these.
WCAG colour contrast checker. I passed!
This is especially important for individuals with low vision or colour vision deficiency (which I learned recently is a wide spectrum, and not limited to 2 or 3 distinct types). Elements that are close to each other or text layered on top of something need to maintain a 4.5:1 contrast ratio according to WCAG guidelines (3:1 for larger text) in order to be discernable by people with low vision acuity.
There any number of free, online contrast checking tools or plugins for the most accurate checks, but for a quick peek that doesn’t involve plugging in a lot of numbers, use the luminosity blend mode in any design tool.
To demonstrate how it works, I’ll analyze some screens from the winners and finalists of the Apple Design Awards in 2023.
Diablo Immortal
Screenshot on the left, and colour removed on the right using the luminosity blend mode.
Yikes! Dialogs and a lot of other screens in Diablo Immortal are really really dark overall. The light text on the burgundy buttons is WCAG compliant, but the larger UI elements against the backgrounds failed all the contrast checks.
Below is one of the gameplay tutorial screens which is better, but one thing that stands out in the luminosity screenshot is the health bar in the top left, the dark red really blends into the background. Other information on the screen isn’t quite as important (the menu button, for example) so while I feel like the hierarchy works on this screen, some things might be hard to find for certain users).
Gameplay screens are a bit easier to read! Except for, uh, the somewhat important health bar. I had a hard time noticing it while playing.
Ancient Boardgame Collection
This muted colour scheme makes for less accessibility.
The gameplay screens for Ancient Boardgame Collection are easy to view, but their menus and modals are on the fence. The green buttons on the left are almost 1:1 (i.e. none) and the only reason they work is because of the dark outline, so maybe it’s not the most fair ratio to check.
On the right, you can see how the [ Try Once ] and [ Dismiss ] buttons look pretty different without colour, which may present some difficulties for red-green colour blind users. Only the brighter green button is WCAG compliant on the left.
Overall the colour scheme of this game is really nice and muted, but it could be problematic for some players.
Stitch
This one surprised me!
Stitch is a cute cross-stitch themed colouring game that was praised for its accessibility settings, but they only apply to one of the gameplay elements: larger numbers.
When I turned on the accessibility features, I was disappointed to see that the dark main screen (on the right) remained the same. In the Challenge box at the top, the title text fails the WCAG check. So do the level progress bar and the outlined circles for each level.
What surprised me the most was the buttons on the left. They are far from WCAG compliant and the contrast between the blue buttons and background colour is near zero! The luminosity screenshots really help to highlight these issues at a glance.
To summarize, this is a method I use to quickly assess if something I’m working on is going to be legible and accessible, or to match the brightness of different colour palettes. A contrast checker should still be the deal breaker, but even then, there are always other confounding factors to consider that may push a passing ratio over the edge.
My favourite recent example of an accessible colour palette that looks really nice is the Wise (formerly Transfer Wise) rebrand. I love what they’ve done here!
