WCAG Contrast Ratio Calculator
| WCAG Level | Text Size | Required Ratio | Status |
|---|---|---|---|
| AA | Normal | 4.5:1 | -- |
| AA | Large | 3:1 | -- |
| AAA | Normal | 7:1 | -- |
| AAA | Large | 4.5:1 | -- |
How to Use This Tool
Enter the foreground (text) color and background color in hex format (e.g., #FFFFFF) or use the color pickers. The tool will automatically calculate the contrast ratio and show whether it meets WCAG AA and AAA standards for both normal and large text. Use the dropdowns to focus on a specific standard and text size.
Formula and Logic
The contrast ratio is calculated using the relative luminance of the two colors, as defined by the WCAG 2.0 and 2.1 specifications. The formula: (L1 + 0.05) / (L2 + 0.05), where L1 is the luminance of the lighter color and L2 of the darker. The relative luminance of a color is calculated from its sRGB coordinates.
Practical Notes
For business websites, meeting WCAG AA for normal text (4.5:1) is the minimum legal requirement in many jurisdictions. Failing to comply can result in lawsuits and loss of customers. High contrast ratios improve readability for all users, not just those with disabilities, leading to better user experience and higher conversion rates. When designing for large text (at least 18pt or 14pt bold), the required contrast ratios are lower (3:1 for AA, 4.5:1 for AAA). Consider your typical font sizes when evaluating.
Why This Tool Is Useful
Quickly check color combinations during design without manual calculations. Ensure your website, app, or marketing materials are accessible and inclusive. Avoid costly legal issues by proactively meeting accessibility standards. Improve user engagement by making your content more readable.
Frequently Asked Questions
What is a good contrast ratio for my website?
For most text, aim for at least 4.5:1 (WCAG AA) and ideally 7:1 (WCAG AAA) for normal text. For large text, 3:1 (AA) and 4.5:1 (AAA) are acceptable.
Do I need to meet both AA and AAA?
AA is the minimum level required by law in many places. AAA is a higher standard that provides better accessibility but is harder to achieve. Focus on AA for compliance and AAA where possible.
How does contrast ratio affect my business?
Poor contrast can lead to higher bounce rates, lower conversions, and potential discrimination lawsuits. Accessible design expands your customer base and improves brand reputation.
Additional Guidance
Use this tool during the design phase to choose color palettes that are both on-brand and accessible. Test your actual website pages with real content, as font size, weight, and background patterns can affect perceived contrast. Remember that contrast requirements apply to text and non-text elements like icons and form controls.