1:1 to 21:1 · AA · AAA
Trình kiểm tra độ tương phản
Chữ đen trên nền trắng có tỉ lệ tương phản WCAG là 21:1, cao nhất có thể, và chữ trắng trên #0060fd là 5.13:1. Nhập một màu chữ và một màu nền để kiểm tra cặp màu của bạn.
- #000000 on #ffffff = 21.00:1
- #ffffff on #0060fd = 5.13:1
- #767676 on #ffffff = 4.54:1
- #777777 on #ffffff = 4.47:1
Tỉ lệ và năm phép kiểm tra cập nhật ngay khi bạn nhập. Tỉ lệ được cắt còn hai chữ số thập phân, không bao giờ làm tròn lên, nên 4.499 hiển thị là 4.49:1 và không đạt phép kiểm tra 4.5:1.
Scanned by 
NortonTM Safe Web
Tóm tắt nhanh
- Giá
- Không mất phí
- Tài khoản
- Không cần
- Tải lên
- Không áp dụng — bạn nhập các màu, không có gì bị gửi đi đâu cả
- Công thức
- (độ chói màu sáng hơn + 0.05) ÷ (độ chói màu tối hơn + 0.05)
- Ngưỡng
- AA 4.5:1 chữ thường và 3:1 chữ lớn; AAA 7:1 chữ thường và 4.5:1 chữ lớn; 3:1 cho thành phần giao diện
- Tiêu chuẩn
- Định nghĩa WCAG 2.2 về độ chói tương đối và tỉ lệ tương phản
Tỉ lệ tương phản của các cặp màu quen thuộc
Các dòng này được tạo bởi cùng mã với trình kiểm tra. Dấu tích nghĩa là cặp màu đáp ứng yêu cầu; dấu chéo nghĩa là không.
| Màu chữ | Màu nền | Tỉ lệ | AA chữ thường | AA chữ lớn | AAA chữ thường | AAA chữ lớn | Thành phần giao diện |
|---|---|---|---|---|---|---|---|
| #000000 | #ffffff | 21.00:1 | ✓ | ✓ | ✓ | ✓ | ✓ |
| #ffffff | #0060fd | 5.13:1 | ✓ | ✓ | ✗ | ✓ | ✓ |
| #767676 | #ffffff | 4.54:1 | ✓ | ✓ | ✗ | ✓ | ✓ |
| #777777 | #ffffff | 4.47:1 | ✗ | ✓ | ✗ | ✗ | ✓ |
| #0060fd | #ffffff | 5.13:1 | ✓ | ✓ | ✗ | ✓ | ✓ |
| #ffffff | #ffffff | 1.00:1 | ✗ | ✗ | ✗ | ✗ | ✗ |
| Phép kiểm tra | Tỉ lệ tối thiểu |
|---|---|
| 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 |
| AA, thành phần giao diện và đồ họa | 3:1 |
Cách kiểm tra một cặp màu
Nhập cả hai màu
Nhập màu chữ và màu nền theo bất kỳ ký hiệu CSS nào, hoặc dùng bộ chọn màu. Nút hoán đổi sẽ đổi chỗ hai màu, hữu ích cho chữ sáng trên nền tối.
Đọc tỉ lệ
Tỉ lệ chạy từ 1:1 (hai màu giống hệt nhau) đến 21:1 (đen trên trắng). Phần xem trước bên dưới các ô nhập hiển thị cặp màu ở cỡ 16 px và 24 px, để bạn tự đánh giá kết quả bằng mắt mình.
Xem năm phép kiểm tra
Mỗi ô cho biết Đạt hoặc Không đạt với một yêu cầu WCAG: AA và AAA cho chữ thường, AA và AAA cho chữ lớn, và AA cho các thành phần giao diện. Nếu chữ thường không đạt AA, trang sẽ gợi ý màu chữ gần nhất đạt yêu cầu.
Tỉ lệ tương phản được tính thế nào
WCAG đo độ tương phản qua độ chói tương đối, tức độ sáng của một màu từ 0 (đen) đến 1 (trắng). Mỗi kênh đỏ, lục và lam được chia cho 255; giá trị đến 0.04045 được chia cho 12.92, còn giá trị lớn hơn được nâng lên lũy thừa: (giá trị + 0.055) chia cho 1.055, rồi lũy thừa 2.4. Độ chói khi đó là 0.2126 nhân đỏ cộng 0.7152 nhân lục cộng 0.0722 nhân lam, phản ánh mức độ mắt phản ứng với từng màu. Tỉ lệ tương phản là độ chói của màu sáng hơn cộng 0.05, chia cho độ chói của màu tối hơn cộng 0.05.
WCAG 2 yêu cầu ít nhất 4.5:1 cho chữ thường và 3:1 cho chữ lớn ở mức AA, và 7:1 cùng 4.5:1 ở mức AAA. Chữ lớn là từ 18 point trở lên, tức 24 pixel CSS, hoặc từ 14 point trở lên nếu in đậm, khoảng 18.66 pixel. Tiêu chí thành công 1.4.11 yêu cầu 3:1 cho các thành phần giao diện và đồ họa mà người đọc cần nhìn thấy, như viền ô nhập hoặc đường biểu đồ. Tỉ lệ được so với từng ngưỡng mà không làm tròn. Nếu một màu có độ trong suốt, nền trong suốt được đặt lên màu trắng và màu chữ trong suốt được đặt lên nền trước khi đo. Trang này chỉ triển khai WCAG 2.x; không tính APCA, vốn đang được bàn cho một phiên bản sau của bộ hướng dẫn.
Câu hỏi về độ tương phản
WCAG yêu cầu tỉ lệ tương phản bao nhiêu cho chữ?
Ở mức AA, chữ thường cần ít nhất 4.5:1 và chữ lớn ít nhất 3:1. Ở mức AAA, các con số là 7:1 cho chữ thường và 4.5:1 cho chữ lớn. Tỉ lệ được đo giữa màu chữ và màu ngay phía sau nó.
Thế nào được coi là chữ lớn?
WCAG định nghĩa chữ lớn là từ 18 point trở lên, tức 24 pixel CSS, hoặc từ 14 point trở lên nếu in đậm, tức khoảng 18.66 pixel CSS. Mọi thứ nhỏ hơn được coi là chữ thường và cần tỉ lệ cao hơn.
Màu xám nhạt nhất đạt AA trên nền trắng là màu nào?
#767676 trên nền trắng có tỉ lệ 4.54:1 và đạt phép kiểm tra 4.5:1 cho chữ thường. Màu xám nhạt hơn kế tiếp, #777777, đạt 4.47:1 và không đạt. Với 7:1 (AAA), màu xám nhạt nhất là #595959, đạt 7.00:1.
Vì sao 4.49 không đạt dù trông giống 4.5?
Các phép kiểm tra so tỉ lệ chính xác với ngưỡng. Tỉ lệ 4.499 thấp hơn 4.5 nên không đạt, và trang hiển thị là 4.49:1 thay vì làm tròn lên. Màu đỏ thuần trên nền trắng là một ví dụ thật: 3.99:1 không đạt phép kiểm tra 4.5:1 cho chữ thường, dù rất gần.
Biểu tượng, đường viền và ô nhập biểu mẫu cần độ tương phản bao nhiêu?
Tiêu chí thành công 1.4.11 Độ tương phản của thành phần không phải văn bản, được thêm vào WCAG 2.1, yêu cầu ít nhất 3:1 giữa các thành phần giao diện hoặc đồ họa mà người đọc cần nhìn thấy, như viền ô nhập, vòng focus hay đường biểu đồ, và các màu bên cạnh. Các điều khiển bị vô hiệu hóa và đồ họa thuần trang trí được miễn.
Tỉ lệ đạt có nghĩa là trang dễ tiếp cận không?
Không. Độ tương phản chỉ là một yêu cầu trong nhiều yêu cầu. Cỡ chữ và độ đậm, khoảng cách dòng, việc chỉ dùng màu để truyền đạt ý nghĩa, khả năng nhìn thấy focus, chữ trên ảnh và dải màu chuyển, và cách người có các kiểu thị giác màu khác nhau nhìn một trang đều quan trọng. Hãy xem kết quả này là một yếu tố đầu vào, và kiểm thử trang với nội dung thật.