Contrast Checker — WCAG Calculator

Check text and background color contrast for WCAG accessibility compliance

Contrast Ratio

21.00:1
🟢
AA (normal text)
Requires: 4.5:1
Pass
🟢
AA (large text)
Requires: 3:1
Pass
🟢
AAA (normal text)
Requires: 7:1
Pass
🟢
AAA (large text)
Requires: 4.5:1
Pass

Text Preview

Heading

Normal text

Bold text

Similar Tools

Discover other useful color tools

Complete Guide to Using Contrast Checker Tool

The contrast checker tool allows you to verify if text and background color combinations meet WCAG accessibility standards. This is important for ensuring content readability for all users, including those with visual impairments.

Step 1: Enter Text Color

Enter the text color in any format: HEX (#000000), RGB (rgb(0,0,0)) or HSL (hsl(0,0%,0%)). The tool will automatically recognize the format and convert it.

Step 2: Enter Background Color

Enter the background color in the same format. The tool will automatically calculate the contrast ratio between the colors.

Step 3: Check WCAG Results

The tool will show the contrast ratio and compliance status for AA and AAA levels, both for normal and large text.

How to Use Contrast Checker Tool

How to Check Color Contrast

Enter text color and background color in any format (HEX, RGB, HSL). The tool will automatically calculate the contrast ratio and show WCAG compliance.

How to Achieve WCAG AA Level

Normal text requires a minimum contrast ratio of 4.5:1, large text (18pt+) requires 3:1. Use the tool to find suitable colors.

How to Achieve WCAG AAA Level

Normal text requires a minimum contrast ratio of 7:1, large text requires 4.5:1. This ensures maximum accessibility.

Frequently Asked Questions About Contrast Checker

What is contrast ratio?

Contrast ratio is a numerical value showing the difference in brightness between text color and background color. It is calculated using WCAG formula based on relative luminance of colors.

What color formats are supported?

The tool supports HEX (#ffffff), RGB (rgb(255,255,255)) and HSL (hsl(0,0%,100%)) formats. Automatically recognizes and converts any format.

What do AA and AAA levels mean?

AA and AAA are WCAG compliance levels. AA is the minimum accessibility level, AAA is an enhanced level with stricter contrast requirements.