YUCTS Tools
Tiếng ViệtNgôn ngữ

Kiểm tra độ tương phản màu (WCAG 2.2 AA và AAA)

Nhập mã HEX của màu chữ và màu nền để tính tỷ lệ tương phản theo WCAG 2.2 và xem chữ thường, chữ lớn và thành phần giao diện có đạt AA, AAA hay không.

  • Xử lý trên trình duyệt (không tải lên)

#RGB hoặc #RRGGBB (ví dụ: #6B7280)

#RGB hoặc #RRGGBB (ví dụ: #6B7280)

Kết quả

Tỷ lệ tương phản 4,83:1

Tỷ lệ tương phản
4,83:1

So sánh với WCAG 2.2

  • Nội dung: Chữ thườngKết quả: Đạt

    Yêu cầu: AA: tối thiểu 4,5:1 (tiêu chí 1.4.3)

  • Nội dung: Chữ thườngKết quả: Không đạt

    Yêu cầu: AAA: tối thiểu 7:1 (tiêu chí 1.4.6)

  • Nội dung: Chữ lớnKết quả: Đạt

    Yêu cầu: AA: tối thiểu 3:1 (tiêu chí 1.4.3)

    Từ 24px (18pt) trở lên, hoặc chữ đậm từ khoảng 18,66px (14pt) trở lên

  • Nội dung: Chữ lớnKết quả: Đạt

    Yêu cầu: AAA: tối thiểu 4,5:1 (tiêu chí 1.4.6)

    Từ 24px (18pt) trở lên, hoặc chữ đậm từ khoảng 18,66px (14pt) trở lên

  • Nội dung: Thành phần giao diện và đồ họaKết quả: Đạt

    Yêu cầu: AA: tối thiểu 3:1 (tiêu chí 1.4.11)

    Viền nút, biểu tượng, biểu đồ và nội dung không phải chữ khác

Kết quả đạt/không đạt dùng giá trị chưa làm tròn; tỷ lệ hiển thị được cắt bớt còn 2 chữ số thập phân (ví dụ: 4,499:1 hiển thị là 4,49:1 và không đạt 4,5:1).

Xem trước

Đây là chữ thường cỡ 16px. Hãy kiểm tra xem có dễ đọc không.

Chữ lớn cỡ 24px

Chữ đậm cỡ khoảng 18,66px

Viền kiểu nút bấm và biểu tượng

Độ chói tương đối

Màu chữ #6B7280
0,1672
Màu nền #FFFFFF
1,0000

Cách sử dụng

  1. Nhập màu chữ và màu nền theo dạng #RRGGBB hoặc #RGB, hoặc chọn bằng bảng màu.
  2. Tỷ lệ tương phản và kết quả AA / AAA cho chữ thường, chữ lớn và thành phần giao diện hiện ra ngay.
  3. Xem phần xem trước và nhấn "Sao chép" để chia sẻ kết quả khi cần.

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

AA và AAA khác nhau thế nào?

Đó là các mức tuân thủ của WCAG 2.2. Chữ thường cần ít nhất 4,5:1 cho AA và 7:1 cho AAA; chữ lớn cần ít nhất 3:1 cho AA và 4,5:1 cho AAA.

"Chữ lớn" là cỡ bao nhiêu?

WCAG định nghĩa chữ lớn là từ 18 point trở lên, hoặc chữ đậm từ 14 point trở lên. Trong CSS, 1pt khoảng 1,333px, tức là khoảng 24px, hoặc chữ đậm khoảng 18,66px trở lên.

Hiển thị 4,49:1 — làm tròn chẳng phải là 4,5 sao?

Tài liệu Understanding SC 1.4.3 nêu rõ không được làm tròn giá trị tính được: 4,499:1 không đạt 4,5:1. Công cụ này đánh giá bằng giá trị chưa làm tròn và cắt bớt số hiển thị để cặp màu không đạt không trông như đã đạt.

Có kiểm tra được màu trong suốt hoặc dải màu không?

Không. Công cụ chỉ so sánh hai màu đặc, không trong suốt. Với màu trong suốt, hãy kiểm tra màu đặc thực sự hiển thị trên màn hình.

Lưu ý & giới hạn

  • Nội dung bạn nhập chỉ được xử lý trên trang này và không gửi đến máy chủ của YUCTS.
  • Dùng công thức tương phản của WCAG 2.x (2.2). Các phương pháp khác như APCA cho kết quả khác.
  • Không tính đến ảnh nền, dải màu, độ trong suốt, bóng chữ, độ đậm và kiểu chữ.
  • Kết quả tự động chỉ mang tính tham khảo. Logo và nội dung trang trí có thể được miễn, vì vậy hãy xem xét toàn bộ trang trước khi quyết định.

Nguồn dữ liệu