Công cụ kiểm tra độ tương phản màu (WCAG)
Nhập hai màu ở dạng hex (#1f2937) hoặc rgb(31, 41, 55).
Kết quả
4,54:1Tỷ lệ tương phản
- AA, chữ thường (4,5:1)
- ✓
- AA, chữ lớn (3:1)
- ✓
- AAA, chữ thường (7:1)
- ✕
- AAA, chữ lớn (4,5:1)
- ✓
- Màu đã đọc
- #767676 / #ffffff
Dữ liệu đầu vào
- Màu chữ
- #767676
- Màu nền
- #ffffff
Cách tính
Độ chói tương đối của mỗi màu được tính từ các kênh sRGB đã tuyến tính hóa.
Kết quả
Tỷ lệ tương phản
- AA, chữ thường (4,5:1)
- ✓
- AA, chữ lớn (3:1)
- ✓
- AAA, chữ thường (7:1)
- ✕
Cách tính
- Độ chói tương đối của mỗi màu được tính từ các kênh sRGB đã tuyến tính hóa.
- Tỷ lệ = (L sáng hơn + 0,05) ÷ (L tối hơn + 0,05), từ 1:1 đến 21:1.
- Tỷ lệ được so sánh với ngưỡng WCAG 2 mà không làm tròn.
Ví dụ
#767676 trên nền trắng đạt 4,54:1: đáp ứng AA cho chữ thường, nhưng không đạt AAA.
Điều cần biết
- Chữ lớn có kích thước ít nhất 24 px hoặc 18,66 px nếu in đậm.
- Không tính độ trong suốt và dải màu chuyển sắc.
Khi nào nên dùng
- Kiểm tra độ dễ đọc giữa chữ và nền trên trang web.
- Xem cặp màu có đạt mục tiêu tương phản WCAG AA hoặc AAA không.
Câu hỏi thường gặp
Tỷ lệ WCAG AA tối thiểu cho chữ thường là bao nhiêu?
WCAG 2 yêu cầu chữ thường có tỷ lệ tương phản ít nhất 4,5:1.
WCAG định nghĩa chữ lớn như thế nào?
Chữ lớn có kích thước tối thiểu 24 px CSS hoặc khoảng 18,66 px CSS nếu in đậm.
Công cụ có tính độ trong suốt và chuyển sắc không?
Không. Công cụ so sánh các màu đặc đã nhập và không tính độ trong suốt hay chuyển sắc.