Color Contrast Checker

Test color combinations for WCAG accessibility compliance. Check contrast ratios for AA and AAA standards in real-time.

Sample Text Preview This is how your text will look with the selected colors. Large text (18pt+ or 14pt+ bold) has different requirements than normal text.
21:1
Contrast Ratio
A+
Excellent - Perfect for all text and UI elements

Normal Text

AAA (7:1) Pass
AA (4.5:1) Pass

Large Text

AAA (4.5:1) Pass
AA (3:1) Pass

UI Components

AA (3:1) Pass

Text Color

Background Color

Custom Preview Text

Export Colors

How to Use

  1. Enter your colors - Type hex codes or use the color pickers to select your text and background colors.
  2. Check the results - View the contrast ratio and WCAG compliance status in real-time.
  3. Adjust as needed - Use color variations or the picker to find accessible combinations.
  4. Export your colors - Download CSS or SCSS variables for your project.

Features

Real-time Analysis

Instant contrast ratio calculation as you type or adjust colors

WCAG 2.1 Compliance

Check AA and AAA standards for normal and large text

Color Scheme Generator

Generate accessible color variations and harmonies

Export Options

Export your accessible colors as CSS or SCSS variables

WCAG Contrast Guidelines

The Web Content Accessibility Guidelines (WCAG) define minimum contrast ratios to ensure text is readable for users with visual impairments:

AA
Level AA (Minimum)

4.5:1 for normal text, 3:1 for large text (18pt+ or 14pt+ bold)

AAA
Level AAA (Enhanced)

7:1 for normal text, 4.5:1 for large text

UI
UI Components

3:1 minimum for graphical objects and user interface components

Frequently Asked Questions

Contrast ratio measures the difference in brightness between two colors. A higher ratio means better readability. This is crucial for users with low vision, color blindness, or those viewing screens in bright environments. WCAG guidelines set minimum ratios to ensure content is accessible to everyone.

Level AA is the minimum recommended standard and is legally required in many jurisdictions. It requires 4.5:1 for normal text and 3:1 for large text. Level AAA is an enhanced standard (7:1 for normal text) that provides better accessibility but may not always be achievable for all design requirements.

Large text is defined as at least 18 point (24px) for regular weight, or 14 point (approximately 18.5px) for bold text. Large text has lower contrast requirements because its size makes it inherently easier to read.

Contrast ratio is calculated using the relative luminance of each color. The formula is (L1 + 0.05) / (L2 + 0.05), where L1 is the lighter color's luminance and L2 is the darker color's luminance. The result ranges from 1:1 (no contrast) to 21:1 (maximum contrast, black on white).

No, all color calculations happen directly in your browser using JavaScript. Your color choices are never sent to any server, ensuring complete privacy. The tool works offline once loaded.