How do I check color contrast on a website?

Install MiroMiro, open any page, and hover over text - the contrast ratio plus AA/AAA pass-fail badge appear instantly for both normal and large text. No manual hex picking, no copying values into a separate WCAG calculator. Works directly on live sites in real time.

What WCAG levels does MiroMiro check?

MiroMiro checks both AA and AAA compliance levels for normal text (4.5:1 for AA, 7:1 for AAA) and large text (3:1 for AA, 4.5:1 for AAA), following WCAG 2.1 guidelines.

Can I check contrast directly on a live website?

Yes. With MiroMiro's Chrome extension, hover over any text element to instantly see its contrast ratio against its background - no manual color input needed.

What contrast ratio is considered accessible?

WCAG 2.1 requires a minimum ratio of 4.5:1 for normal text (AA level) and 3:1 for large text. AAA level requires 7:1 for normal text and 4.5:1 for large text.

Does it work with transparent backgrounds?

MiroMiro resolves the effective background color by traversing parent elements, accounting for transparency and layered backgrounds to give you accurate contrast ratios.

Is WCAG compliance legally required?

In many regions, yes. The ADA (US), EAA (EU), and other accessibility laws reference WCAG standards. Checking contrast is one of the simplest ways to improve accessibility compliance.

Contrast

Live Contrast Checker for Real Websites Check any text against WCAG, on the live page

Check color contrast ratios for WCAG 2.1 accessibility compliance.

Add to Chrome, free All features

Free to install · 3-day Pro trial · No card

How it works

Check any text against WCAG

Hover any text

Point at a heading, a label or a paragraph.

See its ratio

The WCAG contrast ratio, with AA and AAA pass or fail.

Find every issue

Scan the whole page and jump to each failing text.

What you get

Accessibility, checked where it matters

Hover

Point at any text

A heading, a label or a paragraph: MiroMiro reads the real colors behind it.

Ratio

AA and AAA, at a glance

The WCAG contrast ratio with pass or fail for normal and large text.

Scan

Every issue on the page

Scan the whole page and jump straight to each failing text.

What is the contrast checker?

MiroMiro内蔵のコントラストチェッカーで、前景色と背景色の組み合わせがWCAGアクセシビリティ基準を満たしているか検証。AAとAAAの両レベルでコントラスト比を確認し、通常テキストと大テキストの色アクセシビリティをテスト。Starkなどの単体ツールと違い、MiroMiroはライブWebサイト上でホバーするだけでコントラストを直接チェックでき、HEXコードを手動でコピーする必要がありません。

FAQ

Contrast checker questions

RelatedFor designers

Compare withStylebot

More featuresCSS Inspector Assets SVG Lottie Colors Inspect & Export Tokens Elementor

Try the contrast checker on any website

Install MiroMiro free. Full Pro for 3 days, no card needed.

Add to Chrome, free View pricing