Color Contrast Checker

Check color contrast for accessibility and readability compliance with WCAG standards.

Color Selection

Contrast Results

Contrast Ratio21:1
Normal Text (AA) Pass
Normal Text (AAA) Pass
Large Text (AA) Pass
Large Text (AAA) Pass
UI Components (AA) Pass

Preview

Sample Heading

This is large text (24px)

This is normal text (16px). The quick brown fox jumps over the lazy dog.

This is bold text. The five boxing wizards jump quickly.

This is a link that you might find on a webpage.

WCAG Guidelines

Minimum Contrast (AA)

  • Normal text: 4.5:1 ratio
  • Large text (18pt+): 3:1 ratio
  • UI components and graphical objects: 3:1 ratio

Enhanced Contrast (AAA)

  • Normal text: 7:1 ratio
  • Large text (18pt+): 4.5:1 ratio

How to Use

1

Select Colors

Choose your text and background colors using the color pickers or enter hex codes.

2

View Results

See the contrast ratio and whether it passes WCAG AA and AAA guidelines.

3

Check Preview

See how your text looks with the selected colors in different contexts.

4

Adjust if Needed

Modify colors until you achieve the desired contrast and accessibility compliance.

Why Contrast Matters

Accessibility

Proper contrast ensures your content is accessible to people with visual impairments, including color blindness and low vision.

Readability

Good contrast improves readability for all users, especially in challenging lighting conditions or on low-quality displays.

Legal Compliance

Meeting WCAG guidelines helps ensure your website complies with accessibility laws and regulations in many countries.

Discover More

More Color Tools

Color Picker

Pick colors from images or use the color wheel to find the perfect color.

Palette Generator

Generate harmonious color palettes for your designs and projects.

Color Converter

Convert between HEX, RGB, HSL, CMYK and other color formats.