Why Contrast Matters
Approximately 1 in 12 men and 1 in 200 women have some form of color vision deficiency. Millions more have low vision, aging eyes, or simply use their devices in bright sunlight where low-contrast text becomes invisible.
The Web Content Accessibility Guidelines (WCAG) define minimum contrast ratios that ensure text is readable by people with moderately low vision. These are not suggestions — they are legal requirements in many jurisdictions and are enforced through accessibility audits and lawsuits.
Understanding Contrast Ratios
A contrast ratio compares the relative luminance of two colors — typically text against its background. The ratio ranges from 1:1 (no contrast, same color) to 21:1 (maximum contrast, black on white).
WCAG AA (minimum standard):
- Normal text (under 18pt or 14pt bold): 4.5:1
- Large text (18pt+ or 14pt+ bold): 3:1
- UI components and graphical objects: 3:1
WCAG AAA (enhanced standard):
- Normal text: 7:1
- Large text: 4.5:1
Most organizations target WCAG AA compliance as the baseline. AAA is aspirational.
Common Contrast Failures
Light gray text on white backgrounds. The most common accessibility failure. Gray (#999) on white (#FFF) has a contrast ratio of 2.85:1 — well below the 4.5:1 requirement. Designers often favor subtle, light text for aesthetics, but this makes content unreadable for many users.
Colored text on colored backgrounds. A blue link on a dark blue background may look distinguishable to someone with full color vision but fails contrast requirements. The ratio must be checked mathematically, not by eye.
Text over images. Text placed directly on a photograph may be readable in one area but disappear where the image is a similar shade. A semi-transparent overlay between the image and text ensures consistent contrast.
Placeholder text in form inputs. Default placeholder styling is often very light gray. Users with low vision may not see placeholder text at all.
How to Fix Contrast Issues
Darken the text or lighten the background. The simplest fix. If your text is #777 on white (#FFF) at 4.48:1 (just barely failing), darkening to #767676 brings it to exactly 4.54:1 — passing AA.
Increase font size. Large text has a lower contrast requirement (3:1 instead of 4.5:1). Making text larger improves readability in two ways — both through size and through the relaxed contrast threshold.
Add a text shadow or background overlay. For text over images, a subtle dark shadow or a semi-transparent dark overlay behind the text creates consistent contrast regardless of the image content.
Use a contrast checker. Do not rely on your eyes to judge contrast. People with normal vision consistently overestimate the readability of low-contrast text. Always measure the ratio.
How to Use the Toobits Contrast Checker
Enter a text color and background color (as hex, RGB, or HSL) and instantly see the contrast ratio, WCAG AA pass/fail for normal and large text, and WCAG AAA compliance. Preview how the text looks against the background. Adjust colors in real time until you find a combination that meets your target standard. Everything runs in your browser.