Color Accessibility: WCAG Contrast Guide
Check and fix color contrast for WCAG AA/AAA compliance — tools, formulas, and accessible color pairs.
Published:
Tags: color accessibility WCAG, color contrast checker, accessible color palette
Color Accessibility: WCAG Contrast Guide Color accessibility means ensuring your text is readable for everyone — including users with low vision, color blindness, or aging eyes. WCAG contrast requirements give you a measurable, pass/fail standard. For a full overview of color utilities, see the Color Tools for Designers and Developers guide. --- What is WCAG Contrast Requirements? The Web Content Accessibility Guidelines 2.1 define three compliance levels: | Level | Normal Text | Large Text | UI Components | |---|---|---|---| | AA (minimum) | 4.5:1 | 3:1 | 3:1 | | AAA (enhanced) | 7:1 | 4.5:1 | — | Large text is defined as 18pt (24px) regular weight or 14pt (18.67px) bold. Most body text at 16px falls under the "normal text" category requiring 4.5:1. UI components include form inputs,…
Frequently Asked Questions
What is WCAG color contrast?
WCAG (Web Content Accessibility Guidelines) defines minimum contrast ratios between foreground and background colors. The contrast ratio is calculated from the relative luminance of both colors. A 4.5:1 ratio is the AA standard for normal text; 3:1 applies to large text (18pt or 14pt bold). AAA requires 7:1 for normal text.
What is a 4.5:1 contrast ratio?
A 4.5:1 contrast ratio means the lighter color reflects 4.5 times more light than the darker color. Black text on white has a ratio of 21:1 (maximum contrast). A 4.5:1 ratio allows for colored or medium-lightness text on colored backgrounds — the minimum required by WCAG AA for normal-sized body text.
How do I check if my colors are accessible?
Calculate the relative luminance of both colors using the WCAG formula, then divide the larger by the smaller and add 1 to the numerator. Many tools automate this — paste your foreground and background hex codes and get the ratio instantly. Any ratio below 4.5:1 for normal text fails WCAG AA.
What is color blindness accessibility?
Color blindness affects about 8% of men and 0.5% of women. The most common types are deuteranopia (red-green) and protanopia (red-green). Designing for color blindness means not using color as the only visual signal — use shape, pattern, text, or icons alongside color. Avoid red/green combinations for error/success states.
How do I create an accessible dark mode?
Dark mode requires rechecking all contrast ratios because luminance relationships invert. Text that was dark on light must become light on dark, maintaining the same contrast ratios. Aim for contrast ratios above 7:1 in dark mode where possible — dark backgrounds make high contrast ratios easier to achieve and more visually comfortable.
All articles · theproductguy.in