Độ tương phản màu dễ tiếp cận: Hướng dẫn WCAG giải thích cho nhà thiết kế

2026-07-19· Thẻ: accessibility, wcag, color-contrast, web-design, a11y, inclusive-design

Độ tương phản màu dễ tiếp cận: Hướng dẫn WCAG giải thích

Độ tương phản màu là một trong những khía cạnh quan trọng nhất của khả năng truy cập web. Nó ảnh hưởng trực tiếp đến việc người dùng có thể đọc nội dung của bạn, điều hướng giao diện của bạn và hoàn thành nhiệm vụ của họ hay không. Tuy vậy, các lỗi về độ tương phản vẫn nằm trong số những vấn đề khả năng truy cập phổ biến nhất trên web — thường là vì nhà thiết kế chọn màu trông đẹp trên màn hình của chính họ mà không xác minh tỷ lệ.

Hướng dẫn này giải thích mọi điều bạn cần biết về yêu cầu độ tương phản màu WCAG, cách đáp ứng chúng và cách thiết kế các giao diện dễ tiếp cận mà không hy sinh chất lượng thị giác.

Tỷ lệ độ tương phản màu là gì?

Độ tương phản màu là thước đo sự khác biệt về độ chói cảm nhận (perceived luminance) giữa hai màu — thường là tiền cảnh (chữ) và hậu cảnh. Độ tương phản được biểu thị dưới dạng tỷ lệ từ 1:1 (màu giống hệt nhau, chữ vô hình) đến 21:1 (chữ đen trên nền trắng, mức tối đa có thể).

Tỷ lệ tương phản được tính bằng độ chói tương đối (relative luminance), yếu tố này tính đến cách mắt người cảm nhận các bước sóng ánh sáng khác nhau. Công thức là:

Contrast Ratio = (L1 + 0.05) / (L2 + 0.05)

Trong đó L1 là độ chói tương đối của màu sáng hơn và L2 là độ chói tương đối của màu tối hơn. Mắt người nhạy cảm với ánh sáng xanh lục hơn đỏ hoặc lam, vì vậy phép tính độ chói định trọng số các kênh khác nhau.

Bạn không cần phải tự tính toán điều này. Mọi công cụ kiểm tra độ tương phản, bao gồm cả công cụ chuyển đổi màu của chúng tôi, đều thực hiện điều đó ngay lập tức.

Yêu cầu độ tương phản của WCAG

Web Content Accessibility Guidelines (WCAG) định nghĩa ba mức tuân thủ: A, AA và AAA. Các yêu cầu về độ tương phản màu áp dụng ở mức AA và AAA.

Mức WCAG AA (Mức tối thiểu được khuyến nghị)

AA là tiêu chuẩn tối thiểu cho hầu hết các trang web và được yêu cầu theo luật ở nhiều khu vực pháp lý (bao gồm Đạo luật Khả năng Truy cập Châu Âu và các quy định về khả năng truy cập ở Mỹ, Canada và Úc).

| Loại văn bản | Tỷ lệ tối thiểu | Ví dụ Xám tuân thủ trên nền trắng | |---------------|--------------|-------------------------------------| | Chữ thường (dưới 18px / 14px đậm) | 4.5:1 | #767676 trên nền trắng | | Chữ lớn (18px+ đậm hoặc 24px+ thường) | 3:1 | #9A9A9A trên nền trắng | | Thành phần UI (viền, biểu tượng, trường biểu mẫu) | 3:1 | Viền thành phần, chỉ báo tiêu điểm | | Đồ họa không trang trí | 3:1 | Biểu đồ, infographic, biểu tượng |

Mức WCAG AAA (Nâng cao)

AAA là tiêu chuẩn cao hơn mang lại khả năng đọc tốt hơn, đặc biệt cho người dùng có thị lực kém hoặc các vấn đề về độ nhạy tương phản.

| Loại văn bản | Tỷ lệ tối thiểu | Ví dụ Xám tuân thủ trên nền trắng | |---------------|--------------|-------------------------------------| | Chữ thường | 7:1 | #595959 trên nền trắng | | Chữ lớn | 4.5:1 | #777777 trên nền trắng |

AAA không bắt buộc để tuân thủ hầu hết các quy định, nhưng nó được khuyến nghị cho các trang web phục vụ người cao tuổi hoặc người dùng khiếm thị.

Các yêu cầu này bao phủ những gì

Các yêu cầu về độ tương phản của WCAG áp dụng cho:

Chữ — Tất cả chữ nội dung, tiêu đề, nhãn, chú thích và chữ liên kết
Chữ trong hình ảnh — Chữ là một phần của hình ảnh (trừ chữ trang trí)
Thành phần UI — Nút, trường biểu mẫu, thanh trượt, công tắc bật-tắt và viền của chúng
Biểu tượng — Các biểu tượng thiết yếu truyền tải thông tin (không trang trí)
Chỉ báo tiêu điểm — Đường viền tiêu điểm bàn phím phải có độ tương phản 3:1 với nền liền kề

Các yêu cầu này KHÔNG bao phủ

Logo — Chữ là một phần của logo thương hiệu hoặc tên công ty
Yếu tố trang trí — Hình ảnh chỉ để trang trí, không có mục đích chức năng
UI không hoạt động — Nút hoặc điều khiển biểu mẫu bị vô hiệu hóa (dù chúng vẫn phải nhận biết được)
Chữ cảm giác — Chữ là một phần của hình nền mà chữ không thực sự cần thiết

Các lỗi tương phản phổ biến và cách khắc phục

1. Chữ Xám Nhạt

Chữ xám nhạt trên nền trắng là lỗi tương phản phổ biến nhất. Một tông màu như #CCCCCC trên nền trắng có tỷ lệ tương phản chỉ 1.6:1 — thấp hơn nhiều so với mức tối thiểu 4.5:1.

Khắc phục: Làm đậm chữ xám của bạn. Đối với chữ nội dung trên nền trắng, hãy hướng đến ít nhất #595959 (tuân thủ AAA). Ngay cả #767676 (mức AA tối thiểu cho chữ 14px) cũng tối rõ rệt so với hầu hết các lựa chọn xám "nhẹ nhàng".

2. Màu Thương Hiệu Dùng Cho Chữ Nội Dung

Màu thương hiệu thường quá nhạt khi dùng làm chữ. Một màu xanh lam trung bình như #3366CC trên nền trắng có tỷ lệ khoảng 3.5:1 — dưới tiêu chuẩn 4.5:1.

Khắc phục: Dành màu thương hiệu cho tiêu đề và điểm nhấn. Dùng màu gần đen (#1A1A1A đến #333333) cho chữ nội dung. Kiểm tra rằng mọi chữ có màu đều đạt tỷ lệ yêu cầu.

3. Chỉ Báo Liên Kết Bằng Màu Đơn Thuần

Các liên kết chỉ khác chữ nội dung về màu sắc sẽ thất bại Tiêu chí Thành công 1.4.1 của WCAG (Sử dụng Màu sắc). Người dùng mù màu có thể không nhận ra sự khác biệt.

Khắc phục: Luôn cung cấp một chỉ báo không dùng màu cho liên kết. Các cách tiếp cận phổ biến:

Gạch chân liên kết (giải pháp mạnh mẽ nhất)
Thêm biểu tượng (mũi tên hoặc ký hiệu liên kết ngoài)
Dùng khối đậm cho liên kết nội dòng
Cung cấp nền được tô sáng

4. Chữ Đặt Trên Hình Nền

Chữ đặt trên ảnh hoặc gradient hiếm khi có đủ độ tương phản trên toàn bộ hình ảnh.

Khắc phục:

Thêm một lớp phủ bán trong suốt giữa hình ảnh và chữ
Dùng text-shadow để tạo hiệu ứng viền nhẹ
Đặt chữ trong một hộp phủ màu đồng nhất
Đảm bảo mọi phần của hình ảnh có thể xuất hiện phía sau chữ đều đạt tỷ lệ tối thiểu

5. Văn Bản Gợi Ý (Placeholder) Độ Tương Phản Thấp

Văn bản gợi ý trong biểu mẫu như #BDBDBD trên nền trắng (1.9:1) phổ biến nhưng thất bại yêu cầu tương phản.

Khắc phục: Làm đậm văn bản gợi ý lên ít nhất #757575 (4.6:1). Tốt hơn nữa, hãy dùng nhãn (labels) thay vì văn bản gợi ý — nhãn luôn hiển thị và không bao giờ biến mất khi người dùng bắt đầu nhập.

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

Công cụ tự động

DevTools của trình duyệt — DevTools của Chrome và Firefox có tính năng kiểm tra độ tương phản tích hợp. Kiểm tra một phần tử và tìm tỷ lệ tương phản trong bảng "Styles" hoặc "Accessibility".
Công cụ kiểm tra tương phản trực tuyến — Nhập hai màu và nhận ngay trạng thái đạt/không đạt cho AA và AAA.
Plugin công cụ thiết kế — Stark, A11y và Contrast có sẵn cho Figma, Sketch và Adobe XD. Các plugin này kiểm tra độ tương phản trực tiếp trong tệp thiết kế của bạn.
Lighthouse — Công cụ kiểm tra Lighthouse của Google tự động báo cáo các lỗi tương phản.

Kiểm tra thủ công

Công cụ tự động chỉ có thể kiểm tra độ tương phản của chữ. Để đánh giá khả năng truy cập đầy đủ:

Tắt màn hình của bạn — Bạn có thể phân biệt được tất cả các yếu tố giao diện không?
Dùng bộ lọc thang xám — Thông tin vẫn được truyền tải chính xác mà không có màu sắc không?
Kiểm tra bằng trình mô phỏng mù màu — Các công cụ như Colorblindly (tiện ích mở rộng Chrome) cho thấy trang web của bạn trông như thế nào đối với người dùng có nhiều dạng thiếu hụt thị giác màu khác nhau.
Kiểm tra dưới ánh nắng trực tiếp — Ánh sáng xung quanh cao làm giảm độ tương phản cảm nhận.

Thiết kế cho người mù màu

Khoảng 1 trên 12 nam giới (8%) và 1 trên 200 phụ nữ (0.5%) có một số dạng thiếu hụt thị giác màu. Các loại phổ biến nhất là:

Deuteranopia (mù xanh lục, 6% nam giới) — Khó phân biệt đỏ với xanh lục
Protanopia (mù đỏ, 2% nam giới) — Màu đỏ trông tối hơn, nhầm lẫn với xanh lục
Tritanopia (mù xanh lam, hiếm gặp) — Khó phân biệt xanh lam với vàng

Chiến lược thiết kế

Không bao giờ chỉ dựa vào màu sắc — Mọi thông tin được truyền tải qua màu sắc (trạng thái lỗi, chỉ báo trạng thái, danh mục biểu đồ) cũng phải được truyền tải qua chữ, biểu tượng, họa tiết hoặc vị trí.
Tránh các tổ hợp có vấn đề — Đỏ/xanh lục, lam/tím, lục/nâu và lục/lam là những cặp thường bị nhầm lẫn nhất.
Dùng họa tiết và kết cấu — Trong biểu đồ, hãy dùng đường chấm, nền gạch chéo và các hình dạng khác nhau ngoài màu sắc.
Thêm nhãn trực tiếp — Trong trực quan hóa dữ liệu, gắn nhãn trực tiếp cho điểm dữ liệu thay vì dựa vào chú giải mã màu.
Kiểm tra bằng trình mô phỏng — Mọi thiết kế nên được kiểm tra qua trình mô phỏng deuteranopia và protanopia trước khi phát hành.

Xây dựng một hệ thống màu dễ tiếp cận

Bước 1: Chọn các màu cơ sở dễ tiếp cận

Bắt đầu với những màu tự nhiên mang lại độ tương phản tốt. Xanh lam đậm, xanh lục đậm và đỏ đậm đều có thể là màu cơ sở dễ tiếp cận khi kết hợp phù hợp.

Bước 2: Tạo một thang màu tuân thủ

Tạo một thang lightness trong đó mỗi bậc duy trì độ tương phản đủ với cả các màu lân cận sáng hơn và tối hơn. OKLCH lý tưởng cho việc này vì kênh lightness của nó đồng nhất về mặt tri giác:

--text-primary: oklch(10% 0.01 0);    /* Gần đen, ~19:1 trên nền trắng */
--text-secondary: oklch(35% 0.02 0);  /* Xám đậm, ~9:1 trên nền trắng */
--text-muted: oklch(45% 0.02 0);      /* Xám trung bình, ~5.5:1 trên nền trắng */
--text-disabled: oklch(60% 0.02 0);   /* Xám nhạt, ~3:1 trên nền trắng */

Bước 3: Xác minh mọi tổ hợp

Mọi cặp tiền cảnh-hậu cảnh trong hệ thống thiết kế của bạn phải được xác minh:

Chữ chính trên bề mặt — tối thiểu 4.5:1 (khuyến nghị 7:1)
Chữ phụ trên bề mặt — tối thiểu 4.5:1
Chữ mờ trên bề mặt — tối thiểu 3:1 (chỉ cho chữ không thiết yếu)
Yếu tố tương tác — tối thiểu 3:1 cho các trạng thái
Chỉ báo tiêu điểm — tối thiểu 3:1

Danh sách kiểm tra thực tế cho nhà phát triển

[ ] Tất cả chữ nội dung đạt hoặc vượt tỷ lệ tương phản 4.5:1
[ ] Tất cả chữ lớn đạt hoặc vượt tỷ lệ tương phản 3:1
[ ] Liên kết có chỉ báo không dùng màu (gạch chân, biểu tượng hoặc thay đổi khối lượng)
[ ] Trường nhập biểu mẫu có viền hoặc nền nhìn thấy được (không chỉ là văn bản gợi ý)
[ ] Chỉ báo tiêu điểm có độ tương phản 3:1 với nền liền kề
[ ] Trạng thái lỗi kết hợp màu sắc với chữ hoặc biểu tượng
[ ] Biểu đồ sử dụng họa tiết hoặc nhãn trực tiếp ngoài màu sắc
[ ] Văn bản gợi ý đạt tối thiểu 4.5:1
[ ] Các yếu tố bị vô hiệu hóa có thể phân biệt bằng thị giác nhưng vẫn nhận biết được
[ ] Thiết kế đã được kiểm tra bằng trình mô phỏng mù màu

Kết luận

Độ tương phản màu dễ tiếp cận không phải là tùy chọn — nó là một yêu cầu cơ bản của thiết kế web toàn diện. Đáp ứng tiêu chuẩn WCAG AA giúp nội dung của bạn dễ tiếp cận với người dùng khiếm thị, cải thiện khả năng đọc cho tất cả mọi người và thường mang lại các thiết kế sạch hơn, có chủ đích hơn. Hãy bắt đầu kiểm tra độ tương phản trong quy trình làm việc của bạn, dùng màu sắc như một bổ sung — chứ không phải thay thế — cho các chỉ báo thị giác khác, và luôn kiểm tra thiết kế của bạn qua lăng kính khả năng truy cập.

Sử dụng công cụ chuyển đổi màu trực tuyến miễn phí của chúng tôi với tính năng kiểm tra độ tương phản tích hợp để xác minh các tổ hợp màu của bạn theo tiêu chuẩn WCAG AA và AAA.