Color Contrast Checker

Ensure your web content is accessible by checking color contrast ratios against WCAG guidelines. Enter text and background colors to see if they meet AA and AAA standards.

Text Color (HEX)

Background Color (HEX)

Contrast Ratio

0.00 : 1

Sample Text: The quick brown fox jumps over the lazy dog.

Large Sample Text: The quick brown fox.

WCAG Compliance Status

Guideline	Normal Text	Large Text (18pt / 14pt bold)
WCAG AA	Fail ❌ (Ratio ≥ 4.5)	Fail ❌ (Ratio ≥ 3)
WCAG AAA	Fail ❌ (Ratio ≥ 7)	Fail ❌ (Ratio ≥ 4.5)

Features & Benefits

📊

Instant Ratio Calculation

See the contrast ratio update in real-time as you pick colors.

✅

WCAG Compliance Check

Clear pass/fail status for WCAG AA and AAA levels for normal and large text.

🎨

Interactive Color Pickers

Easily select colors using HEX input or visual color pickers.

↔️

Swap Colors

Quickly swap text and background colors with a single click.

👀

Live Preview

See how your chosen color combination looks with sample text.

♿

Accessibility Focused

Designed to help you create more inclusive and accessible web experiences.

How to Use the Color Contrast Checker

1. Input Colors:

Enter the hexadecimal (HEX) color codes for your desired text color and background color in the respective input fields. Alternatively, click the colored square next to the input field to open a visual color picker and select your colors.

Example: For white text on a black background, enter #FFFFFF for Text Color and #000000 for Background Color.

2. View Contrast Ratio:

The contrast ratio between the selected text and background colors will be displayed instantly. A higher ratio means better contrast. You'll also see a live preview of how the text looks on the background.

3. Check WCAG Compliance:

The "WCAG Compliance Status" table shows whether your color combination passes or fails WCAG AA and AAA levels for both normal text and large text. Large text is defined as 18pt (typically 24px) or 14pt bold (typically 18.66px bold).

WCAG AA (Minimum): Ratio of 4.5:1 for normal text, 3:1 for large text.
WCAG AAA (Enhanced): Ratio of 7:1 for normal text, 4.5:1 for large text.

4. Swap Colors (Optional):

Click the "Swap Colors" button to quickly interchange the text and background colors.

Understanding Color Contrast & WCAG

Color contrast is a critical aspect of web accessibility. It refers to the difference in lightness (luminance) between the foreground (e.g., text) and background colors. Sufficient contrast makes content readable for everyone, especially users with visual impairments like low vision or color blindness.

The Web Content Accessibility Guidelines (WCAG) provide internationally recognized standards for web accessibility. WCAG defines specific contrast ratios that web content should meet:

Level AA (Minimum Compliance): This is the generally accepted minimum level of accessibility.
- Normal text requires a contrast ratio of at least 4.5:1.
- Large text (18pt or 14pt bold) requires a contrast ratio of at least 3:1.
Level AAA (Enhanced Compliance): This level provides a higher degree of accessibility.
- Normal text requires a contrast ratio of at least 7:1.
- Large text (18pt or 14pt bold) requires a contrast ratio of at least 4.5:1.

This tool helps you verify if your chosen color combinations meet these important accessibility standards, contributing to a more inclusive web for all users.

Example Scenarios

Scenario 1: Dark Theme Text

You're designing a dark mode UI and want to use light gray text on a dark background.

• Text Color: #CCCCCC (Light Gray)
• Background Color: #1E1E1E (Dark Gray)
• Result: Check the tool. This combination (ratio ~9.8:1) passes WCAG AAA for normal and large text.

Scenario 2: Brand Color Button

Your brand color is a medium blue, and you want to use white text on buttons.

• Text Color: #FFFFFF (White)
• Background Color: #007BFF (Medium Blue)
• Result: Check the tool. This combination (ratio ~3.97:1) fails WCAG AA for normal text but passes for large text. You might need to darken the blue or use darker text for normal-sized button labels.