Question 1

What is a WCAG contrast ratio?

Accepted Answer

The WCAG (Web Content Accessibility Guidelines) contrast ratio is a measure of the difference in perceived brightness between two colors. It ranges from 1:1 (no contrast, identical colors) to 21:1 (maximum contrast, black on white). WCAG defines minimum contrast ratios to ensure text is readable for people with visual impairments, including color blindness and low vision. The ratio is calculated using the relative luminance of both colors.

Question 2

What is the difference between WCAG AA and AAA?

Accepted Answer

WCAG AA is the standard level of accessibility compliance that most websites aim for. It requires a contrast ratio of at least 4.5:1 for normal text and 3:1 for large text (18px bold or 24px regular). WCAG AAA is the enhanced level with stricter requirements: 7:1 for normal text and 4.5:1 for large text. While AAA is ideal, it can be difficult to achieve with certain brand colors, so AA is the most commonly targeted standard.

Question 3

What counts as large text in WCAG?

Accepted Answer

According to WCAG 2.1, large text is defined as text that is at least 18 points (24px) in regular weight, or at least 14 points (approximately 18.66px) in bold weight. Large text has lower contrast requirements because larger characters are inherently easier to read. For normal-sized text (smaller than these thresholds), stricter contrast ratios apply.

Question 4

Is color contrast required by law?

Accepted Answer

In many jurisdictions, yes. In the United States, the ADA (Americans with Disabilities Act) and Section 508 of the Rehabilitation Act require digital accessibility for government websites and organizations that serve the public. The European Accessibility Act (EAA) requires accessibility compliance for businesses in the EU. WCAG 2.1 Level AA is the standard most commonly referenced in these laws. Non-compliance can result in lawsuits and fines.

Question 5

What are some tips for choosing accessible color combinations?

Accepted Answer

Start with high-contrast pairs like dark text on a light background. Avoid placing text on busy or gradient backgrounds. Never rely on color alone to convey information (use icons, patterns, or labels as well). Test your colors with this tool before implementing them. Consider using a dark mode option. When in doubt, black (#000000) on white (#FFFFFF) provides the maximum 21:1 contrast ratio. Navy blue on white and dark gray on light gray are also safe, accessible combinations.

Question 6

How do I fix low contrast on my website?

Accepted Answer

If your text fails WCAG contrast checks, you have several options: darken the text color, lighten the background color, increase the font size to qualify as large text (which has lower requirements), add a semi-transparent overlay behind text that sits on images, or choose entirely different colors. Use this tool to test different combinations until you find one that passes at your target WCAG level while still matching your brand.

Question 7

Does this tool work with any color format?

Accepted Answer

This tool accepts hex color codes (like #FF5733 or #F00). You can type the hex value directly or use the color picker to select any color visually. The tool then calculates the contrast ratio using the WCAG 2.1 algorithm based on relative luminance values. If you have colors in RGB, HSL, or other formats, convert them to hex first — there are many free converters available online.

Color Contrast Checker

Contrast Ratio

Live Preview

Heading Text Preview

How It Works

Pick Your Colors

Check the Ratio

Preview & Adjust

Frequently Asked Questions

Related Tools

Meta Tag Generator

QR Code Generator

Email Signature Creator