In this blog, Bobby Ly contemplates whether accessible colour combinations have to feel limiting, or whether they can be a creative spark. Using colour contrast comparisons as a practical tool, he shows how setting constraints early makes the design process smoother and more intuitive.
The problem
If you spend enough time reading accessibility discourse, you’ll encounter the opinion that accessible design is boring. But what if the aspect of colour and contrast in accessible design could be pragmatically designed? A space for creative exploration and play could be defined before the blank canvas is encountered.
The context of colour
Kenya Hara writes in his book Designing Design: “The essence of design lies in the process of discovering a problem shared by many people and trying to solve it”. Buried in WCAG success criteria 1.4.1 Use of Color is a borderline philosophical statement: “Not everyone sees colors or sees them the same way”. In 1.4.11 Non-text Contrast: “Some people cannot see elements with low contrast”. Colour and contrast perception is a problem shared by many people.
In The Guardian, Ben Thompson writes that Dr Patrick Mineault “realized he saw green and blue differently to his wife. He designed an interactive site that has received over 1.5m visits”. The website is a colour discernment test, one with the data from millions of people.
One common complaint is along the lines of “that’s neither green nor blue; I would have called that teal”. This complaint alludes to the linguistic relativity of colour or as Dr Mineault says, “People have different names for the colors they see”. With this in mind, how do we translate and demonstrate accessible colour to creative practitioners across the world?
Constraints
Design always has constraints or limitations. Accessibility guidelines can operate as a constraint-as-tool. Take brand guidelines for example; they are a set of instructions and limitations that communicate how a brand should be perceived. Have you seen brand guidelines that show the brand’s colours against one another? UCLA has a colour contrast comparison showing their colours arranged as columns and rows, each one intersecting with each other in a cell. Darker Blue #005587 text set on a Darkest Gold #FFB81C background reads as a contrast ratio of 4.5:1; it passes the threshold stated in WCAG Success Criteria 1.4.3 Contrast (Minimum).
So what?
The problem that colour contrast combinations help solve is how a product is perceived. Whilst it may be many months (or years) before such an issue arises, codifying accessible combinations early lays the groundwork for a smoother design process down the line. And we know that constraints provide necessary friction to the creative process. The structure of the combinations helps design to blossom, rather than be boring.
In the book Design for All? Inclusive Design Today, UX designer Florence Okoye writes, “one cannot afford to make any assumptions about which patterns are familiar or not”. Establishing constraints for colour combinations still encourages creativity and play but not at the cost of accessibility. Creating and using colour contrast comparisons helps shift accessibility left. They allow practitioners to know which combinations are accessible at the start of the process and prevents headaches and heartaches in the future.