What is a good contrast ratio for accessibility?

WCAG 2.0 Level AA requires a minimum contrast ratio of 4.5:1 for normal text and 3:1 for large text. Level AAA requires 7:1 for normal text and 4.5:1 for large text. For most websites, meeting AA compliance is the standard. Government and accessibility-focused organizations may aim for AAA compliance.

What does WCAG stand for?

WCAG stands for Web Content Accessibility Guidelines, published by the W3C (World Wide Web Consortium). WCAG 2.0 and 2.1 provide the international standards for making web content accessible to people with disabilities. The guidelines cover color contrast, text alternatives, navigation, and much more.

How is the contrast ratio calculated?

The contrast ratio is calculated using the relative luminance of each color, following the WCAG 2.0 formula. First, sRGB values are converted to linear RGB, then the luminance is calculated as a weighted sum. The final ratio is (L1 + 0.05) / (L2 + 0.05), where L1 is the lighter color's luminance and L2 is the darker color's luminance.

What is the difference between AA and AAA compliance?

Level AA is the minimum standard for most websites and requires a 4.5:1 contrast ratio for normal text. Level AAA is the highest standard and requires a 7:1 ratio. AAA compliance is more difficult to achieve and may conflict with certain design aesthetics, but it provides the best readability for users with low vision.

What counts as 'large text' for WCAG?

WCAG defines large text as 18pt (24px) or larger, or 14pt (18.66px) bold or larger. Large text has lower contrast requirements because the larger size makes it easier to read even with lower contrast. For AA compliance, large text needs only a 3:1 ratio versus 4.5:1 for normal text.

Does color contrast affect SEO?

While contrast itself is not a direct ranking factor, accessibility is increasingly important for SEO. Search engines reward websites that provide good user experience, and accessibility compliance is part of that. Additionally, some jurisdictions require accessibility by law, and non-compliance can lead to legal issues.

Can I use this tool for print design?

This tool is designed for screen-based color contrast using the sRGB color space. Print design uses CMYK color space, which has different characteristics. The WCAG contrast ratios are specific to digital displays. For print accessibility, consult WCAG or other print-specific accessibility guidelines.

Loading tool...

Color Contrast Checker

A color contrast checker evaluates the contrast ratio between foreground and background colors using the WCAG 2.0 relative luminance formula. It tests compliance against AA (4.5:1 normal, 3:1 large text) and AAA (7:1 normal, 4.5:1 large text) standards for web accessibility.

100% FreeNo Signup RequiredBrowser-BasedPrivate & Secure

What is Color Contrast Checker?

A color contrast checker is an accessibility tool that calculates the contrast ratio between two colors and determines whether they meet WCAG (Web Content Accessibility Guidelines) standards for readable text.

Complementary Tools

These tools work great alongside Color Contrast Checker:

CSS Gradient Generator CSS Minifier

Start Using Color Contrast Checker Today

The contrast checker is an essential tool for creating accessible, WCAG-compliant designs. By calculating precise contrast ratios and providing clear pass/fail indicators for AA and AAA levels, it takes the guesswork out of color accessibility. With live preview and one-click color swapping, you can quickly find and verify color combinations that work for everyone.

Use Color Contrast Checker Free

Table of Contents