Contrast Checker
WCAG contrast check
WCAG contrast check Chạy cục bộ trong trình duyệt của bạn
The quick brown fox
Small body text at 14px
| Normal text (AA) | needs 4.5:1 | Pass |
| Normal text (AAA) | needs 7:1 | Pass |
| Large text 18pt+ (AA) | needs 3:1 | Pass |
| Large text 18pt+ (AAA) | needs 4.5:1 | Pass |
| UI components and graphics (AA) | needs 3:1 | Pass |
Text: #1a1a1a Background: #ffffff Contrast ratio: 17.40:1 Normal text (AA) (needs 4.5:1): Pass Normal text (AAA) (needs 7:1): Pass Large text 18pt+ (AA) (needs 3:1): Pass Large text 18pt+ (AAA) (needs 4.5:1): Pass UI components and graphics (AA) (needs 3:1): Pass
About the
Bộ kiểm tra độ tương phản đo tỷ lệ tương phản giữa màu văn bản và màu nền bằng cách sử dụng công thức độ sáng WCAG và cho bạn biết cặp đó đạt được mức trợ năng nào. Đây là bước kiểm tra quyết định liệu văn bản nội dung có thực sự đọc được hay không: tỷ lệ 4,5 trên 1 là mức tối thiểu đối với văn bản thông thường, 3 trên 1 đối với văn bản lớn và ranh giới giao diện, và 7 trên 1 để tăng cường tuân thủ. Đánh giá độ tương phản bằng mắt là không đáng tin cậy, bởi vì mắt nhạy cảm với màu xanh lá cây hơn so với màu xanh lam, đó là lý do tại sao màu vàng trông sáng và màu xanh lam trông tối có thể cho điểm gần như giống hệt nhau.
Where people use the
- Kiểm tra xem văn bản nội dung trên nền màu có đáp ứng AA hay không.
- Chọn giữa văn bản đen và trắng cho màu nút.
- Kiểm tra bảng màu hiện có trước khi thiết kế lại.
- Ghi lại quyết định về khả năng tiếp cận trong một phiếu.
How to use the
- 1
Đặt màu văn bản
Nhập giá trị hex chẳng hạn như 1a1a1a hoặc sử dụng bộ chọn màu. Tốc ký ba chữ số như f0a được chấp nhận.
- 2
Đặt màu nền
Tương tự cho nền. Bản xem trước cập nhật khi bạn thay đổi một trong hai.
- 3
Đọc tỷ lệ
Số này chạy từ 1:1, cùng màu, đến 21:1, đen trên trắng. Cao hơn có nghĩa là dễ đọc hơn.
- 4
Kiểm tra mức độ bạn cần
Văn bản nội dung bình thường cần 4,5 đến 1 cho AA và 7 đến 1 cho AAA. Tiêu đề in đậm 18pt hoặc 14pt và đường viền giao diện người dùng cần 3 trên 1.
- 5
Nhìn vào bản xem trước cũng như số lượng
Một cặp có thể vượt qua trên giấy và trông vẫn kém ở kích thước nhỏ hoặc trên màn hình chất lượng thấp. Nhìn khó đọc thì khó đọc.
Lời khuyên và phương pháp hay nhất
- Làm tối màu cho văn bản, giữ phiên bản sáng hơn để tô màu.
- Kiểm tra kích thước nhỏ nhất mà văn bản sẽ thực sự được sử dụng.
- Đường viền và biểu tượng cũng cần 3 trên 1 chứ không chỉ văn bản.
Câu hỏi thường gặp
Công thức tỷ lệ tương phản là gì?
Mỗi màu được chuyển đổi thành độ chói tương đối bằng cách sử dụng các trọng số tiêu chuẩn, 0,2126 cho màu đỏ, 0,7152 cho màu xanh lá cây và 0,0722 cho màu xanh lam, sau khi hiệu chỉnh gamma. Tỷ lệ sau đó là độ chói sáng hơn cộng 0,05 chia cho độ sáng tối hơn cộng 0,05. Kết quả dao động từ 1:1 đến 21:1.
Tại sao màu sắc thương hiệu của tôi thất bại?
Bởi vì hầu hết các màu trung tính bão hòa không thể đạt tới 4,5 đến 1 so với màu trắng. Cách khắc phục thông thường là làm tối màu khi sử dụng văn bản trong khi vẫn giữ phiên bản sáng hơn cho phần tô lớn, đây chính xác là điều mà hầu hết các hệ thống thiết kế thực hiện với màu chính của chúng.
Việc vượt qua tỷ lệ có đủ để có thể truy cập được không?
Nó là cần thiết nhưng chưa đủ. Văn bản rất lớn hoặc rất nhỏ, độ dày phông chữ mỏng, văn bản trên hình ảnh và một số dạng thiếu thị lực màu nhất định đều ảnh hưởng đến khả năng đọc vượt quá tỷ lệ. Hãy thử nghiệm với người dùng thực nếu có thể.
Hướng đi có quan trọng không, sáng trên tối hay tối trên sáng?
Không. Tỷ lệ này là đối xứng, nên đen trên trắng và trắng trên đen đều có tỷ lệ 21:1. Điều khác biệt trong thực tế là độ chói và trọng lượng cảm nhận được, đây là đánh giá về thiết kế chứ không phải là sự tuân thủ.
Những gì được coi là văn bản lớn?
Theo thuật ngữ WCAG, 18pt trở lên hoặc 14pt trở lên khi in đậm. Trong pixel CSS có kích thước khoảng 24px hoặc khoảng 18,66px khi in đậm.
Việc tính toán diễn ra ở đâu?
Hoàn toàn trong trình duyệt của bạn. Không có gì được tải lên, vì vậy bạn có thể kiểm tra màu sắc từ nguyên tắc thương hiệu chưa được công khai.