Insufficient color contrast is the most common accessibility failure on the web. Around 8% of men and 0.5% of women have some form of color vision deficiency. Another significant portion of users have situational vision impairments — aging eyes, bright sunlight on a phone screen, or cataracts. For all of these users, low-contrast text is not just difficult — it's functionally invisible.
WCAG (Web Content Accessibility Guidelines) provides the international standard for contrast requirements. This guide explains the requirements, shows you how to check any color combination, and walks through common failure scenarios and fixes.
WCAG 2.1 Contrast Requirements
| Element Type | Level AA (Required) | Level AAA (Enhanced) |
|---|---|---|
| Normal text (under 18pt or 14pt bold) | 4.5:1 | 7:1 |
| Large text (18pt+ or 14pt+ bold) | 3:1 | 4.5:1 |
| UI components (form borders, buttons) | 3:1 | 3:1 |
| Graphical objects (icons, charts) | 3:1 | 3:1 |
| Decorative text / text in logos | Exempt | Exempt |
| Inactive/disabled UI elements | Exempt | Exempt |
The ratio is calculated as: (L1 + 0.05) / (L2 + 0.05) where L1 is the relative luminance of the lighter color and L2 is the relative luminance of the darker color. You don't need to calculate this manually — contrast checkers do it automatically from HEX values.
How to Check Contrast in Practice
Step 1: Get the exact HEX values
Use ColorPickPro to click on the text color and background color of any element on your website. Note both HEX values. This is crucial — "looks similar" is not sufficient. You need the actual HEX to calculate an accurate ratio.
Step 2: Enter them in a contrast checker
Go to webaim.org/resources/contrastchecker/ and enter both HEX values. The tool displays:
- The calculated contrast ratio
- Pass/fail for WCAG AA normal text
- Pass/fail for WCAG AA large text
- Pass/fail for WCAG AAA normal text
- Pass/fail for WCAG AAA large text
Step 3: Use Chrome DevTools for interactive checking
In Chrome DevTools (F12), select an element, click its color swatch in the CSS panel, and the color picker shows the current contrast ratio. A warning icon appears if the ratio fails WCAG AA. This is the fastest workflow during development.
Get Exact HEX Values from Any Element
ColorPickPro samples any color on any page instantly — get the exact values you need for accurate contrast checking.
Add ColorPickPro FreeCommon Color Combinations and Their Contrast Ratios
The White Text Myth
Many designers assume that white text works on any colored background. This is one of the most common accessibility mistakes. Here's why it fails so often:
For white text to meet the 4.5:1 AA requirement for normal text, the background must have a relative luminance below approximately 0.179. This corresponds to colors that are visually quite dark. Many "brand colors" sit in the mid-tone range where neither white nor black provides ideal contrast — but dark text is almost always the better choice for mid-tones.
| Background Color | White Text Ratio | Dark Text Ratio | Use |
|---|---|---|---|
| #1E40AF (dark blue) | 8.59:1 ✓ | 2.44:1 ✗ | White text |
| #3B82F6 (mid blue) | 3.14:1 ✗ | 6.68:1 ✓ | Dark text |
| #93C5FD (light blue) | 1.56:1 ✗ | 13.47:1 ✓ | Dark text |
| #EF4444 (red) | 3.03:1 ✗ | 6.93:1 ✓ | Dark text or darken bg |
| #DC2626 (dark red) | 5.08:1 ✓ | 4.12:1 ✗ | White text |
| #F59E0B (amber) | 2.12:1 ✗ | 9.94:1 ✓ | Dark text always |
Fixing Contrast Failures
Option 1: Darken the background
The most reliable fix for colored backgrounds where you want to keep white text. Shift the background 2-3 shades darker. Use HSL adjustments in CSS: reduce lightness by 10-20% and check the ratio again.
Option 2: Switch to dark text
Faster than darkening a background. Use #1a1a1a or #111111 rather than pure #000000 — near-black reads slightly softer while still passing all contrast requirements on any mid-tone background.
Option 3: Increase font size
At 18pt (24px) or larger, the requirement drops to 3:1. Some color combinations that fail at 16px pass at 24px. This is a valid solution for headings or prominent text but not for body copy.
Option 4: Add text background
For text over photographic backgrounds (where the background color varies), add a semi-transparent dark overlay behind the text. A rgba(0,0,0,0.6) overlay over any image background provides reliable contrast for white text.
WCAG 3.0 (Upcoming)
WCAG 3.0 is under development and will introduce the APCA (Accessible Perceptual Contrast Algorithm) as an alternative to the current relative luminance formula. APCA accounts for font weight, size, and viewing context more precisely. However, WCAG 2.1 AA remains the current legal standard in most jurisdictions. Design to WCAG 2.1 AA now and be prepared to re-audit when WCAG 3.0 becomes official.
Sample Any Color from Any Page for Contrast Checking
ColorPickPro gives you exact HEX values from any element — essential for accurate WCAG compliance auditing.
Try ColorPickPro FreeFrequently Asked Questions
What is the minimum color contrast ratio for WCAG compliance?
WCAG 2.1 AA: 4.5:1 for normal text, 3:1 for large text (18px+), 3:1 for UI components. Level AAA requires 7:1 for normal text and 4.5:1 for large text.
How do I check the contrast ratio between two colors?
Get both HEX values with ColorPickPro, then enter them at WebAIM Contrast Checker (webaim.org/resources/contrastchecker/). Chrome DevTools also shows contrast ratios interactively when you click any color swatch in the CSS panel.
Does white text on a colored background always meet contrast requirements?
No — this is one of the most common design misconceptions. White text fails on many mid-tone backgrounds. Red, standard orange, amber, medium blue, and standard green all fail WCAG AA with white text. Always verify.
What colors automatically fail WCAG contrast requirements with white text?
Yellow, lime green, light cyan, standard orange, amber, and any color with significant lightness (HSL lightness above ~50-55%) will fail with white text. For these, dark text is the correct choice.
Are there exceptions to WCAG contrast requirements?
Yes: decorative text, text in logos, and inactive/disabled UI elements are exempt. Everything else on interactive, functional pages requires WCAG AA compliance at minimum.
How do I fix a color that fails WCAG contrast?
Four options: darken the background color, switch to dark text instead of white, increase font size to 18px+ (reduces requirement to 3:1), or add a semi-transparent overlay behind text on image backgrounds. Darkening the background or switching text color are the most solid long-term solutions.
More Free Chrome Tools by Peak Productivity
