Color Contrast Checker

Check your colors

Test color combinations to ensure they meet WCAG accessibility standards for text readability.

1.00:1

Contrast

Fail

Very poor

Normal text

AA (4.5:1)

AAA (7:1)

Large text

AA (3:1)

AAA (4.5:1)

Text color

Background color

Quick fixes

Preview title

The quick brown fox jumps over the lazy dog

Small text example (12px)

Text

#ffffff

Background

#018786

WCAG standards

Level AA

Minimum contrast ratio of 4.5:1 for normal text and 3:1 for large text. Required for most websites.

Level AAA

Enhanced contrast ratio of 7:1 for normal text and 4.5:1 for large text. Recommended for optimal accessibility.

Insufficient contrast for all text sizes - fails WCAG standards.

Calculate the contrast ratio of text and background colors.

Choose a color using the color picker for text and background color or enter a color in RGB hexadecimal format (e.g., #259 or #2596BE). You can adjust the slider to select color. The Web Content Accessibility Guidelines (WCAG) has a specific guideline to help figure out whether text is readable for sighted users. This criteria uses a particular algorithm to map color combinations into comparable ratios. Using this formula, WCAG states that a 4.5:1 color contrast ratio with text and its background is adequate for regular (body) text, and large text (18+ pt regular, or 14+ pt bold) should have at least a 3:1 color contrast ratio.

Key features

Real-time contrast ratio calculation
WCAG AA & AAA compliance checking
HSL sliders for fine-tuning
Multiple preview formats

Advanced tools

Automatic color fixing
Text and background samples
Color name detection
Export results

Frequently asked questions

For WCAG AA compliance, normal text requires a minimum contrast ratio of 4.5:1, while large text (18pt or 14pt bold) requires 3:1.

WCAG AAA requires higher contrast ratios: 7:1 for normal text and 4.5:1 for large text, compared to AA's 4.5:1 and 3:1 respectively.

Use our automatic fix feature to adjust either text or background colors while maintaining your design intent, or manually adjust colors using HSL sliders with visual indicators showing optimal zones for AA/AAA compliance.

The green zones and AA/AAA markers show optimal ranges for achieving WCAG compliance. The direction hints (Lighter/Darker) guide you toward better contrast based on your current color combination.

Yes, you can enter any hex color codes or use the color picker to select custom colors. The URL updates automatically so you can share specific color combinations.