👁️

Free Online WCAG Color Contrast Checker

#contrast#wcag#accessibility

Check your color palette against WCAG accessibility standards to ensure text is readable for everyone.

Foreground (Text)

#FFFFFF

Background

#6366F1

Contrast Ratio

4.47: 1

WCAG AA Normal TextBelow 18pt regular or 14pt bold

≥ 4.5

Fail

WCAG AA Large Text18pt and above, or 14pt bold and above

≥ 3

Pass

WCAG AAA Normal TextStricter standard for regular body text

≥ 7

Fail

WCAG AAA Large TextStricter standard for large text and headings

≥ 4.5

Fail

Design is not just what it looks like and feels like.

Design is how it works. — Steve Jobs

This is how normal paragraph text will look. Normal text is defined as less than 18 point (or 14 point bold). The standard requires a contrast ratio of at least 4.5:1 to meet WCAG AA requirements.

Small text is often harder to read, making contrast even more critical for accessibility.

Initializing Module

Optimizing assets and preparing high-fidelity workspace...

How to use it

Select Colors

Enter your foreground (text) and background colors using the color pickers or by pasting HEX codes.

Check the Ratio

The tool instantly calculates the contrast ratio. A higher number (e.g., 21:1) means maximum contrast.

Review WCAG Status

Look at the Pass/Fail badges for AA and AAA compliance to ensure your design meets legal and ethical accessibility standards.

FAQ

?What is a good contrast ratio?

WCAG 2.1 AA requires a contrast ratio of at least 4.5:1 for normal text and 3:1 for large text. AAA requires 7:1 for normal text and 4.5:1 for large text.

?What qualifies as 'large text'?

According to WCAG, large text is defined as at least 18pt (24px) or 14pt (18.66px) if the text is bold.

?Why is color contrast important?

Good color contrast ensures that users with visual impairments, color blindness, or people viewing screens in harsh lighting conditions can still read your content comfortably.

Need a custom tool?

We're constantly adding new tools. Suggest one or report a bug.

Related Tools You Might Need

🖼️

Free Online AI Background Remover

Remove image backgrounds instantly in your browser using local AI. 100% private, no server uploads.

📏

Free Online Aspect Ratio Calculator

Calculate image and video aspect ratios, or find exact dimensions for resizing while maintaining proportions.

🧬

Free Online Image to Base64 Converter

Convert any image (JPEG, PNG, WebP, SVG) into a Base64 string for embedding directly into HTML or CSS.

Privacy Guaranteed

Your data never leaves your browser

Our free WCAG Color Contrast Checker helps designers and developers ensure their websites are accessible to visually impaired users. By calculating the relative luminance between your foreground (text) and background colors, this tool instantly tells you if your combination passes the WCAG 2.1 AA and AAA standards for both normal and large text.

100% Client-side

No uploads

Fully private