♿

Contrast Checker

Check WCAG AA and AAA accessibility contrast ratios between two colors instantly. Essential for accessible UI design.

Foreground (Text)

4.52

: 1 ratio

Background

Preview

Aa — Large Text (18pt+)

The quick brown fox jumps over the lazy dog. — Normal text (16px)

Small text (13px) — links, captions, labels, helper text

WCAG 2.1 Results

AA — Normal Text (≥ 4.5)

AA Normal—

AA — Large Text (≥ 3.0)

AA Large—

AAA — Normal Text (≥ 7.0)

AAA Normal—

AAA — Large Text (≥ 4.5)

AAA Large—

Large text = 18pt (24px) normal weight or 14pt (18.67px) bold. Small UI elements (icons) are exempt.

About Color Contrast Checker

This tool calculates the luminance contrast ratio between any two colors and instantly reports whether they pass WCAG 2.1 Level AA and Level AAA accessibility standards. Enter hex color values for your foreground text and background, and see the ratio alongside pass/fail badges for normal text, large text, and UI components.

All calculations happen locally in your browser using the WCAG relative luminance formula — no color data is ever sent to a server. Use it to verify your design system tokens, audit existing interfaces, or pick accessible color pairs before shipping.

Common Use Cases

Auditing button label colors against their background to ensure WCAG AA compliance before a product launch
Validating design tokens in a component library — confirming that semantic color pairs like "text-primary on bg-surface" meet accessibility thresholds
Testing placeholder and disabled-state text colors, which are often too low-contrast by default
Picking brand-compliant colors that still satisfy WCAG AAA (7:1 ratio) for high-stakes documents like legal disclosures

How to Use

Enter your foreground (text) color as a hex value, e.g. #1A2336, or use the color picker
Enter your background color the same way
The contrast ratio and WCAG pass/fail badges update instantly as you type
Use the swap button to reverse foreground and background and check both directions

Frequently Asked Questions

What contrast ratio is required for WCAG AA?

WCAG 2.1 Level AA requires a minimum contrast ratio of 4.5:1 for normal text (under 18pt or 14pt bold) and 3:1 for large text (18pt or 14pt bold and above). UI components and graphical objects also need at least 3:1 against adjacent colors.

What is the difference between WCAG AA and AAA?

Level AA is the standard legal compliance target for most products. Level AAA is the enhanced standard, requiring 7:1 for normal text and 4.5:1 for large text. AAA is recommended for documents and content read by users with significant visual impairments.

Does contrast ratio depend on color format (hex vs RGB vs HSL)?

No — contrast ratio is a property of the rendered color, not its notation. Hex #FF5733, RGB(255,87,51), and HSL(11,100%,60%) all describe the same color and produce the same ratio. This tool accepts hex input and converts internally using the WCAG relative luminance formula.