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.

MiroMiro

ログイン Chromeに追加

すべての機能

Contrast

Live Contrast Checker for Real Websites

Check color contrast ratios for WCAG 2.1 accessibility compliance. Test AA and AAA levels for foreground and background color combinations directly on live websites.

Chromeに追加料金を見る

無料で試せるローカル＆プライベート 20,000人以上が利用

ライブデモ

Contrastの実演--実際のWebサイトで撮影。

Contrastについて

MiroMiroのContrastの仕組み

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

主なメリット

すぐに使える機能

Check WCAG compliance instantly

AA and AAA level verification

Real-time contrast ratios

Improve accessibility

ユースケースAccessibility auditsDesign reviewCompliance checkingInclusive design

4ステップで開始

Contrastの使い方

1
Install MiroMiro
Add MiroMiro to Chrome from the Chrome Web Store - it's free.
2
Inspect any text element
Hover over any text on a website to see its color and background color detected automatically.
3
Check the contrast ratio
MiroMiro displays the WCAG contrast ratio and shows AA/AAA pass or fail status for both normal and large text.
4
Fix and verify
Adjust your colors and re-check until you achieve the desired WCAG compliance level.