Hướng dẫn Kiểm tra Độ Tương phản WCAG: Yêu cầu AA/AAA và Cách Khắc phục Lỗi

Độ tương phản màu sắc là lỗi khả năng tiếp cận phổ biến nhất trên web. Theo phân tích hàng năm của WebAIM, độ tương phản thấp ảnh hưởng đến hơn 80% trang chủ. Tuy nhiên, đây cũng là một trong những vấn đề dễ khắc phục nhất — nếu bạn biết các quy tắc và có công cụ phù hợp. Hướng dẫn này giải thích các yêu cầu về độ tương phản WCAG, cách hoạt động của tỷ lệ tương phản và cách khắc phục lỗi mà không cần thiết kế lại toàn bộ bảng màu của bạn.

Độ tương phản màu sắc là gì và tại sao nó quan trọng?

Độ tương phản màu sắc là sự khác biệt về độ sáng (độ sáng cảm nhận) giữa văn bản và nền của nó. Độ tương phản cao giúp văn bản dễ đọc cho mọi người — bao gồm người dùng có thị lực kém, mù màu hoặc xem màn hình dưới ánh sáng mặt trời chói chang.

Hướng dẫn Khả năng Tiếp cận Nội dung Web (WCAG) 2.1 xác định tỷ lệ tương phản tối thiểu để đảm bảo khả năng đọc. Đáp ứng các tiêu chuẩn này không chỉ là thực hành tốt — nó còn được yêu cầu về mặt pháp lý theo Đạo luật Người Mỹ Khuyết tật (ADA), Mục 508 và các luật tương tự trên toàn thế giới.

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

WCAG xác định hai cấp độ tuân thủ cho độ tương phản:

Cấp độ AA (tiêu chuẩn tối thiểu)

Văn bản thông thường (dưới 18pt hoặc dưới 14pt đậm):

• Tỷ lệ tương phản tối thiểu: 4.5:1

Văn bản lớn (18pt+ hoặc 14pt+ đậm):

• Tỷ lệ tương phản tối thiểu: 3:1

Thành phần UI và đối tượng đồ họa:

• Tỷ lệ tương phản tối thiểu: 3:1 (bổ sung WCAG 2.1)

Cấp độ AAA (tiêu chuẩn nâng cao)

Văn bản thông thường:

• Tỷ lệ tương phản tối thiểu: 7:1

Văn bản lớn:

• Tỷ lệ tương phản tối thiểu: 4.5:1

Hầu hết các tổ chức nhắm đến Cấp độ AA làm cơ sở. Cấp độ AAA được khuyến nghị cho các ứng dụng nhiều văn bản (tài liệu, trang web pháp lý, nền tảng giáo dục) và sản phẩm phục vụ người dùng khiếm thị.

Cách tính tỷ lệ tương phản

Tỷ lệ tương phản là độ sáng tương đối của màu sáng hơn chia cho độ sáng tương đối của màu tối hơn, được biểu thị dưới dạng tỷ lệ từ 1:1 (không có độ tương phản) đến 21:1 (đen trên trắng).

Bạn không cần tính toán thủ công. Sử dụng Công cụ Kiểm tra Độ Tương phản WCAG của chúng tôi để kiểm tra nhiều cặp màu ngay lập tức.

Ví dụ

Màu chữ	Màu nền	Tỷ lệ	AA Thường	AA Lớn	AAA Thường
#000000	#FFFFFF	21:1	✅ Đạt	✅ Đạt	✅ Đạt
#767676	#FFFFFF	4.54:1	✅ Đạt	✅ Đạt	❌ Không đạt
#959595	#FFFFFF	3.01:1	❌ Không đạt	✅ Đạt	❌ Không đạt
#3B82F6	#FFFFFF	3.15:1	❌ Không đạt	✅ Đạt	❌ Không đạt
#1E40AF	#FFFFFF	7.04:1	✅ Đạt	✅ Đạt	✅ Đạt

Lưu ý rằng nhiều màu thương hiệu phổ biến (như #3B82F6, blue-500 của Tailwind) không đạt AA cho văn bản thông thường trên nền trắng.

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

1. Văn bản xám nhạt trên nền trắng

Lỗi:

color: #999999;           /* Gray-400 */
background: #FFFFFF;      /* Trắng */
/* Tỷ lệ: 2.85:1 — Không đạt AA */

Khắc phục: Làm tối văn bản ít nhất #767676 (4.54:1) cho AA hoặc #595959 (7.0:1) cho AAA.

2. Màu thương hiệu trên nền trắng

Lỗi:

color: #3B82F6;           /* Tailwind blue-500 */
background: #FFFFFF;
/* Tỷ lệ: 3.15:1 — Không đạt AA văn bản thường */

Khắc phục: Làm tối màu thương hiệu cho văn bản nội dung:

color: #1E40AF;           /* Tailwind blue-700 */
background: #FFFFFF;
/* Tỷ lệ: 7.04:1 — Đạt AAA */

Sử dụng Công cụ Kiểm tra Độ Tương phản Hàng loạt của chúng tôi để kiểm tra toàn bộ bảng màu của bạn trong vài giây.