Contrast Ratio
Check the WCAG contrast ratio between two hex colors for web accessibility. Get relative luminance, AA/AAA conformance levels, and interactive charts for text readability.
About This Calculator
The Contrast Ratio Calculator (also known as a color contrast checker or accessibility color checker) helps web designers, developers, and content creators ensure their color combinations meet the Web Content Accessibility Guidelines (WCAG) contrast requirements. By entering the hex color codes for your text and background, you get the exact contrast ratio and WCAG conformance level (AA or AAA) for both normal and large text sizes.
The contrast ratio is calculated using the WCAG 2.2 formula: (L1 + 0.05) ÷ (L2 + 0.05), where L1 and L2 are the relative luminance values of the lighter and darker colors. Relative luminance is computed by first converting sRGB values to linear RGB using gamma correction, then applying the weighted sum 0.2126R + 0.7152G + 0.0722B. These weights reflect how the human eye is most sensitive to green light, followed by red, then blue.
The calculator displays both the AA and AAA conformance levels. AA compliance (4.5:1 for normal text, 3:1 for large text) is the minimum legal requirement for most websites under the ADA (US), Equality Act (UK), and RPwD Act (India). AAA compliance (7:1 for normal text, 4.5:1 for large text) provides the best readability, especially for users with low vision or color vision deficiencies.
Regional Notes
India: The Rights of Persons with Disabilities Act 2016 mandates accessibility for government websites. The Guidelines for Indian Government Websites (GIGW) require WCAG 2.0 AA compliance. Color contrast checking is essential for public-sector digital services.
United States: Section 508 of the Rehabilitation Act requires federal agencies to meet WCAG 2.0 AA standards. Many states have additional accessibility laws. WCAG compliance also reduces the risk of ADA Title III lawsuits for private businesses.
United Kingdom: The Equality Act 2010 requires public sector websites to meet WCAG 2.2 AA under the Public Sector Bodies (Websites and Mobile Applications) Accessibility Regulations 2018. The UK Government Digital Service (GDS) provides detailed guidance on color contrast.
Frequently Asked Questions
What is a contrast ratio in web accessibility?
A contrast ratio measures the difference in brightness between two colors (typically text and background). It is calculated using relative luminance values per the WCAG (Web Content Accessibility Guidelines) standard. Ratios range from 1:1 (no contrast) to 21:1 (maximum contrast, black on white).
What are the WCAG AA and AAA contrast requirements?
WCAG AA requires a contrast ratio of at least 4.5:1 for normal text and 3:1 for large text (18pt or 14pt bold and above). WCAG AAA requires at least 7:1 for normal text and 4.5:1 for large text. Meeting AA is the legal minimum for most websites, while AAA provides the best readability.
How is the contrast ratio calculated?
The contrast ratio is calculated using the formula (L1 + 0.05) / (L2 + 0.05), where L1 is the relative luminance of the lighter color and L2 is the relative luminance of the darker color. Relative luminance is computed from sRGB values using the formula L = 0.2126R + 0.7152G + 0.0722B, where R, G, B are linearized gamma-corrected values.
What is a good contrast ratio for accessibility?
A good contrast ratio for web accessibility is at least 4.5:1 for normal-sized text (AA compliance) and 3:1 for large text. For enhanced accessibility (AAA), aim for 7:1 or higher for normal text and 4.5:1 for large text. The highest possible ratio is 21:1, achieved with black text on a white background.
Does WCAG apply globally?
Yes, WCAG (Web Content Accessibility Guidelines) is the international standard for web accessibility. It is adopted by laws worldwide including the Americans with Disabilities Act (ADA) in the US, the Equality Act 2010 in the UK, and the Rights of Persons with Disabilities Act 2016 in India. Most countries require government and public sector websites to meet at least WCAG AA compliance.
How do I check contrast ratio for my website?
Enter your text color and background color in hex format (e.g., #333333 on #FFFFFF). The calculator instantly shows the contrast ratio and whether it passes WCAG AA and AAA levels for both normal and large text. Use the color pickers to visually select colors, and see a live preview of your text on the background.
What is relative luminance?
Relative luminance is a measure of the perceived brightness of a color, normalized to a scale where 0 represents pure black and 1 represents pure white. It is calculated from the linearized RGB values using weighted coefficients (0.2126 for red, 0.7152 for green, 0.0722 for blue) that match human eye sensitivity.
Can I share my contrast ratio results?
Yes, the URL automatically saves your selected colors and text size. You can bookmark or share the link with your team, making it easy to discuss and verify color choices during design reviews and accessibility audits.