Kiểm tra tương phản
Tính tỷ lệ tương phản WCAG giữa hai màu cùng kết quả đậu / rớt AA và AAA cho chữ thường và chữ lớn, kèm xem trước trực tiếp. Tất cả chạy ngay trong trình duyệt.
Aa — The quick brown fox jumps over the lazy dog. 0123456789
Aa — Large & bold sample 24px
WCAG thresholds — normal text: AA ≥ 4.5, AAA ≥ 7; large text (≥ 24 px, or ≥ 18.7 px bold): AA ≥ 3, AAA ≥ 4.5.
Công cụ này chạy hoàn toàn trong trình duyệt của bạn. Dữ liệu không bao giờ rời khỏi thiết bị — không được tải lên bất kỳ máy chủ nào.
Cách sử dụng
- 1Nhập giá trị hex hoặc rgb(), hoặc dùng bộ chọn màu, cho màu chữ.
- 2Làm tương tự với màu nền.
- 3Đọc tỷ lệ và kết quả AA / AAA, hoặc chạm vào một cặp mẫu.
- 4Tự đánh giá cặp màu bằng mắt qua khối xem trước.
Kiểm tra tương phản
Nhập màu chữ và màu nền — dạng hex như #333 hay #1F2937, hoặc rgb()/rgba() — và đọc tỷ lệ tương phản WCAG với hai chữ số thập phân, cùng kết quả ngay lập tức của bốn ngưỡng quan trọng: AA và AAA, chữ thường và chữ lớn. Phần xem trước hiển thị một đoạn văn và một tiêu đề lớn bằng màu thật.
Phép tính dùng công thức độ sáng tương đối chính thức của WCAG 2.x — giống hệt bộ kiểm tra của W3C — nên 4.5 ở đây là 4.5 ở mọi nơi. Trong các cặp mẫu có cặp xám 4.54:1 cho bạn thấy ngưỡng AA khít đến mức nào.
Câu hỏi thường gặp
Cần tỷ lệ tương phản bao nhiêu để đạt?
Theo WCAG 2.x: chữ thường cần 4.5:1 cho AA và 7:1 cho AAA. Chữ lớn — từ 24 px, hoặc 18.7 px đậm — cần 3:1 cho AA và 4.5:1 cho AAA. Thành phần giao diện và đồ họa cần 3:1.
Tỷ lệ được tính thế nào?
Mỗi màu được tuyến tính hóa từ sRGB rồi gộp thành độ sáng tương đối L = 0.2126·R + 0.7152·G + 0.0722·B; tỷ lệ bằng (L sáng + 0.05) / (L tối + 0.05) — đúng công thức trong đặc tả WCAG 2.x. Alpha của rgba() nhỏ hơn 1 được dẹt lên nền trắng trước khi tính.
Công cụ liên quan
Chuyển đổi màu
Dán màu dạng hex, rgb() hay hsl() và nhận cả ba định dạng cùng một dải tints và shades sẵn sàng cho hệ thiết kế của bạn.
Tất cả công cụ →
Chọn màu
Chọn màu từ bảng mẫu hay lấy thẳng từ màn hình bằng EyeDropper API — hex, RGB và HSL sao chép một cú bấm.
Tất cả công cụ →
Máy tính điểm
Máy tính điểm theo trọng số hoặc theo điểm: thêm bài tập, theo dõi điểm và xếp hạng hiện tại theo thời gian thực, và biết chính xác cần bao nhiêu ở bài thi cuối kỳ.
Tất cả công cụ →
Nhúng công cụ này
Đưa công cụ này vào trang của bạn bằng một dòng — nó chạy trong trình duyệt của khách.
<iframe src="https://zoyku.com/vi/tools/contrast-checker?embed=1" width="100%" height="640" style="border:0;border-radius:16px" title="Zoyku — contrast-checker" loading="lazy"></iframe>