Advanced Color Contrast Checker

Test WCAG 2.2 contrast requirements and compare an experimental APCA estimate for additional design context.

Contrast method:

2.2

APCA

Text Size:

Normal

Large

Color Picker

Adjust colors using hex values or RGB sliders.

Foreground Color

Background Color

Tip: Use the color pickers for precise selection

Live Preview

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

Sample Heading

This is an example of how your text will look with the selected color combination. The text should be easily readable for all users, including those with visual impairments.

Small text example for testing readability at different sizes.

Sample Link

#000000

Foreground

#FFFFFF

Background

Contrast Results
WCAG 2.2

WCAG 2.2 contrast ratio compliance information

21:1

Contrast Ratio

AA Level (normal text)

Met

AAA Level (normal text)

Met

WCAG 2.2 Requirements

• AA Level: 4.5:1 minimum

• AAA Level: 7:1 minimum

Smart Color Recommendations

Explore different color schemes while maintaining accessibility.

About Contrast Standards

Understanding the normative WCAG 2.2 ratio and experimental APCA estimates.

WCAG 2.2
Traditional Contrast Ratio

WCAG 2.2 uses the traditional contrast ratio formula based on relative luminance. This method has been the standard for web accessibility compliance.

AA Level: 4.5:1 (normal), 3:1 (large text)
AAA Level: 7:1 (normal), 4.5:1 (large text)
Large Text: 18pt+ or 14pt+ bold

Experimental
APCA (Advanced)

APCA (Advanced Perceptual Contrast Algorithm) offers another way to explore perceived contrast. This tool provides an estimate for design comparison, not a WCAG conformance result.

Primary target: 60Lc (normal), 45Lc (large text)
Enhanced target: 75Lc (normal), 60Lc (large text)
Improved accuracy for different color combinations

Important: Use WCAG 2.2 for current conformance decisions. WCAG 3 remains an incomplete draft and its final requirements may differ.

Essential Accessibility Resources

Comprehensive tools, checklists, and guides to help you create inclusive digital experiences

Top Pick

WCAG 1.4.13 Content on Hover or Focus Guide

Complete guide to accessible tooltips and hover menus — the Dismissible, Hoverable, and Persistent conditions, why the title attribute fails, aria-describedby, copy-ready code, and testing

wcag 1.4.13

wcag 2.2

tooltip accessibility

+5 more

View guide

Top Pick

WCAG 2.5.7 Dragging Movements Guide

Complete guide to providing a single-pointer alternative to every drag action — accessible patterns for sliders, sortable lists, kanban boards and maps, the two exceptions, code examples, and testing

wcag 2.5.7

wcag 2.2

drag and drop accessibility

+5 more

View guide

Top Pick

Accessibility Laws by Jurisdiction

Global tracker of accessibility laws comparing WCAG requirements, penalties, and enforcement across 35+ jurisdictions

wcag legal

accessibility compliance

accessibility laws

+3 more

View resource

Top Pick

WCAG 3.2.6 Consistent Help Guide

Complete guide to keeping help mechanisms in the same relative order across pages — the four covered help types, contact and chat placement, code examples, common mistakes, and testing

wcag 3.2.6

wcag 2.2

help mechanism accessibility

+4 more

View guide

Top Pick

State of Web Accessibility Report

Annual data-driven research report on web accessibility across the top websites with interactive charts and downloadable data

wcag violations

accessibility statistics

web accessibility data

+3 more

View resource

Top Pick

Accessibility ROI Calculator

Calculate the return on investment for accessibility improvements including lawsuit risk and revenue impact

accessibility roi

business case accessibility

accessibility investment

+2 more

View tool

Color Contrast FAQ

What is the minimum contrast ratio for WCAG compliance?

WCAG 2.2 Level AA requires a minimum contrast ratio of 4.5:1 for normal text and 3:1 for large text (18pt+ or 14pt+ bold). Level AAA requires 7:1 for normal text and 4.5:1 for large text. Our contrast checker tests both levels automatically.

How do I use the color contrast checker?

Simply input your foreground and background colors using the color pickers or hex codes. The tool instantly calculates the contrast ratio and shows whether it meets WCAG AA or AAA standards. You can adjust colors in real-time to achieve compliance.

Why is color contrast important for accessibility?

Adequate color contrast ensures text and UI elements are readable for users with visual impairments, including those with low vision or color blindness. It also improves readability in different lighting conditions and on various devices, benefiting all users.

Color Contrast FAQ

Advanced Color Contrast Checker

Contrast testing workspace

Color Picker

Live Preview

Sample Heading

Contrast ResultsWCAG 2.2

WCAG 2.2 Requirements

Smart Color Recommendations

About Contrast Standards

WCAG 2.2Traditional Contrast Ratio

ExperimentalAPCA (Advanced)

Essential Accessibility Resources

Color Contrast FAQ

What is the minimum contrast ratio for WCAG compliance?

How do I use the color contrast checker?

Why is color contrast important for accessibility?

Advanced Color Contrast Checker

Contrast testing workspace

Color Picker

Live Preview

Sample Heading

Contrast ResultsWCAG 2.2

WCAG 2.2 Requirements

Smart Color Recommendations

About Contrast Standards

WCAG 2.2Traditional Contrast Ratio

ExperimentalAPCA (Advanced)

Essential Accessibility Resources

Color Contrast FAQ

What is the minimum contrast ratio for WCAG compliance?

How do I use the color contrast checker?

Why is color contrast important for accessibility?

Contrast Results
WCAG 2.2

WCAG 2.2
Traditional Contrast Ratio

Experimental
APCA (Advanced)

Contrast Results
WCAG 2.2

WCAG 2.2
Traditional Contrast Ratio

Experimental
APCA (Advanced)