WCAG Contrast Ratio Calculator
Check if your color combinations meet accessibility standards for text and UI components
How to Use This Tool
Enter your foreground (text/icon) and background colors using the color pickers or by typing hex values (e.g., #FF5733). Select the element type you're testing—normal text, large text, or UI components. Click Calculate to see the contrast ratio and WCAG compliance for each standard. Use Reset to start over with default colors. The visual comparison shows how your colors appear together.
Formula and Logic
The tool calculates relative luminance for each color using the sRGB color space formula: each RGB channel is converted to linear space (if ≤ 0.03928, divide by 12.92; otherwise, apply ((c+0.055)/1.055)^2.4). Luminance = 0.2126×R + 0.7152×G + 0.0722×B. Contrast ratio = (L1 + 0.05) / (L2 + 0.05), where L1 is the lighter luminance and L2 is the darker. This follows WCAG 2.1 specifications.
Practical Notes for Business
For e-commerce sites, ensure product descriptions, prices, and call-to-action buttons meet at least WCAG AA normal text (4.5:1) to avoid legal risks and improve conversion. If your brand colors fall short, adjust the lighter color slightly—often a small brightness increase can achieve compliance without drastic rebranding. UI components (buttons, icons, form fields) require only 3:1, giving more flexibility. Test color combinations in both light and dark modes if your site supports them. Remember that contrast requirements apply to text over images too—use overlays or text shadows to maintain readability.
Why This Tool Is Useful
Accessibility compliance is increasingly a legal requirement for businesses, with lawsuits on the rise. This tool helps you proactively audit your site, avoiding costly remediation and reputational damage. Beyond compliance, good contrast improves readability for all users, especially in bright environments or for those with low vision—directly impacting user engagement and sales. For traders and entrepreneurs, it's a quick validation step before launching new pages or campaigns.
Frequently Asked Questions
What's the difference between AA and AAA compliance?
AA is the minimum legal standard in many jurisdictions (4.5:1 for normal text). AAA is a higher target (7:1 for normal text) that further improves accessibility but is harder to achieve with vibrant brand colors. Most businesses aim for AA on primary content and AAA where possible.
Do these ratios apply to logos and decorative elements?
No. WCAG contrast requirements apply to text and UI components that convey information. Logos, purely decorative images, and large background images are exempt. However, if text is embedded in an image, that text must meet contrast ratios.
How do I fix a failing color combination?
Adjust the lighter color to be darker or the darker color to be lighter. Increase the difference in luminance. Tools like this help you iterate quickly. For UI components, consider adding subtle shadows or outlines to enhance separation without changing the core brand color.
Additional Guidance
Regularly test your site's color palette, especially after redesigns. Use this calculator in conjunction with color blindness simulators (like Coblis) to ensure your designs work for users with visual impairments. For e-commerce, pay special attention to price displays, error messages, and form field labels—these are critical for conversion and accessibility. Document your color palette with their contrast ratios for future reference. Note that WCAG 2.2 (latest) maintains the same contrast requirements, so this tool remains current.