Dễ đọc ngay từ thiết kế

Xem trước cặp màu trong một đoạn văn bản thực tế.

Tỷ lệ tương phản

17.32:1

Chữ thường AA

Đạt

Chữ thường AAA

Đạt

Chữ lớn AA

Đạt

Chữ lớn AAA

Đạt

Thành phần UI AA

Đạt

Kiểm tra độ tương phản màu

Kiểm tra độ tương phản màu WCAG và chuyển đổi màu giữa HEX, RGB và HSL.

Cách kiểm tra tương phản

Nhập hai màu, xem kết quả WCAG rồi sao chép giá trị đã chuyển đổi.

Cách kiểm tra tương phản

Tỷ lệ tương phản được tính như thế nào?

Tỷ lệ này so sánh độ chói tương đối của màu nền trước và màu nền sau bằng công thức tương phản WCAG. Thang tỷ lệ chạy từ 1:1 cho độ sáng giống hệt nhau đến 21:1 cho sự khác biệt đen trắng mạnh nhất. Phép tính sử dụng các giá trị màu đã nhập nên không tự động tính đến độ trong suốt, độ chuyển màu, hình nền, bóng, khử răng cưa, điều kiện hiển thị hoặc màu khác được hiển thị ở trạng thái tương tác. Kiểm tra màu sắc được hiển thị thực tế cho các trạng thái bình thường, di chuột, tiêu điểm, hoạt động, vô hiệu hóa và truy cập khi chúng khác nhau.

Kết quả tương phản WCAG AA và AAA có ý nghĩa gì?

Đối với văn bản thông thường, WCAG AA sử dụng tỷ lệ tối thiểu là 4,5:1 và AAA sử dụng 7:1. Văn bản lớn sử dụng ngưỡng thấp hơn vì các ký tự lớn hơn, đủ đậm sẽ dễ phân biệt hơn: 3:1 đối với AA và 4,5:1 đối với AAA. Việc văn bản có đủ điều kiện là lớn hay không phụ thuộc vào kích thước và trọng lượng được hiển thị của nó, không chỉ nhãn thiết kế. Do đó, một cặp có thể đạt tiêu đề lớn và không đạt đối với nội dung văn bản. Kiểm tra yêu cầu phù hợp với kiểu chữ thực và mục tiêu tuân thủ.

Các biểu tượng, nút điều khiển và chỉ báo tiêu điểm có cần kiểm tra độ tương phản không?

Đúng. Độ tương phản của văn bản chỉ là một phần của khả năng tiếp cận màu sắc. Thông tin trực quan cần thiết để xác định các điều khiển giao diện người dùng, trạng thái thành phần, đối tượng đồ họa và chỉ báo tiêu điểm bàn phím thường cần độ tương phản ít nhất 3:1 so với các màu liền kề theo hướng dẫn tương phản phi văn bản WCAG. Các yếu tố trang trí và điều khiển không hoạt động có những cân nhắc khác nhau. Kiểm tra đường viền, biểu tượng, biểu đồ, trạng thái đã chọn, thông báo xác thực và đường viền tiêu điểm trong ngữ cảnh. Một cặp văn bản đi qua AA không chứng minh được rằng mọi phần tử tương tác hoặc đồ họa trên cùng một màn hình đều có thể truy cập được.

Tôi nên kiểm tra độ trong suốt, độ dốc và nền hình ảnh bằng cách nào?

Nhập màu nền trước và màu nền hiệu quả tại điểm xuất hiện văn bản hoặc đồ họa thiết yếu. Các lớp bán trong suốt hòa trộn với những gì phía sau chúng và độ chuyển màu hoặc ảnh tạo ra các tỷ lệ tương phản khác nhau trên cùng một phần tử. Lấy mẫu khu vực có liên quan yếu nhất, sau đó kiểm tra các vị trí có khả năng khác và các loại cây trồng thích ứng. Nếu độ tương phản phụ thuộc vào bóng, đường viền hoặc lớp phủ, hãy đưa hiệu ứng được hiển thị thực tế vào phần xem xét thủ công. Ưu tiên lớp nền vững chắc ổn định phía sau văn bản quan trọng khi hình ảnh bên dưới có thể thay đổi.

Việc vượt qua trình kiểm tra độ tương phản có đảm bảo một thiết kế có thể truy cập được không?

Không. Độ tương phản là một yêu cầu có thể đo lường được. Thiết kế có thể truy cập cũng cần loại có thể đọc được, khoảng cách vừa đủ, cấu trúc ngữ nghĩa, nhãn, thao tác bàn phím, tiêu điểm hiển thị, các lựa chọn thay thế có ý nghĩa, thu phóng và chỉnh lại dòng có thể sử dụng, chuyển động được kiểm soát và hướng dẫn không chỉ phụ thuộc vào màu sắc. Các cặp màu có thể vượt qua về mặt toán học trong khi vẫn gặp khó khăn ở phông chữ mỏng, kích thước nhỏ, độ chói, sự khác biệt về khả năng nhìn màu hoặc bố cục dày đặc. Sử dụng kết quả này làm một lần kiểm tra trong một đánh giá rộng hơn và kiểm tra giao diện thực tế với nội dung và trạng thái đại diện.