WebToolsHub Logo
WebToolsHub

WCAG Color Contrast Checker

Test foreground and background color combinations for WCAG 2.1 AA and AAA accessibility compliance.

♿ WCAG 2.1 Standards
Responsive Leaderboard Ad Slot (728x90)
Contrast Ratio
16.1 : 1
Very High Contrast - AAA Pass
Normal Text (AA) PASS
Requires minimum ratio 4.5:1
Normal Text (AAA) PASS
Requires minimum ratio 7.0:1
Large Text (AA) PASS
Requires min 3.0:1 (18pt / 14pt bold)
Large Text (AAA) PASS
Requires minimum ratio 4.5:1
UI Components PASS
Requires minimum ratio 3.0:1

Live Typography & UI Preview

Accessible Design Matters

Web accessibility ensures that websites, tools, and technologies are designed and developed so that people with disabilities can use them. High contrast ensures readability for low vision, aging eyes, and screens in bright sunlight.

14pt Small UI Label Sample
Preset Accessible Pairs:

Frequently Asked Questions

What is the minimum contrast ratio for WCAG AA compliance?

WCAG AA requires a minimum contrast ratio of 4.5:1 for normal body text (under 18pt or bold under 14pt) and 3:1 for large text (18pt and larger, or bold 14pt and larger) and non-text UI components.

How is the contrast ratio calculated?

The contrast ratio is calculated using relative luminance: (L1 + 0.05) / (L2 + 0.05), where L1 is the relative luminance of the lighter color and L2 is the relative luminance of the darker color, yielding values from 1:1 up to 21:1.

Frequently asked questions

What does Contrast Ratio Checker do?

Free WCAG 2.1 color contrast checker. Test foreground & background colors for AA and AAA accessibility compliance across normal text, large text, and UI.

How do I use Contrast Ratio Checker?

Open Contrast Ratio Checker, enter or select the input requested by the tool, and use its controls to see the result.

Where can I find tools related to Contrast Ratio Checker?

Use the related tools below to explore more CSS & Design tools.

About the author

WebToolsHub Editorial Team

We maintain this css & design tool and its usage guide.