Yesterday during my Monotype webinar on colour accessibility, a few questions came up that I didn’t get time to answer in the Q&A. One of them was from Kirsty:
As designers, should we think in grayscale first when designing? And color second? ... as a sort of flavoring to ice cream?
Kirsty, if you’re out there—apologies if I wasn’t clear in my talk—I definitely don’t think this way!
Designing a layout in greyscale can help designers achieve good contrast without being caught up in which colours should go where—kind of like designing a hi-fi wireframe.
We should definitely not think in greyscale—that’s a surefire recipe for ending up with a boring palette—something we clearly want to avoid.
Brainstorming palettes should come early in your design process. Once you feel you have some solid options, you can then move into designing your page and consider doing it in greyscale to focus on achieving good contrast and design hierarchy without the distraction of colour. When you feel comfortable with that design, you can then go wild with introducing colour—take your palette ideas and work them into your greyscale designs until they feel right. I often find that this process is quicker than designing in colour first because I don’t spend ages pulling colours out of the air without much rhyme or reason. It’s so easy to spend hours getting caught up in Photoshop/Sketch/etc. trying every colour combination imaginable without much progress on the actual layout of a page!
For more information on this technique, check out my Skillshare classes on Colour Workflow—I demonstrate this from start to finish and hopefully it’ll make more sense there! The first is Color on the Web I–Designing Cohesive Palettes, and the second part is Color on the Web II–Design for Clarity and Compliance.
Is using red a bad choice for accessibility?
No, not at all—it’s all about how you use it. A red link in a paragraph of black text can create issues as it can blend together for a person with colour blindness, but it can be easily solved by adding an underline on the inactive hover state. Using red and green in a line chart can be fine if the lines have different patterns or widths. Use your discretion and you’ll be fine!
My webinar should be posted soon for anyone who’d like to watch again (or for those who missed it). You can still sign up here to get a link when it’s available—just scroll right to the bottom of the page.
Thanks for tuning in!