Công Cụ Kiểm Tra Khả Năng Tiếp Cận Màu Sắc
Nhập màu chữ và màu nền (mã hex) để kiểm tra tỷ lệ tương phản và sự tuân thủ WCAG.
Đây là văn bản đậm cỡ lớn.
Đây là văn bản kích thước thường.
21.00:1
Tỷ Lệ Tương Phản
Văn Bản Thường (AA)
Văn Bản Lớn (AA)
18pt+ or 14pt+ bold
Thành Phần Giao Diện (AA)
Buttons, form controls, etc.
Level AA (minimum required for accessibility compliance):
• Normal Text: Contrast ratio of at least 4.5:1
• Large Text: Contrast ratio of at least 3:1
• UI Components: Contrast ratio of at least 3:1
Level AAA (enhanced accessibility):
• Normal Text: Contrast ratio of at least 7:1
• Large Text: Contrast ratio of at least 4.5:1
Notes:
• "Large Text" is defined as 18pt or 14pt bold and above
• Logos and decorative elements have no minimum contrast requirement
• Text over images or gradients should be evaluated throughout the image
Cách sử dụng Công Cụ Kiểm Tra Khả Năng Tiếp Cận Màu Sắc
- 1
Nhập hai màu
Cung cấp màu chữ (foreground) và màu nền dưới dạng mã hex, ví dụ #1a1a1a và #ffffff.
- 2
Kiểm tra độ tương phản
Nhấn Check Accessibility để tính tỷ lệ tương phản giữa hai màu.
- 3
Xem kết quả WCAG
Xem các huy hiệu đạt hoặc không đạt cho AA và AAA ở mức chữ thường, chữ lớn và thành phần giao diện, đồng thời xem bản xem trước trực tiếp.
- 4
Điều chỉnh khi cần
Hoán đổi các màu hoặc tinh chỉnh giá trị hex cho đến khi tổ hợp đáp ứng mức WCAG mà dự án của bạn yêu cầu.
Tương phản màu WCAG, được giải thích rõ ràng
Tỷ lệ tương phản nghĩa là gì
Tương phản màu được biểu thị bằng một tỷ lệ giữa màu sáng hơn và màu tối hơn trong hai màu, chạy từ 1:1 đến 21:1. Tỷ lệ 1:1 nghĩa là hai màu giống hệt nhau, nên chữ sẽ hoàn toàn vô hình trên nền của nó, trong khi 21:1 là mức tối đa, độ tương phản giữa đen tuyền và trắng tinh. Mọi cặp màu khác đều nằm đâu đó ở khoảng giữa. Tỷ lệ này không nói về việc bạn dùng màu nào hay sắc độ của chúng khác nhau ra sao; nó thuần túy nói về chênh lệch độ sáng của chúng, đó là lý do hai màu trông khác biệt với bạn vẫn có thể không đạt.
Con số duy nhất này là xương sống của màu sắc dễ tiếp cận, bởi nó dự báo liệu chữ có dễ đọc cho phạm vi người và điều kiện rộng nhất hay không. Công cụ kiểm tra tính nó cho bất kỳ cặp màu chữ và màu nền nào bạn nhập và so sánh kết quả với các ngưỡng đã được công bố.
Các ngưỡng AA bạn buộc phải đạt
WCAG mức AA là ngưỡng mà hầu hết các trang web hướng tới và mà nhiều luật về khả năng tiếp cận cùng các quy định mua sắm tham chiếu, nên hãy coi nó là điểm xuất phát của bạn. AA yêu cầu tỷ lệ tương phản tối thiểu 4.5:1 cho chữ thân bài thông thường và tối thiểu 3:1 cho chữ lớn. Hai con số đó bao quát phần lớn các quyết định thiết kế hằng ngày, và các huy hiệu trong công cụ này cho bạn biết ngay lập tức liệu một cặp màu nhất định có vượt qua từng ngưỡng hay không.
Nếu một tổ hợp đạt AA cho cả chữ thường lẫn chữ lớn, bạn đã có một nền tảng vững chắc và có thể bảo vệ được. Nếu nó không đạt với chữ thường nhưng đạt với chữ lớn, bạn vẫn có thể dùng nó, nhưng chỉ ở các cỡ lớn, đây là một ràng buộc đáng được quyết định một cách có chủ đích thay vì phát hiện ra về sau.
AAA và chữ lớn nghĩa là gì
Mức AAA là bậc nâng cao, hướng tới khả năng đọc tối đa, và nó nâng yêu cầu lên 7:1 cho chữ thường và 4.5:1 cho chữ lớn. AAA không được kỳ vọng cho toàn bộ trang web và thường không thực tế đối với các bảng màu thương hiệu, nhưng nó là một mục tiêu đáng giá cho việc đọc nội dung dài, nội dung quan trọng, và đối tượng người dùng thị lực kém. Công cụ kiểm tra báo cáo AAA song song với AA để bạn thấy một cặp màu còn dư địa bao nhiêu.
Chữ lớn có một định nghĩa chính xác khiến nhiều người bất ngờ: nó nghĩa là khoảng từ 18pt trở lên, hoặc từ 14pt trở lên khi in đậm, tương đương khoảng 24px thường hoặc 18.66px in đậm. Lý do ngưỡng thấp hơn đơn giản là các nét chữ to hơn, đậm hơn vẫn dễ đọc ở mức tương phản thấp hơn. Bất cứ thứ gì nhỏ hơn ranh giới đó phải đạt tỷ lệ chữ thường nghiêm ngặt hơn, nên đừng cho rằng một tiêu đề trông to là đủ điều kiện mà không kiểm tra cỡ và độ đậm thực tế.
Tại sao tương phản lại quan trọng với người dùng thực
Tương phản đầy đủ không phải là một bài tập tick vào ô; nó quyết định liệu người thật có thể dùng được giao diện của bạn hay không. Những người dùng thị lực kém, vốn ngày càng phổ biến theo tuổi tác, phụ thuộc trực tiếp vào nó, và bất cứ ai đọc màn hình dưới ánh nắng chói, trên một màn hình tối hoặc rẻ tiền, hay khi mệt mỏi cũng vậy. Tương phản còn tương tác với chứng rối loạn nhận biết màu: vì tỷ lệ dựa trên độ sáng chứ không phải sắc độ, một cặp màu phụ thuộc vào khác biệt đỏ-với-xanh lá có thể sụp đổ với người không phân biệt được những sắc độ đó, trong khi một chênh lệch độ sáng mạnh vẫn đọc được.
Điểm cuối cùng đó kéo theo một hệ quả đáng nói thẳng: đừng bao giờ chỉ dựa vào màu sắc để truyền đạt ý nghĩa. Hãy kết hợp màu với chữ, biểu tượng, gạch chân, hoặc hình dạng để thông tin vẫn sống sót qua cả tương phản thấp lẫn chứng mù màu.
Cách tỷ lệ được tính toán
Phép toán đằng sau huy hiệu bắt đầu từ độ sáng tương đối (relative luminance), một thước đo về độ sáng mà mắt người cảm nhận ở mỗi màu. Nó không phải là một phép trung bình phẳng của các kênh đỏ, lục và lam, bởi mắt nhạy với lục hơn nhiều so với lam, nên lục được đánh trọng số nặng nhất còn lam nhẹ nhất. Mỗi kênh cũng được đưa qua một phép hiệu chỉnh gamma nhỏ trước để kết quả bám theo cảm nhận thay vì tín hiệu thô.
Một khi cả hai màu đã có một giá trị độ sáng, tỷ lệ tương phản là độ sáng của màu sáng hơn cộng một hằng số nhỏ, chia cho độ sáng của màu tối hơn cộng đúng hằng số đó. Hằng số này giữ cho công thức hoạt động ổn định khi gần với màu đen. Bạn không cần phải tính việc này bằng tay, nhưng biết rằng độ sáng, chứ không phải sắc độ, chi phối kết quả sẽ giải thích vì sao việc chỉ chọn những màu trông khác nhau là chưa đủ.
Tương phản phi-văn-bản và giao diện
Các quy tắc tương phản không chỉ giới hạn ở chữ. WCAG cũng đặt mức tối thiểu 3:1 cho các ranh giới hình ảnh của những thành phần tương tác và các đồ họa có ý nghĩa, thứ mà công cụ kiểm tra gắn cờ dưới mục thành phần giao diện. Điều đó bao gồm viền của một ô nhập liệu, đường bao của một nút, dấu tích bên trong một ô đánh dấu, các chỉ báo tiêu điểm, và những phần của một biểu tượng hay biểu đồ mà người dùng phải nhận ra để hiểu được nó. Một viền ô nhập liệu xám nhạt trên một thẻ trắng là một lỗi kinh điển của quy tắc này, ngay cả khi chữ nhãn bên trong vượt qua một cách dễ dàng.
Thiết kế các điều khiển để vượt mức 3:1 so với môi trường xung quanh nghĩa là người ta thật sự có thể tìm thấy và thao tác với chúng, chứ không chỉ đọc được những từ bên cạnh. Hãy kiểm tra các cạnh và các trạng thái của thành phần, không chỉ phần chữ của nó.
Những lỗi thường gặp và cách khắc phục
Vài kiểu lỗi thất bại hết lần này đến lần khác. Chữ giữ-chỗ hoặc chữ phụ màu xám nhạt trên nền trắng là phổ biến nhất; những giá trị như một màu xám trung tính gần #999999 trên nền trắng rơi xuống dưới 4.5:1 và cần được làm tối đi. Màu thương hiệu là một thủ phạm tái phạm khác, đặc biệt là các sắc xanh dương, xanh lá và cam tông trung tính dùng cho chữ thân bài hoặc cho chữ trắng trên một nút có màu, nơi cặp màu thường chỉ thiếu một chút là đạt AA. Các viền mỏng màu nhạt trên nền nhạt cũng thường xuyên trượt ngưỡng 3:1 của giao diện.
Các cách khắc phục thường nhỏ thôi. Làm tối màu chữ hoặc làm sáng màu nền cho đến khi tỷ lệ vượt qua lằn ranh, mà xét theo HSL thì thường nghĩa là điều chỉnh độ sáng một lượng vừa phải trong khi giữ nguyên sắc độ để thương hiệu vẫn nhận ra được. Đối với chữ trên một hình ảnh hay dải màu nhiều chi tiết, hãy thêm một lớp phủ đặc hoặc bán trong suốt phía sau nó để vùng tệ nhất vẫn đạt. Hãy nhập các màu thực của bạn vào đây, theo dõi tỷ lệ cùng các huy hiệu AA và AAA cập nhật, và nhích các giá trị cho đến khi mọi mức mà dự án của bạn yêu cầu chuyển sang màu xanh.
Câu hỏi thường gặp
Tỷ lệ tương phản là gì và mức nào được coi là tốt?
Khác biệt giữa AA và AAA là gì?
Tại sao chữ lớn đạt trong khi chữ thường không đạt?
Tôi nên nhập màu ở định dạng nào?
Công cụ có miễn phí không và nó có gửi màu của tôi đi đâu không?
Công cụ liên quan
Tiếp tục với những công cụ hữu ích này