Kiểm Tra Độ Tương Phản
Kiểm định độ tương phản màu chữ và nền theo chuẩn WCAG.
Tự động đề xuất màu lọt top an toàn và cấp giấy chứng nhận vinh danh.
🔤 Màu Chữ (Text)
🎨 Màu Nền (Background)
Đây là bản xem trước cỡ chữ bình thường (16px)
Đây là chữ in đậm (16px bold)
Đây là cỡ chữ lớn (24px)
Đây là cỡ chữ lớn in đậm (18px bold)
Tỷ Lệ Tương Phản
12.63 : 1
Cấp AA: Chữ Bình Thường
≥ 4.5:1
Cấp AA: Chữ Cỡ Lớn
≥ 3:1
Cấp AAA: Chữ Bình Thường
≥ 7:1
Cấp AAA: Chữ Cỡ Lớn
≥ 4.5:1
💡 Cứu bồ: Màu đề xuất để vượt qua ranh giới AA:
Giữ nguyên nền, đổi màu chữ thành:
Giữ nguyên chữ, đổi màu nền thành:
🏆 Chứng Nhận Đạt Chuẩn WCAG AA
* Khi nhấn 'Chia sẻ lên 𝕏', hệ thống cũng sẽ tự động lưu chứng nhận về máy.
📋 Mã CSS Của Bạn
Giới thiệu
Chỉ một thao tác đơn giản, công cụ miễn phí này sẽ xét duyệt ngay tắp lự liệu cặp màu bạn vừa chọn cho Website hay App có đáp ứng tiêu chuẩn tiếp cận WCAG 2.1 hay không. Việc chọn màu có độ tương phản quá kém sẽ khiến những người khiếm thị hay suy giảm thị lực vật vã khi phải căng mắt ra đọc chữ của bạn.
Tuyệt vời hơn, khi phát hiện bộ màu của bạn bị rớt đài, công cụ sẽ tự động xắn tay áo tìm ra một màu sắc khác vượt ải với độ sai lệch thấp nhất. Nhờ vậy, bạn tha hồ cải thiện khả năng đọc cho website mà không sợ phá vỡ kết cấu thiết kế đã dày công nhào nặn.
Sau khi chễm chệ vượt qua chuẩn AA, bạn có thể tải về Giấy Chứng Nhận Đạt Chuẩn WCAG AA chính quy để đi khoe với bạn bè hay làm bằng chứng trước khách hàng.
Cách sử dụng
Cung Cấp Màu
Chấm vào ô chọn màu hoặc điền trực tiếp mã HEX/RGB cho cả Màu chữ lẫn Màu nền.
Soi Kết Quả
Tỷ lệ tương phản cùng phán quyết Đậu/Rớt dựa trên thang đo WCAG AA/AAA sẽ nhảy lên ngay tức thì cùng khung xem trước thực tế.
Thu Thập Giấy Khen
Nếu may mắn chạm ngưỡng AA, bạn sẽ được phép rinh về một tấm Giấy Chứng Nhận oai phong lẫm liệt để dễ dàng chia sẻ muôn nơi.
Thuật ngữ
- Tỷ Lệ Tương Phản (Contrast Ratio)
- Một con số toán học phơi bày sự chênh lệch ánh sáng giữa màu chủ thể (foreground) và màu làm nền. Thang đo bắt đầu từ 1:1 (tàng hình) và kéo lên tận 21:1 (chữ đen trên nền trắng toát).
- WCAG (Web Content Accessibility Guidelines)
- Bản hiến pháp quốc tế do tổ chức W3C biên soạn, ấn định các nguyên tắc để đưa nội dung web đến với nhiều người hơn, kể cả những người mang khiếm khuyết. Nhiều chính phủ trên thế giới đã lấy đây làm thước đo luật pháp bắt buộc phải tuân theo.
- Cấp Độ AA (AA Standard)
- Mục tiêu quốc dân được hướng đến nhiều nhất. Nó yêu cầu chữ thường phải đạt mốc 4.5:1, trong khi chữ bự (18pt+) thì châm chước ở mức 3:1. Đây cũng là giới hạn pháp lý cơ bản của phần lớn các hệ thống website cho doanh nghiệp.
- Cấp Độ AAA (AAA Standard)
- Nấc thang khắc nghiệt nhất của WCAG dành riêng cho các hệ thống có yêu cầu tiếp cận đặc thù. Nó đòi hỏi chữ thường phải cán mốc 7:1 và chữ lớn là 4.5:1. Tiêu chuẩn này nhiều lúc ép các Designer phải gạt nước mắt hy sinh tính thẩm mỹ.
- Độ Sáng Tương Đối (Relative Luminance)
- Là thông số độ sáng của một điểm ảnh trong không gian màu. Nó khai thác một công thức toán học gamma để điều chỉnh cho khớp với khả năng cảm nhận ánh sáng của mắt người, chấm điểm các màu theo thang từ 0 đến 1.
- Tính Tiếp Cận (Accessibility - a11y)
- Tâm huyết kiến tạo nên những môi trường có khả năng sử dụng mượt mà đối với cả những người gặp bất lợi, bao gồm khiếm khuyết tầm nhìn, rào cản nhận thức, hay đơn giản là sự suy giảm năng lực do tuổi tác già yếu.
FAQ
- Q.Tỷ lệ tương phản bao nhiêu là đủ xài cho văn bản trên web?
- Theo tiêu chuẩn WCAG cấp độ AA, chữ viết bình thường cần độ tương phản tối thiểu là 4.5:1. Tuy nhiên, nếu là chữ cỡ bự (thường từ 18pt trở lên hoặc 14pt in đậm) thì chỉ cần đạt 3:1 là qua môn.
- Q.Công cụ này có dùng mô phỏng mù màu luôn không?
- Dạ không, phiên bản này chỉ cắm đầu vào việc xác minh toán học của tỷ lệ độ tương phản ánh sáng. Bạn vui lòng sử dụng thêm các phần mềm mô phỏng mù màu chuyên dụng khác để kết hợp chung với công cụ này nhé.
- Q.Thuật toán ở đây tính toán tỷ lệ kiểu gì?
- Nó áp dụng y chang công thức khuyến nghị của WCAG. Cụ thể là đo Độ sáng Tương đối (Relative Luminance) của cả hai màu rồi lôi ra cân đo đong đếm dựa trên thang tỷ lệ (L1 + 0.05) / (L2 + 0.05).
- Q.Mình nên cắm chốt ở tiêu chuẩn AA hay cày luôn AAA?
- Quy chuẩn chung của thế giới và yêu cầu pháp lý cho phần lớn các doanh nghiệp thương mại là cấp độ AA. Cấp độ AAA cực kỳ khắt khe, thường chỉ bắt buộc áp dụng đối với các cổng thông tin chính phủ đặc thù hoặc các nền tảng chuyên biệt cho người khuyết tật.
- Q.Mã màu thương hiệu công ty tôi nhập vào đây có bị tung lên máy chủ đám mây không?
- Tuyệt đối không. Mọi bài phân tích màu sắc và quá trình rèn đúc giấy chứng nhận đều diễn ra nội bộ ngay trong bộ nhớ trình duyệt máy bạn, bảo mật tuyệt đối thông tin tuyệt mật của công ty.
- Q.Mình nhập màu bằng các định dạng khác thay vì mã HEX được không?
- Được chứ, ngoài định dạng HEX (ví dụ như #ffffff), bạn có thể click vào bảng chọn màu trực quan hoặc gõ thẳng các giá trị tọa độ RGB.
- Q.Giấy chứng nhận tải về từ đây có giá trị pháp lý không?
- Nó là một bằng chứng toán học đáng tin cậy xác nhận bộ màu của bạn đã qua được công thức của W3C. Tuy nhiên, nó không thể thay thế hoàn toàn cho một bài kiểm toán toàn diện về Tính Tiếp Cận (Accessibility) từ một bên thứ ba chuyên nghiệp.
Trường hợp
Nghiệm Thu Giao Diện Web
Rà soát lại độ chênh màu khi đang vẽ Landing page hoặc Website doanh nghiệp để kịp thời đạt chứng nhận WCAG.
Duyệt UI App Mobile
Đo lường chữ viết trên các nút bấm và nhãn mác xem những người mắt kém có căng mắt ra đọc được hay không.
Kiểm Toán Tuân Thủ Tiếp Cận
Lên đài mổ xẻ website để tìm ra các lỗi vi phạm tương phản nhằm đáp ứng quy chuẩn ADA, EN 301 549, hay quy định WCAG toàn cầu.
Báo Cáo Thuyết Trình
Đảm bảo chắc nịch rằng mọi hàng chữ trên slide chiếu PowerPoint hay các tài liệu báo cáo đều nằm trong giới hạn đọc hiểu của khán giả bên dưới hội trường.
Gửi phản hồi
Vui lòng cho chúng tôi biết suy nghĩ của bạn để giúp chúng tôi cải thiện công cụ.
Feedback is temporarily suspended
The server is busy or spam protection is active. Please try again later.