tool hub Bộ công cụ

WCAG Contrast Checker

WCAG Contrast Checker — chạy trên trình duyệt. Không lưu dữ liệu.

Chạy trên trình duyệt Không cần đăng ký Miễn phí


Độ tương phản WCAG

Nhập giá trị, rồi nhấn Tính.

Cách sử dụng

  1. Nhập HEX chữ (nền trước)HEX nền. Mặc định #111111 và #ffffff.
  2. Nhấn Tính để xem trước câu mẫu, tỷ lệ tương phản và đánh giá chữ thường / chữ lớn.
  3. Đảo màu thì nhấn Đảo màu rồi tính lại.
  4. Đánh giá trượt thì làm HEX tối hoặc sáng hơn một chút rồi tính lại.
  5. Đặt lại khôi phục cặp đen-trắng mặc định. Chỉ hỗ trợ HEX đặc.

Khái niệm chính

Kiểm tương phản WCAG đo khả năng tiếp cận web: chữ nội dung và nút nổi trên nền thế nào. Tỷ lệ tương phản tính từ độ chói tương đối rồi so với WCAG 2.x. Chữ thường là AA 4,5:1 và AAA 7:1; chữ lớn (khoảng 18 pt hoặc 14 pt đậm) là AA 3:1 và AAA 4,5:1. Là bộ kiểm tương phản hiện tỷ lệ WCAG 2 và AA/AAA cho chữ nội dung và nút có phân biệt với nền. Là bộ kiểm xem nhanh tỷ lệ tương phản và AA/AAA của màu chữ so với HEX nền khi rà khả năng tiếp cận. Không phải kết luận pháp lý cuối.

Kết quả là tính tham khảo, không thay kiểm toán tiếp cận hay tuân thủ pháp lý cuối. Màu bán trong suốt có alpha, gradient và chữ trên ảnh có thể cần hơn công thức này. Tính chỉ trong trình duyệt. Công thức độ chói tương đối giả định HEX sRGB đặc. Lớp phủ mờ và chữ trên ảnh có thể khác thực tế. Ngưỡng chữ lớn và chữ thường khác, nên tính màu tiêu đề và màu nội dung riêng.

Ví dụ

Chữ #111111 trên nền #ffffff cho tỷ lệ khoảng 19:1, gần AAA cả chữ thường và chữ lớn. Xám nhạt #9ca3af trên trắng thường trượt AA chữ thường. Đảo màu làm nền tối và đổi cảm nhận preview. Chữ #2563eb trên #ffffff có thể nằm giữa, vừa đạt hoặc trượt AA chữ thường. Thử xanh đậm hơn. Chữ #6b7280 trên #f9fafb tỷ lệ thấp, thường trượt chữ thường. Đổi chữ thành #111 gần AAA.

Liên quan: Bảng màu · Đổi màu

Câu hỏi thường gặp

Ngưỡng chữ lớn WCAG áp thế nào?

Tiêu chí nới 3:1 / 4,5:1 cho 18 pt hoặc 14 pt đậm hiện ở ô chữ lớn. Ô đó là ngưỡng nới cho tiêu đề và từ 18 pt. Giả định 18 pt / 14 pt đậm chỉ áp ô chữ lớn.

Tỷ lệ tương phản WCAG AAA là bao nhiêu?

7:1 trở lên cho chữ thường và 4,5:1 trở lên cho chữ lớn. AA lần lượt 4,5:1 và 3:1. AAA là 7:1 cho nội dung nên màu thương hiệu nhạt thường trượt. Pastel thương hiệu thường thiếu AAA.

HEX có kênh alpha trong suốt dùng kiểm tương phản được không?

Chỉ hỗ trợ HEX đặc. Không hỗ trợ trong suốt; nhập HEX cuối đã chồng. Có mờ thì chồng trước rồi nhập HEX.

Câu nào dùng trong preview tương phản?

Hiện chữ mẫu “Sample 가나다” cùng màu chữ và nền. Preview là câu mẫu, có thể khác kích thước thành phần thật.

Kiểm này bảo đảm tuân thủ pháp lý về tiếp cận?

Là tính tham khảo. Kiểm toán cuối làm riêng. Đừng coi số này là đạt pháp lý. Đừng thay checklist kiểm toán chỉ bằng số này.

Đảo chữ và nền một lúc được không?

Nút Đảo màu đổi hai giá trị HEX. Nhấn Tính lại. Cũng so cặp chế độ tối bằng Đảo màu.

WCAG Contrast Checker ảnh đại diện
Dữ liệu không được gửi lên máy chủ và sẽ mất khi bạn đóng trang.

Cập nhật lần cuối: 2026-09-04