Kiểm Tra Độ Tương Phản Màu WCAG miễn phí

Cách hoạt động

Kiểm tra độ tương phản chạy hoàn toàn trong trình duyệt bằng thuật toán độ chói tương đối WCAG 2.1 — không thư viện, không máy chủ, chỉ phép tính tự viết theo đúng đặc tả. Mọi kết quả cập nhật theo thời gian thực khi bạn gõ hoặc chọn màu.

1. 1
   Nhập hex và chuẩn hóa

   Cả giá trị hex 3 chữ số (#abc) và 6 chữ số (#aabbcc) đều được chấp nhận và chuẩn hóa thành bộ ba RGB đầy đủ. Đầu vào không hợp lệ bị từ chối ngay thay vì âm thầm mặc định thành màu đen, nên sẽ hiện viền đỏ thay vì kết quả đạt gây hiểu nhầm.
2. 2
   Tính độ chói WCAG

   Mỗi màu được chuyển sang độ chói tương đối theo công thức WCAG 2.1: giá trị kênh sRGB được tuyến tính hóa bằng hiệu chỉnh gamma từng đoạn (chia cho 12,92 dưới 0,03928, lũy thừa 2,4 phía trên), rồi tính trọng số 0.2126R + 0.7152G + 0.0722B.
3. 3
   Tỷ lệ tương phản và kiểm tra tuân thủ

   Tỷ lệ tương phản được tính bằng (sáng hơn + 0,05) / (tối hơn + 0,05) và kiểm tra theo cả năm ngưỡng WCAG: AA văn bản thường (4.5:1), AA văn bản lớn (3:1), AAA văn bản thường (7:1), AAA văn bản lớn (4.5:1) và thành phần giao diện (3:1). Kết quả cập nhật với mỗi lần gõ phím.
4. 4
   Gợi ý sửa giữ nguyên sắc độ

   Khi cặp màu không đạt WCAG AA, công cụ tìm trong không gian độ sáng HSL — bước dần ra từ độ sáng gốc theo cả hai hướng — để tìm biến thể gần nhất của mỗi màu đạt 4.5:1 mà vẫn giữ sắc độ và độ bão hòa. EyeDropper API (Chromium) cũng có sẵn để lấy mẫu màu bất kỳ trực tiếp từ màn hình.

Công cụ liên quan