What is color contrast checking?

Contrast checking measures the luminance difference between two colors. Sufficient contrast between text and background colors ensures that content is readable for all users, including those with visual impairments.

What are WCAG contrast requirements?

WCAG 2.1 requires a minimum contrast ratio of 4.5:1 for normal text and 3:1 for large text at AA level. AAA level requires 7:1 for normal text and 4.5:1 for large text.

How is contrast ratio calculated?

Contrast ratio is calculated using the relative luminance of two colors on a scale from 1:1 (no contrast) to 21:1 (maximum contrast, black on white). The tool calculates this automatically.

What contrast ratio should I aim for?

Aim for at least 4.5:1 for body text to meet WCAG AA standards. For large headings, 3:1 is acceptable. For best accessibility, target 7:1 which meets AAA standards.

Does it check both AA and AAA compliance?

Yes. The tool evaluates your color combination against both WCAG AA and AAA standards for normal and large text, showing pass or fail for each level.

Tools Color ToolsColor Contrast Checker

Color Contrast Checker

Check color contrast for accessibility (WCAG)

Text Color

Background

Sample Text Preview

21.00:1

Ratio

Pass

AA (4.5:1)

Pass

AAA (7:1)

How to Use

Step 1

Pick a Color

Enter a color value or use the picker to select your starting color

Step 2

Explore Options

View conversions, palettes, or variations generated from your color

Step 3

Get Results

See all color values and outputs displayed instantly

Step 4

Copy Values

Click any color value to copy it for use in your designs

Share this tool

Learn More

What Is Contrast Checker?

Contrast Checker is a free online tool that evaluates the contrast ratio between two colors against WCAG accessibility standards. Ensure your text and background colors are readable for all users.

Key Features

Calculate contrast ratio between any two colors. Check compliance with WCAG AA and AAA levels. Visual preview of text on background. Support for HEX, RGB, and HSL input. Real-time results as you adjust colors.

Benefits

Ensure your website meets accessibility requirements. Avoid legal issues related to web accessibility compliance. Improve readability for all users including those with visual impairments. Build more inclusive web experiences.

Use Cases

Verify text colors meet accessibility standards. Check button and link contrast ratios. Validate color schemes for WCAG compliance. Audit existing designs for accessibility issues.

Tips for Best Results

Always test both light and dark modes. Check contrast for all text sizes used in your design. Do not rely solely on color to convey information. Test with the most common color vision deficiencies.