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 的实景演示--录制于真实网站。

关于Contrast

MiroMiro 中 Contrast 的工作原理

MiroMiro's built-in Contrast Checker helps you verify that foreground and background color combinations meet WCAG compliance standards. Check contrast ratios for both AA and AAA levels, test color accessibility for normal and large text, and ensure web accessibility for users with color vision deficiency. Unlike standalone tools like Stark, MiroMiro lets you check contrast directly on live websites by hovering - no need to copy hex codes manually.

主要优势

开箱即用的能力

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.

Try Contrast free

Full Pro for 3 days - no card needed. Takes about 30 seconds to install.

添加到 Chrome

5.0 · 20,000+ developers & designers

FAQ

常见问题

安装 MiroMiro 之前您需要了解的关于 Contrast 的一切。

MiroMiro 的更多功能

查看全部功能

免费设计工具: Lottie Preview Lottie to GIF All Tools

准备好试试 Contrast 了吗？

立即开始从任何网站提取 CSS、颜色和资源。

添加到 Chrome 查看定价

Live Contrast Checker for Real Websites

MiroMiro 中 Contrast 的工作原理

开箱即用的能力

如何使用 Contrast

Install MiroMiro

Inspect any text element

Check the contrast ratio

Fix and verify

Try Contrast free

常见问题

探索更多功能

准备好试试 Contrast 了吗？