Color Contrast Checker

Check WCAG accessibility contrast ratios for text and background colors. Instant AA and AAA results.

Text Color
Background Color
9.05
Contrast Ratio

The quick brown fox jumps over the lazy dog. (Normal text, 16px)

Large Text (18px bold)

Standard Requirement Normal Text Large Text
WCAG AA 4.5:1 / 3:1 - -
WCAG AAA 7:1 / 4.5:1 - -

How to Use the Contrast Checker

Choose your text color on the left and background color on the right using the color pickers or by typing HEX codes. The contrast ratio and WCAG pass/fail status update instantly as you make changes.

WCAG (Web Content Accessibility Guidelines) is the international standard for web accessibility. The contrast checker shows results for two compliance levels: AA is the standard requirement for most websites, AAA is the stricter level recommended for critical accessibility use cases.

The requirements differ for normal text and large text. Large text is defined as 18px or larger (or 14px bold). Because large text is easier to read, the minimum contrast ratio is lower: 3:1 for AA and 4.5:1 for AAA.

Use the Swap button to quickly reverse the text and background colors. This is useful when testing whether your colors work in both dark-on-light and light-on-dark configurations.

If the ratio is below the required threshold, try darkening the text or lightening the background. Even small adjustments to lightness can significantly improve the contrast ratio. Aim for at least 4.5:1 for all body text to meet WCAG AA.

Singapore's IM8 accessibility guidelines for government websites follow WCAG 2.1 Level AA. Many international laws including ADA (US), EN 301 549 (EU), and similar frameworks in the Asia-Pacific region reference the same WCAG standards.

Frequently Asked Questions

WCAG (Web Content Accessibility Guidelines) sets minimum contrast ratios between text and background colors to ensure readability for users with visual impairments, including low vision and color blindness. A ratio of 4.5:1 is required for normal text at Level AA, the most commonly required compliance level.
WCAG 2.1 Level AA requires a minimum contrast ratio of 4.5:1 for normal text (under 18pt / 14pt bold) and 3:1 for large text (18pt+ or 14pt+ bold). Level AAA requires 7:1 for normal text and 4.5:1 for large text. Most public websites target Level AA compliance.
AA is the standard compliance level required by most accessibility laws and guidelines, including ADA in the US, EN 301 549 in Europe, and similar regulations in Singapore. AAA is the highest level and is often recommended for government websites and services targeting users with disabilities. AA requires 4.5:1 for normal text; AAA requires 7:1.
Darken the text color, lighten the background, or both. For colored backgrounds, switch to a darker shade of the same hue. You can also use the Color Picker tool to find a similar color with better contrast. Another option is to increase the font size to 18px or larger, which lowers the required contrast ratio from 4.5:1 to 3:1.
Color contrast is not a direct Google ranking factor, but low contrast can increase bounce rates as users struggle to read content, which may indirectly affect rankings. More importantly, accessibility is increasingly a legal requirement in many countries, and Core Web Vitals and page experience signals favor accessible, user-friendly pages.
Related Tools
🎨 Color Picker 🎨 Palette Generator 🔄 HEX to RGB