vextil
Back to Color Tools

Color Contrast Checker

Check whether your color combinations meet WCAG accessibility guidelines. Our tool shows you the contrast ratio and whether it's sufficient for normal text, large text, and UI components.

Select Colors
Select foreground and background colors

Sample text for contrast preview

Normal Text

Contrast Ratio
WCAG Guidelines
21.00:1

Contrast Ratio

AA Normal Text
Minimum 4.5:1
AA Large Text
Minimum 3:1
AAA Normal Text
Minimum 7:1
AAA Large Text
Minimum 4.5:1
How to use
  1. 1Choose a foreground color
  2. 2Choose a background color
  3. 3See contrast ratio and WCAG rating
Features
  • WCAG Compliance

    Checks contrast against WCAG 2.1 standards (AA and AAA).

  • Contrast Ratio

    Calculates the exact ratio (e.g., 4.5:1).

  • Text Sizes

    Checks for normal text, large text, and UI components.

  • Color Suggestions

    Suggests alternative colors with better contrast.

FAQ

What does WCAG AA and AAA mean?

AA is the minimum standard for accessibility (4.5:1), AAA is the highest standard (7:1).

Why is contrast important?

Good contrast makes text readable for everyone, especially for people with visual impairments.

What is a good contrast ratio?

At least 4.5:1 for normal text, 3:1 for large text. Higher is better.

Related Tools

Color Converter

Convert between color formats

Color Blend

Blend two colors together

Color Palette Generator

Create harmonious color palettes

Color Gradient Generator

Create beautiful color gradients

Note: All processing happens in your browser. Your files are not uploaded to any server.