Web Accessibility (WCAG) Color Contrast: A Practical Guide for Marketers
Choosing the perfect colour palette for a new marketing campaign or website redesign is one of the most exciting parts of the creative process. However, if you don't choose those colours with accessibility in mind, you could be excluding a significant portion of your audience.
According to the World Health Organisation, over 2.2 billion people globally have a near or distance vision impairment, including colour blindness and low vision.
To ensure the web is usable for everyone, the Web Content Accessibility Guidelines (WCAG) established strict mathematical standards for Color Contrast. Here is what every marketer and designer needs to know.
What is a Contrast Ratio?
In web design, contrast refers to the difference in light (luminance) between a foreground element (like text) and its background.
The WCAG calculates this difference as a Contrast Ratio, which ranges from 1:1 (white text on a white background—completely invisible) to 21:1 (black text on a white background—maximum contrast).
The WCAG 2.1 Standards: AA vs AAA
The WCAG provides two main target levels for accessibility compliance: AA (the standard legal baseline in many countries) and AAA (the gold standard for maximum accessibility).
Level AA (The Minimum Standard)
To meet the baseline AA standard, your colours must have:
- A contrast ratio of at least 4.5:1 for normal-sized text.
- A contrast ratio of at least 3.0:1 for large text (usually defined as 18pt regular or 14pt bold and larger).
- A contrast ratio of at least 3.0:1 for graphical objects and user interface components (like borders around text inputs).
Level AAA (The Gold Standard)
If you are designing for a government entity, an educational institution, or an audience that skews older, you should aim for the stricter AAA standard:
- A contrast ratio of at least 7.0:1 for normal text.
- A contrast ratio of at least 4.5:1 for large text.
Common Contrast Mistakes to Avoid
- Light Grey Text: It might look sleek and modern, but light grey text on a white background is the most common accessibility failure on the web. It forces users to strain their eyes and often fails the 4.5:1 ratio.
- White Text on Bright Brand Colours: Pure white text on vibrant brand colours (like bright orange, cyan, or lime green) often fails contrast checks. You may need to darken the background colour slightly to make the text legible.
- Text Over Images: Placing text directly over a busy photograph without a dark overlay or text shadow can make the text unreadable, even if the base colours technically pass a checker.
How to Check Your Colours?
You don't need to do the complex luminance math yourself. Before finalising your brand guidelines or launching a new landing page, run your foreground and background hex codes through our free Colour Contrast Checker.
Our tool instantly calculates the exact contrast ratio and gives you a clear Pass/Fail grade for both AA and AAA standards across different text sizes.
Frequently Asked Questions
Do these contrast rules apply to logos? No. The WCAG provides an exception for text that is part of a logo or brand name. Logos have no minimum contrast requirement, though it is still best practice to make them as legible as possible.
What happens if I fail to meet WCAG standards? For private individuals or small blogs, usually nothing. However, for large corporations, government entities, and educational institutions, failing to meet accessibility standards can result in significant legal liabilities and lawsuits under laws like the ADA (Americans with Disabilities Act).
Are there tools to automatically fix my contrast? Our tool will check your contrast, but adjusting the hex codes to pass the threshold is a design decision. Often, simply moving the lightness slider down on your background color by 10-15% is enough to pass the AA standard.
Accessible design is good design. Ensure your message is legible for everyone.