Global ToolBox

Kiểm Tra Độ Tương Phản

Nhập màu chữ và màu nền để tính tỷ lệ tương phản WCAG, hiển thị kết quả đạt/không đạt cho AA và AAA cùng bản xem trước trực tiếp.

🔒 Xử lý cục bộ ngay trên trình duyệt của bạn

Loading…

Cách sử dụng

  1. Nhập màu chữ (tiền cảnh) vào ô đầu tiên, hoặc chọn bằng bảng chọn màu.
  2. Nhập màu nền vào ô thứ hai, hoặc chọn bằng bảng chọn màu.
  3. Tỷ lệ tương phản và bản xem trước của tổ hợp màu thực tế sẽ cập nhật ngay lập tức.
  4. Xem bốn huy hiệu để biết tổ hợp màu có đạt chuẩn WCAG AA và AAA cho văn bản thường và văn bản lớn hay không.

Tính năng

  • Hỗ trợ các định dạng màu hex, rgb() và hsl()
  • Tính chính xác tỷ lệ tương phản theo độ sáng tương đối của WCAG 2.x
  • Hiển thị huy hiệu đạt/không đạt cho AA và AAA ở cả văn bản thường và lớn
  • Xem trước trực tiếp tổ hợp màu chữ trên nền thực tế
  • Xử lý 100% trên trình duyệt — màu của bạn không bao giờ rời khỏi thiết bị

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

Tỷ lệ tương phản được tính như thế nào?

Tỷ lệ được tính theo công thức WCAG 2.x: các kênh sRGB của mỗi màu được tuyến tính hóa, kết hợp thành giá trị độ sáng tương đối, sau đó tỷ lệ là (L1 + 0.05) / (L2 + 0.05), trong đó L1 là độ sáng của màu sáng hơn. Tỷ lệ dao động từ 1:1 (không tương phản) đến 21:1 (đen trên trắng).

Sự khác biệt giữa AA và AAA là gì?

AA là mức tuân thủ tiêu chuẩn mà hầu hết các trang web hướng tới; AAA là mức nâng cao nghiêm ngặt hơn. AA yêu cầu 4,5:1 với văn bản thường và 3:1 với văn bản lớn, trong khi AAA yêu cầu lần lượt 7:1 và 4,5:1.

Văn bản lớn theo định nghĩa của WCAG là gì?

Văn bản lớn được định nghĩa là ít nhất 18pt (24px) ở độ đậm thường, hoặc ít nhất 14pt (18,66px) ở chữ đậm. Nét chữ to và đậm hơn vẫn dễ đọc ở độ tương phản thấp hơn, nên yêu cầu được nới lỏng hơn.

Tôi có thể nhập những định dạng màu nào?

Bạn có thể nhập mã hex (#000 hoặc #000000), chuỗi rgb()/rgba() hoặc hsl()/hsla(), hoặc dùng bảng chọn màu bên cạnh mỗi ô.

Công cụ này có lưu trữ hoặc tải lên màu của tôi không?

Không. Mọi phân tích và tính toán tương phản đều diễn ra cục bộ trên trình duyệt của bạn bằng JavaScript thuần túy. Không có gì được gửi đến máy chủ hay lưu trữ.

Công cụ liên quan