How does the WCAG color contrast checker work?

The tool calculates the contrast ratio between your foreground (text) and background colors using the WCAG 2.1 relative luminance formula. It converts each color to linearized RGB values, computes luminance, then applies the formula: (L1 + 0.05) / (L2 + 0.05), where L1 is the lighter color's luminance. The resulting ratio ranges from 1:1 (no contrast) to 21:1 (maximum contrast, black on white).

What is the difference between WCAG AA and AAA compliance?

WCAG AA requires a minimum contrast ratio of 4.5:1 for normal text and 3:1 for large text (18pt+ regular or 14pt+ bold). WCAG AAA is stricter: 7:1 for normal text and 4.5:1 for large text. 'Large text' is defined as 18pt (24px) or 14pt (18.5px) bold. UI components and graphical objects have their own 3:1 minimum regardless of size.

What font size counts as 'large text' for WCAG compliance?

Large text under WCAG 2.1 is 18pt (24px) or larger for normal weight, or 14pt (18.5px) or larger for bold (700 weight) text. In CSS pixels, this translates to approximately 18px normal weight and 14px bold at default browser settings. The checker shows you the pass/fail results for both thresholds.

What colors are guaranteed to pass WCAG AA?

Pure black text (#000000) on pure white background (#FFFFFF) has a 21:1 contrast ratio — the maximum. Any color combination with a contrast ratio of 4.5:1 or higher passes WCAG AA for normal text. The tool's suggestions automatically calculate colors that meet your chosen threshold while staying visually similar to your original color.

Can I use this tool to check colors on my existing website?

Yes. Enter your text color and background color from your website's CSS into the color picker or hex input fields. The checker will instantly show you the contrast ratio and whether it meets WCAG AA or AAA standards. Use the eye-dropper to pick colors from anywhere on your screen if your browser supports the EyeDropper API.

Is my color data sent to any server?

No. All contrast calculations happen 100% in your browser using JavaScript. Your color values are only stored in your browser's localStorage for the color history feature — they never leave your device.

Color Contrast Checker

Check text/background color combinations against WCAG 2.1 AA and AAA standards. Built-in color picker, accessible color suggestions, and live preview — 100% client-side.

Preview

Background

Text

Foreground (Text) Color

HEX

RGB

Uses browser EyeDropper API (Chromium only)

Background Color

HEX

RGB

Color History

Pick colors to build history

Contrast Ratio

0.00:1

— WCAG contrast

WCAG 2.1 Compliance

AA — Normal Text —

0:1

Min 4.5:1 required

AA — Large Text —

0:1

Min 3:1 required

AAA — Normal Text —

0:1

Min 7:1 required

AAA — Large Text —

0:1

Min 4.5:1 required

Text Preview

Normal Text 14px

The quick brown fox jumps over the lazy dog.

Bold text at 14px for emphasis.

Large text at 18px.

Bold 14px (large text threshold).

Button text

Suggested Accessible Alternatives

Enter colors to see accessible alternatives

Preset Accessible Combinations

Why use this color contrast checker?

Built for web developers, designers, and accessibility advocates who need to verify WCAG compliance fast.

⚡

Real-time checking

Contrast ratio and WCAG grades update instantly as you adjust colors. No submit button — just move the picker.

👽

WCAG 2.1 compliant

Full AA and AAA compliance matrix for normal text, large text, and UI components. All thresholds match the official spec.

🎨

Built-in color picker

Interactive HSL canvas color picker — no external dependencies, no browser extensions needed. Pick any color visually.

💡

Smart suggestions

When your current color fails, the tool suggests the nearest accessible alternatives that meet your chosen threshold.

📷

Live text preview

See exactly how your color pair looks at real font sizes — normal text, bold text, large text, and UI components.

🔒

100% private

All processing happens in your browser. Color values are never sent anywhere. Color history stays on your device only.

Need to format code?

Try our free JSON Formatter & Validator — instant formatting, syntax highlighting, and error detection.

JSON Formatter →

More free tools

Developer Tool

Color Contrast Checker

Why use this color contrast checker?

Real-time checking

WCAG 2.1 compliant

Built-in color picker

Smart suggestions

Live text preview

100% private

Need to format code?

More free tools

JSON Formatter

Code Formatter

QR Code Generator

Word Counter

Reverse Image Search

Mortgage Calculator

Interest Calculator

Text Diff Tool

Regex Tester