Color contrast is one of the most important — and most overlooked — aspects of web accessibility. If your text doesn't stand out enough from its background, users with low vision, color blindness, or even just bright sunlight can struggle or fail to read your content.
Fortunately, checking and fixing color contrast is easy with a free online color contrast checker. In this guide, you'll learn what WCAG contrast ratios mean, how to test your colors, and how to design for accessibility from the start.
What Is WCAG Color Contrast?
The Web Content Accessibility Guidelines (WCAG) define minimum contrast ratios to ensure text is readable for everyone. The contrast ratio is a number comparing the relative luminance of two colors — the foreground (text) and the background.
Ratios range from 1:1 (no contrast, e.g. the same color) to 21:1 (maximum contrast, e.g. pure black on pure white).
WCAG Contrast Requirements at a Glance
- AA Normal Text: At least 4.5:1
- AA Large Text (18px+ bold or 24px+ regular): At least 3:1
- AAA Normal Text (enhanced): At least 7:1
- AAA Large Text (enhanced): At least 4.5:1
AA compliance is the legal minimum for most websites (including Section 508 in the US and EN 301 549 in the EU). AAA compliance is the gold standard for accessibility.
How to Use the Color Contrast Checker
Using Toolzie's free Color Contrast Checker takes just seconds:
- Enter your text color — Type a HEX code (e.g.,
#0f172a) in the foreground field or use the color picker. - Enter your background color — Type or pick the background color (e.g.,
#fffffffor white). - Read the results instantly — The tool shows your contrast ratio and whether it passes AA and AAA for both normal and large text.
- Check the live preview — See your exact colors rendered as text on background.
- Swap colors — Use the swap button to quickly test the reverse combination.
Common Color Contrast Problems
Here are typical mistakes developers make:
1. Gray Text on White Backgrounds
Light gray text like #9ca3af on white only achieves a 2.8:1 ratio — that's a FAIL even for large text. Use darker grays like #4b5563 (5.7:1) or #6b7280 (4.6:1, just barely AA).
2. Colored Links on Colored Backgrounds
A blue link #3b82f6 on a light blue background #dbeafe might look fine to you, but the ratio is only 3.5:1 — below AA for normal text. Always check your link colors separately.
3. Subtle UI Text in Cards
Those helpful little hints in light gray? If they're small, they're likely failing accessibility. Either darken them or accept that decorative text doesn't need to pass (but informational text does).
How Contrast Ratios Are Calculated
The math behind contrast ratios is precise. Here's a simplified version:
- Convert your HEX color to RGB values.
- Apply the sRGB gamma correction to get linear values.
- Calculate relative luminance using the formula:
L = 0.2126R + 0.7152G + 0.0722B - The contrast ratio is
(L₁ + 0.05) / (L₂ + 0.05), where L₁ is the lighter color.
Our free contrast checker does all this automatically — no math required.
Tips for Accessible Color Design
- Start with high contrast — Design with dark text on light backgrounds first. Dark mode can come later.
- Use tools early — Check contrast while designing, not after launch.
- Don't rely on color alone — Never use color as the only way to convey information (e.g., red = error, green = success). Add icons or labels.
- Test with simulation — Consider how your colors appear to users with deuteranopia (red-green color blindness) or other vision conditions.
- Aim for AAA where possible — AAA compliance benefits everyone, especially older users and those in bright environments.
FAQs
What is the minimum contrast ratio for WCAG AA?
4.5:1 for normal text, 3:1 for large text (18px bold or 24px regular).
Do UI icons need to pass contrast?
Yes, if the icon conveys information. Decorative icons don't need to pass, but actionable icons (like a close button) do.
What about gradients and images?
WCAG recommends that text overlaid on gradients or images have a stable background area (like a dark overlay) to ensure consistent contrast.