Why Color Contrast Is Crucial in Digital Design
Color contrast is not a minor design detail. It is a fundamental requirement for digital accessibility. Yet in many organizations, it is still treated as an afterthought, especially in areas like marketing visuals and social media content. In this interview, our in-house graphic designer Jakob Petersen shares practical insights on why contrast matters, which design patterns frequently cause problems, and how companies can combine strong visual branding with accessible design principles.
Why is color contrast critical for accessibility, and what happens when it’s done poorly?
Color contrast matters because if people can’t clearly see text or important elements, they can’t properly use a product or access critical information. For people with low vision, color blindness, or even those who wear glasses, poor contrast turns simple tasks into frustrating ones. In the real world, this leads to missed information, mistakes, and people giving up and leaving. If something is hard to read, users won’t stick around long enough to figure it out.
How many companies actually think about color contrast in their visuals?
Not that many, or at least not consistently. Even though color contrast is part of accessibility legislation in many countries, many companies implement it in their product UI but forget about it in marketing or social content. Others only check contrast when someone flags a problem. There are companies doing it well, but overall, it’s still not a standard practice.
From your experience, what practical consequences do companies face when color contrast requirements are not met?
From a marketing perspective, the biggest impact is that people lose interest. If users struggle to read or interact with content, they give up and move on, and over time this hurts trust in the brand.
There’s also a risk of accessibility complaints or even legal trouble, depending on the region. From a business point of view, fixing contrast issues later usually costs more time, more money, and often leads to rushed design fixes.
What are typical color combinations or design patterns that frequently cause contrast issues?
Gray text on white is everywhere, and it’s one of the worst offenders. White text on pastel colors is another common, hard-to-read design choice. Thin fonts, small text, and text placed over images or gradients also cause major readability problems.
Another frequent mistake is relying on color alone — you can’t tell someone to “click the green button” if they can’t see color or distinguish green from red.
How do you personally approach designing visuals that are both visually appealing and accessible?
I plan ahead and make accessibility part of the design process. This saves time and leads to better results. I follow best practices for accessible design in both traditional graphic design and web design. Accessibility doesn’t only include contrast, it also covers font choice, font size, text length, and layout rules.
For web design, there’s also a whole set of non-visual guidelines to follow to ensure compliance. Incorporating these rules usually improves clarity and hierarchy, so the final design feels cleaner and more intentional.
What tools or methods do you use to check color contrast?
I use contrast checker tools that show WCAG ratios, usually through browser tools or desktop software. Many design programs have built-in accessibility features or offer plugins with these capabilities.
I also like to do manual checks: zooming in, viewing designs in grayscale, or testing them on different screens. Tools are great, but a quick human check still catches things automation misses.
What would you advise design teams or marketing departments that want to improve accessibility but don’t know where to start?
Don’t try to fix everything at once. Start with the basics: body text, headings, buttons, and links. Learn the minimum contrast standards, audit what you already have, and make accessibility checks part of your normal workflow. Small changes add up quickly, and better contrast almost always makes designs better for everyone.
Resources
Colour Contrast Analyser (CCA)
Free color contrast checker for Mac and Windows
WCAG 2.1
WCAG 2.1 covers a wide range of recommendations for making web content more accessible. Following these guidelines helps make content usable by a wider range of people with disabilities.
Understanding WCAG
An introduction to the Web Content Accessibility Guidelines (WCAG), including WCAG 2.0, 2.1, and 2.2, and how to apply them.
W3C Accessibility Resources
The W3C Web Accessibility Initiative (WAI) develops standards and support materials to help organizations understand and implement accessibility.
WebAIM (Web Accessibility in Mind)
WebAIM provides articles, tools, and community resources about accessibility for developers, designers, and anyone who wants to learn more.
