Color contrast is the difference in brightness between two colors, most often your text and the background behind it. The higher the contrast, the easier that text is to read. Under the Web Content Accessibility Guidelines (WCAG), the standard most ADA compliance work is measured against, most body text needs a contrast ratio of at least 4.5:1 to be considered accessible, while larger text needs at least 3:1.
That single rule affects more of your business than you might expect. It shapes your website, your social graphics, your email campaigns, and anything else where words sit on top of a color. This article walks through what contrast ratios actually mean, why they matter beyond just “looking nice,” and how to apply the same standard to design work that lives off your website.
Why does color contrast matter for your business?
Low contrast text is hard to read for almost everyone, and it becomes a real barrier for a meaningful share of your visitors and customers.
In short, contrast is not a design preference. It determines whether the words on your site and your marketing materials are actually usable.
What are the WCAG contrast ratio requirements?
WCAG measures contrast as a ratio between two colors, from 1:1 (identical colors, no contrast at all) up to 21:1 (pure black on pure white, the highest possible contrast). The current standard most businesses and government sites are held to is WCAG 2.2, Level AA.
| Content type | Minimum ratio (Level AA) | Enhanced ratio (Level AAA) |
|---|---|---|
| Normal body text | 4.5:1 | 7:1 |
| Large text (18pt+, or 14pt bold+) | 3:1 | 4.5:1 |
| Buttons, icons, form fields, and other UI elements | 3:1 | 3:1 |
Most compliance work, including the U.S. Department of Justice's Title II rule for state and local government websites, is written against Level AA. That's the bar we recommend every business aim for as a baseline, with AAA reserved for content where readability is especially critical, such as legal or medical information.
Easy to read
Dark blue on white, roughly 8.9:1
Hard to read
Light gray on white, roughly 1.6:1
A real example from our own brand palette as the Trusted Guide
Our brand yellow is a warm, energetic color, but it doesn't have enough contrast against white or light backgrounds to meet WCAG requirements as text. That's why our own brand guide has a firm rule: yellow is used as a background fill only, never as text color. It's a simple example of how a contrast rule shapes real design decisions, not just theory.
How to check your color contrast in a few minutes
You don't need design software to find out whether your colors pass. Two free tools handle almost every situation: a color picker to identify your hex codes, and a contrast checker to test them against each other.
Every color has a hex code, a six-character combination of letters and numbers, like #266A7D, that uniquely identifies it. If you don't already have your colors documented, a browser extension makes this easy. We use a free Chrome extension called Color Picker: click the extension icon, hover over any color on your screen, whether it's on a live webpage, an image, or a PDF, and it instantly shows you the hex code.
Once you have both hex codes, your text (foreground) color and your background color, plug them into a contrast checker. We use the WebAIM Contrast Checker(opens in new tab), a free tool built by accessibility researchers that's become the industry standard for a quick check.
Enter your text color hex code and your background hex code, and the tool instantly shows you:
- The exact contrast ratio, for example 7.2:1
- Whether that pairing passes or fails for normal text (4.5:1) and large text (3:1) at Level AA
- Whether it also passes the stricter Level AAA thresholds
If a pairing fails, the WebAIM tool lets you nudge the lightness of either color with a slider until it passes, so you can see exactly how close you are and how much of an adjustment is actually needed. Small tweaks, darkening a gray by a shade or two, for example, are often enough to move a color from failing to passing without changing your brand's overall look.
Make it part of your workflow
Before publishing a new page, graphic, or email template, run a quick check on your text and background pairing. It takes less than a minute with these two tools, and color contrast is one of the easiest accessibility issues to catch before something goes live instead of after.
Common contrast mistakes we see on business websites
Most contrast problems aren't intentional. They usually creep in through design trends or well-meaning style choices.
- Light gray body text on a white background. This has become a common "modern" look, but it frequently fails the 4.5:1 minimum.
- Text placed over photos or hero banners without a solid overlay or shadow behind it, so contrast shifts depending on the image underneath.
- Colored links that blend into surrounding text without enough contrast or an underline to set them apart.
- Placeholder text in form fields that's light enough to look "subtle" but too light to actually read.
- Brand colors used as text that were chosen for how they look on a logo or a button, not for how they perform as body copy.
Color contrast in graphic design, social media, and email
Contrast requirements don't stop at your website. The same 4.5:1 and 3:1 standards apply anywhere text sits on a color, including the graphics, posts, and emails your business sends out every week.
Social media graphics
Quote graphics, promotional posts, and event announcements are frequent offenders because they're often designed quickly and judged by how they look on a bright, backlit phone screen, which can make weak contrast look stronger than it really is. Before posting, check how the graphic looks in grayscale or on a dimmed screen. If the text starts to disappear into the background, so will it for a portion of your audience.
Email marketing
Email is read across dozens of devices, inboxes, and lighting conditions, and increasingly in dark mode, which can invert or shift your colors in unexpected ways. Stick to high-contrast text and background combinations, avoid placing text directly over photos in email banners, and test how your email renders in both light and dark mode before sending.
Print materials and signage
Postcards, menus, banners, and signage face an added challenge: lighting you can't control. A contrast pairing that looks fine on a calibrated monitor can wash out under fluorescent lighting or direct sun. When in doubt, choose a stronger contrast pairing than you think you need for anything meant to be read at a glance.
Don't rely on color alone
Beyond contrast ratios, WCAG also requires that information never depend on color alone. A chart that only distinguishes categories by color, or an error message that only turns a field red, will be missed by anyone with color blindness or a screen reader. Pair color with a label, icon, pattern, or text description so the meaning still comes through without it.
Color contrast in graphic design, social media, and email
- Does your website use light gray, tan, or pastel text on a white or light background?
- Do you place text directly on top of photos without a solid color block, gradient, or shadow behind it?
- Do your links look like regular text, without an underline or a distinct color?
- Do your social graphics or email templates rely on brand colors that weren't tested as text?
- Has anyone ever told you they had trouble reading something on your site or in your marketing?
If you answered yes to any of these, it's worth running your key pages and templates through the color picker and contrast checker process covered above. It only takes a few minutes per page.
How color contrast fits into the bigger accessibility picture
Contrast is one of the most common accessibility issues we find, but it's rarely the only one. Getting your color contrast right helps with:
How we approach color contrast at RVTS
When we design a website, choose a client's brand palette, or build out graphic templates, contrast is checked before anything goes live, not fixed afterward. We typically run every text and background pairing through a WCAG contrast checker during the design phase, and we flag any brand colors that don't hold up as text so we can adjust how they're used, the way we did with our own yellow.
For clients who already have an established brand, we don't usually recommend changing your colors. Instead, we look for ways to preserve your brand identity while adjusting how those colors are applied, for example using a brand color as a bold background with white text, rather than as light text on white. If your website or accessibility audit turns up contrast issues, this is typically one of the more straightforward things to fix.
Frequently Asked Questions
About Color Contrast and Accessibliity
Ready to take the next step?
An accessibility audit gives you a clear, prioritized report of exactly what's working, what's not, and how to fix it, written in plain English. We can also review your social templates and email designs for the same contrast issues covered here.
We respect your privacy. Your information will never be sold or shared.
Ready to take the
next step?
An accessibility audit gives you a clear, prioritized report of exactly what's working, what's not, and how to fix it, written in plain English. We can also review your social templates and email designs for the same contrast issues covered here.
