WCAG Contrast Ratio Checker
Check if your color combinations meet WCAG 2.0/2.1 accessibility standards. Get instant AA and AAA results with auto-fix suggestions.
Large Text Preview (24px bold)
Normal text at 16px. This is the standard body text size used across most websites. If this text is hard to read, your contrast ratio needs improvement for accessibility compliance.
Small text at 12px. This size is common for captions, footnotes, and metadata. It requires good contrast to remain readable.
Excellent contrast. This combination is highly readable for all users, including those with significant visual impairments. It meets the strictest WCAG AAA standards.
WCAG 2.0 Contrast Guidelines
Minimum for body text, form labels, and interactive elements. This is the baseline requirement for most websites.
Minimum for text that is 18px bold or 24px regular. Headings and large UI elements often qualify.
Enhanced contrast for maximum readability. Recommended for long-form content and critical information.
Enhanced standard for large text. Provides excellent readability for headings and prominent UI text.
How Contrast Ratio is Calculated
This tool implements the exact WCAG 2.0 luminance contrast algorithm. The calculation involves three steps:
- Linearize sRGB values: Each R, G, B channel is converted from gamma-encoded sRGB to linear light. Values below 0.03928 are divided by 12.92; above that, the formula ((sRGB + 0.055) / 1.055)^2.4 is applied.
- Calculate relative luminance: L = 0.2126 * R + 0.7152 * G + 0.0722 * B, where R, G, B are the linearized values. This models how the human eye perceives brightness.
- Compute contrast ratio: ratio = (Llighter + 0.05) / (Ldarker + 0.05). The result ranges from 1:1 (identical colors) to 21:1 (black on white).
Frequently Asked Questions
What counts as "large text" in WCAG?
Large text is defined as 18pt (24px) and above for regular weight, or 14pt (18.66px, roughly 19px) and above for bold weight. Large text has lower contrast requirements because its size makes it inherently easier to read.
Do I need to meet AAA or just AA?
WCAG AA is the legal baseline required in most jurisdictions (ADA, Section 508, EN 301 549). AAA is the gold standard but not always practical for all content. Aim for AA minimum, AAA where possible.
Does this apply to images and icons?
WCAG contrast requirements apply primarily to text and meaningful UI components (buttons, form fields, focus indicators). Decorative images are exempt, but icons that convey information should meet at least 3:1 against their background.
What about dark mode?
Dark mode requires the same contrast ratios as light mode. A common mistake is using pure white (#ffffff) text on dark backgrounds, which can cause eye strain. Consider using slightly off-white (#e2e8f0) for better comfort while still meeting WCAG standards.
Need a design tool?
Compare the best design software side-by-side with honest reviews and pricing.
Compare Design Tools \u2192