design
Công cụ bảng màu trợ năng: Vì sao hầu hết bảng màu thất bại trước khi bạn tung ra
83.6% trang chủ không đạt tiêu chuẩn tương phản. Cách chọn công cụ kiểm chứng bảng màu trợ năng, tránh sai lầm phổ biến và kiểm tra đúng tổ hợp màu.
Published 2026-06-03 · 9 min read
Affiliate disclosure
Some links below are affiliate links. I may earn a commission from qualifying purchases at no extra cost to you. I only recommend tools I have used or tested.
TL;DR
- 83.6% trang chủ không đạt độ tương phản. Hầu hết thất bại không phải vì các nhà thiết kế bất cẩn, mà vì các công cụ không bắt buộc tiêu chuẩn này ngay từ đầu.
- 4.5:1 là ngưỡng tối thiểu đối với chữ nền thông thường. Chữ lớn và các thành phần UI cần đạt 3:1. Không có cách lách chuẩn mực nào cho vấn đề này cả.
- Bệnh mù màu đỏ-xanh lục ảnh hưởng đến khoảng 1 trên 12 nam giới. Việc chỉ kiểm tra một loại bệnh mù màu sẽ bỏ sót những lỗi thực tế.
- Hãy chọn công cụ dựa trên những gì nó kiểm tra, không phải dựa trên những gì nó tạo ra. Một trình tạo bảng màu đơn thuần là vô nghĩa nếu không có bước xác minh độ tương phản.
- Chỉ dùng màu sắc thì sẽ không bao giờ hiệu quả. Tiêu chuẩn SC 1.4.1 cấm điều này. Hãy kết hợp mọi tín hiệu màu sắc với một biểu tượng, nhãn văn bản hoặc đường viền.
Tại sao bảng màu thất bại trước khi bạn tung ra sản phẩm
Tôi đã kiểm toán bảng màu tại năm công ty trong năm qua. Luôn có một quy luật chung: bảng màu trông rất ổn trên bản nháp. Nhưng ứng dụng khi tung ra lại không đạt tiêu chuẩn trên giao diện thực tế. Khoảng cách này là có thật và hoàn toàn có thể ngăn chặn được.
Lỗi thường đến từ ba nguyên nhân.
1. Kiểm tra rời rạc. Một công cụ báo cáo "màu xanh lục-700 đạt tỷ lệ 4.7:1 trên nền trắng." Tuyệt vời. Nhưng ứng dụng của bạn lại đặt màu xanh lục đó lên một hộp thoại (modal) màu xám nhạt. Bây giờ tỷ lệ chỉ còn là 2.3:1. Và bạn chưa từng kiểm tra điều đó. Công cụ chỉ tạo ra màu; nó không xác minh các màu đó trên các nền thực tế mà bạn sử dụng.
2. Kiểm tra mù màu không đầy đủ. Mọi người thường chỉ kiểm tra màu đỏ-xanh lục (loại phổ biến nhất). Ít người kiểm tra màu xanh dương-vàng. Và gần như không ai kiểm tra chứng mù màu toàn sắc (đen trắng). Một màu sắc trông rất khác biệt với đa số người dùng có thể trở nên vô hình đối với những người mắc chứng mù màu xanh vàng (tritan vision).
3. Quy tắc "chỉ dùng mỗi màu". Một trường biểu mẫu chỉ được đánh dấu bằng chữ màu đỏ sẽ thất bại tiêu chuẩn SC 1.4.1 đối với người mù màu, ngay cả khi tỷ lệ tương phản của màu đỏ đó là 7:1. Tỷ lệ thì ổn. Nhưng thiết kế vẫn lỗi. Không có công cụ nào bắt được lỗi này vì nó không phải là vấn đề về tỷ lệ—đó là một quyết định thiết kế.
Nguyên nhân gốc rễ: các công cụ tạo bảng màu thường chỉ tối ưu hóa cho một thứ (nền trắng) và để bạn mặc định như vậy là đủ. Nhưng thực tế là không đủ.
Ba quy tắc cần nhớ
Tiêu chuẩn SC 1.4.3 (Tỷ lệ Tối thiểu) quy định:
| Loại văn bản | AA (tối thiểu) | AAA (khuyến nghị) |
|---|---|---|
| Chữ nền thông thường (dưới 18pt) | 4.5:1 | 7:1 |
| Chữ lớn (từ 18pt trở lên) | 3:1 | 4.5:1 |
| Thành phần UI, biểu tượng, viền tiêu điểm (focus rings) | 3:1 | — |
Thứ hai: SC 1.4.1 cấm việc chỉ sử dụng màu sắc làm tín hiệu duy nhất. Một trường báo lỗi màu đỏ cần có thêm biểu tượng hoặc nhãn. Một dấu tích màu xanh lục cần một ký hiệu đi kèm.
Thứ ba: kiểm tra mọi tổ hợp màu. Một màu đạt tỷ lệ 4.5:1 trên nền trắng có thể thất bại trên nền xám. Công cụ kiểm tra không thể tự biết được giao diện thực tế của bạn trông như thế nào.
Tại sao mô phỏng mù màu lại quan trọng
Khoảng 300 triệu người trên toàn thế giới mắc chứng thiếu khả năng nhận thức màu sắc. Khoảng 8% nam giới và 0.5% nữ giới bị mù màu đỏ-xanh lục. Tương đương với khoảng 1 trên 12 nam giới. Bệnh mù màu xanh dương-vàng (tritanopia) và mù màu toàn sắc (achromatopsia) hiếm hơn nhưng vẫn tồn tại và rất đáng để kiểm tra.
Đây là cạm bẫy: nếu công cụ của bạn chỉ mô phỏng mù màu đỏ-xanh lục, bạn sẽ nghĩ mọi thứ vẫn ổn. Không hề. Bạn chỉ đang kiểm tra một loại trong số nhiều loại chứng bệnh. Bỏ qua tritanopia hoặc achromatopsia đồng nghĩa với việc bạn đang tung ra sản phẩm lỗi dành cho những người dùng này.
Hầu hết các công cụ tạo bảng màu không hề mô phỏng bất kỳ loại mù màu nào. Một số công cụ (như Leonardo, Who Can Use) có thể mô phỏng nhiều loại. Nếu bạn không kiểm tra, đồng nghĩa với việc bạn đang tung ra một bảng màu có những điểm mù.
Các công cụ: mỗi công cụ thực sự làm được những gì
| Công cụ | Miễn phí? | Kiểm tra tỷ lệ | Mô phỏng CVD | Tạo bảng màu? | Xuất token | API |
|---|---|---|---|---|---|---|
| WebAIM Contrast Checker | Có | Có (AA/AAA) | Không | Không | — | Có |
| Leonardo (Adobe) | Có | Có (WCAG 2.x) | Có (8 loại) | Có (ưu tiên tương phản) | Có | Có |
| Coolors | Freemium | Có (hạn chế) | Không | Có (dựa trên quy tắc) | Có | Không |
| Adobe Color | Có | Không | Không | Có (quy tắc hòa hợp) | Có | Có |
| Who Can Use | Có | Có (có bản xem trước) | Có (3 loại + mô phỏng) | Không | — | Không |
| Stark (Figma) | Trả phí | Có (trong bản thiết kế) | Có (8 loại) | Không | — | Không |
Nếu công cụ của bạn không làm được cả mô phỏng CVD lẫn kiểm tra tỷ lệ, thì nó chưa hoàn thiện. Hầu hết các công cụ đều bỏ sót một trong hai.
Những công cụ thực sự đáng để sử dụng
WebAIM Contrast Checker là công cụ nền tảng của bạn. Nhập hai màu và nhận được tỷ lệ cũng như kết quả đạt/lỗi của tiêu chuẩn AA/AAA. Không cần đăng nhập. Không rườm rà. Miễn phí tại webaim.org/resources/contrastchecker/. Có sẵn API để tự động hóa việc kiểm tra trong hệ thống CI/CD nếu bạn muốn phát hiện lỗi trước khi đưa lên môi trường thực tế.
Leonardo (của Adobe, miễn phí) là công cụ thiết kế. Thay vì tự chọn các mã hex và hy vọng chúng hoạt động, bạn chỉ cần đặt tỷ lệ mục tiêu (4.5:1, 3:1, v.v.) và Leonardo sẽ tạo ra các mẫu màu. Cách tiếp cận này thay đổi tư duy: "làm sao để dễ đọc" thay vì "làm sao để giống mã hex này." Tích hợp mô phỏng CVD sẵn cho 8 loại bệnh. Có thể xuất sang CSS/Tailwind/Figma. Nếu bạn đang xây dựng một hệ thống thiết kế (design system), Leonardo sẽ giúp bạn không bị nhắm mắt chọn màu rời rạc.
Who Can Use có một điểm khác biệt. Thay vì đo lường tỷ lệ, công cụ này xem trước bảng màu của bạn giống hệt như cách mà những người dùng có các loại thị lực khác nhau nhìn thấy. Nhập các màu của bạn, xem các bản hiển thị cạnh nhau của protanopia, deuteranopia, tritanopia và thang đen trắng. Miễn phí tại whocanuse.com. Đơn giản hơn Leonardo. Bạn chỉ cần nhìn để biết các màu sắc có thể phân biệt được hay không.
Coolors tạo ra các bảng màu đẹp mắt bằng cách sử dụng các quy tắc hòa hợp (bổ sung, tương tự, tam giác). Rất hữu ích để lấy ý tưởng khi bạn đang nhìn chằm chằm vào một màn hình trống. Nhưng nó không kiểm tra độ tương phản. Hãy sử dụng nó để lấy ý tưởng ban đầu, sau đó xác minh từng mẫu màu trên WebAIM trước khi gọi tên chúng là xong.
Những sai lầm phổ biến cần tránh
1. Chỉ kiểm tra mù màu đỏ-xanh lục. Hầu hết các công cụ và trình mô phỏng bảng màu đều tập trung vào chứng protanopia và deuteranopia (mù màu đỏ-xanh lục). Tritanopia (xanh dương-vàng) và achromatopsia (toàn sắc) thì hiếm hơn nhưng vẫn tồn tại. Nếu thương hiệu của bạn sử dụng màu đỏ và xanh dương, bạn có thể thất bại hoàn toàn trước những người mắc chứng tritanopia mà không hề hay biết cho đến khi chạy bảng màu qua Who Can Use.
2. Phong cách "thanh lịch" xám trên xám. Màu Slate-400 trên nền trắng trông rất tinh tế và chuyên nghiệp. Nhưng nó không đạt tiêu chuẩn WCAG AA (độ tương phản 3.1:1; trong khi bạn cần 4.5:1). Văn bản phụ của bạn bây giờ trở nên không thể đọc đối với bất kỳ ai có thị lực kém. Sự thanh lịch là một xa xỉ phẩm mà chỉ những giao diện có độ tương phản cao mới có thể tiêu thụ. Hãy đưa ra quyết định khó khăn này ngay từ đầu.
3. Cho rằng kết quả từ trình tạo đã hoàn thiện. Coolors sẽ cung cấp cho bạn sáu mẫu màu hòa hợp. Khả năng cao là không một mẫu nào trong số đó đạt tỷ lệ tương phản 4.5:1 trên các màu nền thực tế của bạn. Việc tạo ra màu và xác minh màu là hai vấn đề hoàn toàn khác. Quy trình làm việc chuẩn: tạo màu bằng Coolors để lấy cảm hứng, xác minh từng mẫu một bằng trình kiểm tra độ tương phản của WebAIM.
4. Chỉ dùng mỗi màu làm chỉ báo trạng thái. Trường màu đỏ báo lỗi, trường màu xanh lục báo thành công, trường màu hổ phách cảnh báo. Đối với người mù màu, họ chỉ thấy ba trường giống hệt nhau. Tiêu chuẩn WCAG 1.4.1 cấm việc sử dụng màu sắc làm chỉ báo duy nhất. Hãy kết hợp mọi tín hiệu màu sắc với một tín hiệu thứ cấp: một biểu tượng, một nhãn, độ dày của đường viền hoặc một hoa văn. Chỉ mất hai phút làm việc. Giải quyết triệt để vấn đề cho cả người mù màu lẫn người khiếm thị.
5. Chỉ kiểm tra các cặp màu "được khuyến nghị". Tài liệu thiết kế của bạn ghi "sử dụng màu xanh lục-700 trên nền trắng." Một nhà thiết kế lại dùng màu xanh lục-600 trên hộp thoại (modal) xám nhạt của bạn vì họ nghĩ nó trông đẹp hơn. Sự kết hợp đó chưa bao giờ được kiểm tra. Độ tương phản có thể chỉ là 2:1. Hãy kiểm toán mọi tổ hợp màu hợp lý trong giao diện thực tế của bạn, thay vì chỉ kiểm tra những thứ có trong tài liệu hướng dẫn thiết kế.
Quy trình thực tế dành cho bạn
Bắt đầu với Leonardo nếu bạn đang xây dựng một hệ thống thiết kế. Xác định màu thương hiệu chính của bạn. Đặt ra các tỷ lệ mục tiêu rõ ràng: 4.5:1 cho chữ nền thông thường, 3:1 cho các thành phần phụ và thành phần UI. Để Leonardo tạo ra các sắc độ biến thể. Bạn sẽ có một bảng màu vượt qua tiêu chuẩn WCAG AA trước cả khi bạn viết CSS. Đây là sự chuyển biến quan trọng: thay vì chọn màu và hy vọng, bạn thiết kế với các ràng buộc về trợ năng ngay từ đầu.
Xác minh mọi tổ hợp màu bằng WebAIM. Leonardo cung cấp cho bạn một khởi đầu tốt, nhưng bạn vẫn cần phải kiểm tra. Đối với mỗi màu bạn sẽ sử dụng, hãy kiểm tra nó trên mọi màu nền mà nó xuất hiện. Trắng, xám nhạt, xám đậm, màu thương hiệu của bạn. Trình kiểm tra độ tương phản màu chỉ mất vài giây cho mỗi cặp. Lấy mẫu các giá trị pixel từ các ảnh chụp màn hình để có tỷ lệ thực tế. Năm phút làm việc sẽ loại bỏ chín mươi phần trăm các lỗi tung ra cho người dùng.
Xem trước thông qua các loại thị lực khác nhau. Chạy bảng màu của bạn qua Who Can Use. Nhìn kỹ vào các phiên bản tritanopia, deuteranopia và achromatopsia. Bạn vẫn có thể phân biệt được các chỉ báo trạng thái chứ? Bạn vẫn có thể đọc được chữ phụ không? Nếu một màu biến mất trong chế độ đơn sắc (đen trắng), hãy điều chỉnh nó ngay bây giờ.
Kết hợp mọi tín hiệu màu sắc với một yếu tố khác. Trường báo lỗi màu đỏ nhận thêm biểu tượng ✗. Thành công màu xanh lục có thêm ✓. Cảnh báo màu hổ phách có thêm ⚠. Không phải vì màu sắc tồi tệ, mà vì tiêu chuẩn WCAG 1.4.1 yêu cầu như vậy. Người mù màu cần nhiều hơn là màu sắc để có thể hiểu được giao diện của bạn.
Quy trình này chỉ mất một buổi chiều. Trong khi việc tung ra một bảng màu không trợ năng sẽ tiêu tốn hàng tháng trời để sửa lại khi kiểm toán thất bại hoặc khách hàng khiếu nại.
Tóm lại: Trợ năng màu sắc là một ràng buộc trong thiết kế, không phải là một tác vụ đánh bóng sau cùng. Hãy đưa nó vào ngay từ ngày đầu tiên, thay vì chỉ kiểm tra tuân thủ vào phút chót.
Nguồn
- W3C: SC 1.4.3: Contrast (Minimum)
- W3C: SC 1.4.1: Use of Color
- WebAIM: Contrast and Color Accessibility
- Colour Blind Awareness: Color Blindness Statistics
- WebAIM: Contrast Checker
- Leonardo: Color System Generator
