Xác minh một ảnh chụp màn hình mà bạn không có nguồn — landing marketing, UI đối thủ, PDF. Kiểm tra logo trên nền ảnh chụp lộn xộn, nơi "màu nền" không phải một giá trị duy nhất. Kiểm tra trường hợp xấu nhất của tương phản dọc theo gradient hoặc phía sau văn bản bán trong suốt. So sánh nhanh hai state UI (ví dụ button rest vs hover) mà không phải build lại design.

Trình kiểm tra tương phản trên ảnh

Nhấp vào bất kỳ hai điểm nào trên ảnh để kiểm tra tương phản WCAG — AA, AAA, ngưỡng văn bản lớn. Dành cho designer xác minh ảnh chụp màn hình thực tế, không chỉ mã hex.

Pick or drop an image (PNG, JPG, WebP, screenshot)

Sample Clicking the image alternates between Foreground and Background samples.

🔒 Files never leave your browser — no upload, no server, no tracking.

Image (click to sample)

No image yet.

Samples

Foreground (next click)

—

Background

—

Kết quả

Sample two colours to see the contrast ratio.

Công cụ này để làm gì?

Trình kiểm tra tương phản WCAG thông thường cần hai mã hex — nhưng một designer làm pass accessibility trên ảnh chụp màn hình thực không có mã hex, họ có pixel. Tool này cho phép bạn upload một ảnh (ảnh chụp màn hình, thiết kế hero, logo trên nền lộn xộn) và nhấp vào bất kỳ hai điểm nào. Nó lấy mẫu màu dưới con trỏ (1 pixel hoặc trung bình 3×3/5×5) và tính tỷ lệ tương phản WCAG 2.1. Phán quyết cho AA, AA-lớn, AAA, AAA-lớn và ngưỡng thành phần UI (1.4.11). Tất cả trong trình duyệt.

Khi nào nên dùng

Xác minh một ảnh chụp màn hình mà bạn không có nguồn — landing marketing, UI đối thủ, PDF.
Kiểm tra logo trên nền ảnh chụp lộn xộn, nơi "màu nền" không phải một giá trị duy nhất.
Kiểm tra trường hợp xấu nhất của tương phản dọc theo gradient hoặc phía sau văn bản bán trong suốt.
So sánh nhanh hai state UI (ví dụ button rest vs hover) mà không phải build lại design.

Cách lấy mẫu hoạt động

Lấy mẫu 1 pixel chính xác nhưng nhiễu — viền anti-aliased, artefact JPEG và subpixel rendering làm các pixel láng giềng khác nhau. Trung bình 5×5 thường là điều bạn muốn cho UI: nó trả về màu mà con người sẽ mô tả, không phải pixel chính xác dưới chuột. Dùng 1px khi kiểm tra viền logo hoặc ranh giới màu sắc nét.

Lưu ý thường gặp

Anti-aliasing. Viền chữ trung bình hóa thành màu nằm ngoài design intent. Nhấp vào giữa nét chữ, không phải viền.
Nén JPEG. Ảnh nén mạnh có drift màu ở vùng phẳng. Trung bình 5×5 làm mượt drift đó.
Lớp bán trong suốt. Đối với tương phản, điều quan trọng là pixel được render, không phải màu nguồn. Tool này đọc pixel được render — chính xác là điều bạn muốn.
Bạn kiểm tra màu, không phải design intent. Nếu nút của bạn đạt AA ở rest nhưng fail ở hover trong ảnh chụp khác, cả hai state đều là bug a11y.
Scaling ảnh. Tool thu nhỏ ảnh lớn để có hiệu năng. Pixel được lấy mẫu phản ánh pixel hiển thị; nếu bạn cần lấy mẫu pixel-perfect của một phần tử UI rất nhỏ, hãy crop ảnh trước khi upload.