Kiểm Tra Độ Tương Phản Màu

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

Tỷ lệ tương phản màu là một phép đo định lượng sự khác biệt về độ sáng giữa hai màu sắc. Theo đặc tả WCAG (Web Content Accessibility Guidelines) 2.1 do W3C phát hành, tỷ lệ này được tính bằng công thức (L1 + 0.05) / (L2 + 0.05), trong đó L1 là độ sáng tương đối (relative luminance) của màu sáng hơn và L2 là của màu tối hơn. Kết quả nằm trong khoảng từ 1:1 (hai màu giống hệt nhau) đến 21:1 (đen hoàn toàn trên trắng hoàn toàn).

Tỷ lệ này rất quan trọng cho khả năng tiếp cận web (web accessibility). Nếu tỷ lệ tương phản quá thấp, người dùng — đặc biệt là người có thị lực kém, người lớn tuổi, hoặc người sử dụng màn hình trong điều kiện ánh sáng mạnh — sẽ không thể đọc được nội dung. Đây không chỉ là vấn đề thiết kế mà còn là yêu cầu pháp lý ở nhiều quốc gia theo các luật chống phân biệt khuyết tật.

Tiêu chuẩn WCAG AA và AAA

WCAG 2.1 định nghĩa hai cấp độ tuân thủ chính cho tỷ lệ tương phản:

• AA — Yêu cầu tỷ lệ tối thiểu 4.5:1 cho văn bản kích thước thường (dưới 18pt hoặc 14pt đậm) và 3:1 cho văn bản lớn (18pt trở lên, hoặc 14pt đậm trở lên). Đây là mức tối thiểu mà hầu hết tổ chức và quy định pháp luật yêu cầu.
• AAA — Yêu cầu tỷ lệ tối thiểu 7:1 cho văn bản thường và 4.5:1 cho văn bản lớn. Đây là tiêu chuẩn nâng cao, đặc biệt quan trọng cho các trang web y tế, chính phủ, và giáo dục — nơi mà khả năng đọc phải được đảm bảo cho mọi đối tượng.

Ngoài ra, WCAG 2.1 còn yêu cầu tỷ lệ 3:1 cho các thành phần giao diện (UI components) như biểu tượng, viền, và các phần tử điều khiển (nút bấm, checkbox, trường nhập liệu). Quy tắc này áp dụng cho cả trạng thái mặc định và trạng thái tương tác (hover, focus).

Cách tính luminance tương đối

Quá trình tính toán bắt đầu bằng việc chuyển đổi giá trị sRGB (0-255) sang giá trị tuyến tính. Mỗi kênh màu (R, G, B) được chia cho 255, sau đó áp dụng hàm gamma nghịch đảo: nếu giá trị nhỏ hơn hoặc bằng 0.04045, chia cho 12.92; ngược lại, áp dụng công thức ((value + 0.055) / 1.055) ^ 2.4.

Sau khi có giá trị tuyến tính, luminance tương đối được tính theo công thức có trọng số: L = 0.2126 × R + 0.7152 × G + 0.0722 × B. Các hệ số này phản ánh cách mắt người cảm nhận màu sắc — mắt nhạy nhất với màu xanh lá, tiếp theo là đỏ, và ít nhạy nhất với xanh dương.

L = 0.2126R + 0.7152G + 0.0722B

Tại sao khả năng tiếp cận màu sắc quan trọng

Theo Tổ chức Y tế Thế giới (WHO), khoảng 2.2 tỷ người trên toàn cầu bị suy giảm thị lực ở các mức độ khác nhau. Khoảng 8% nam giới và 0.5% nữ giới bị mù màu (color blindness) — tổng cộng hơn 300 triệu người. Khi thiết kế web không đáp ứng tiêu chuẩn tương phản, bạn đang vô tình loại trừ một bộ phận đáng kể người dùng.

Ngoài ra, độ tương phản kém cũng ảnh hưởng đến tất cả người dùng trong nhiều tình huống: sử dụng điện thoại dưới nắng, màn hình cũ có độ sáng thấp, hoặc đơn giản là mệt mỏi mắt sau một ngày dài làm việc. Thiết kế có tương phản tốt không chỉ giúp người khuyết tật — nó cải thiện trải nghiệm cho tất cả mọi người.

Cách sử dụng công cụ kiểm tra tương phản

• Bước 1: Chọn màu chữ — Nhập mã hex (VD: #E2E8F0) hoặc nhấn vào ô màu để mở bộ chọn màu của trình duyệt.
• Bước 2: Chọn màu nền — Tương tự, nhập mã hex hoặc dùng bộ chọn màu cho màu nền.
• Bước 3: Đọc kết quả — Tỷ lệ tương phản và trạng thái đạt/không đạt cho AA và AAA được cập nhật tức thì. Kiểm tra cả chữ thường và chữ lớn.
• Bước 4: Xem trước — Phần xem trước văn bản hiển thị chữ với màu bạn đã chọn ở nhiều kích thước để đánh giá trực quan.
• Bước 5: Sao chép kết quả — Nhấn nút sao chép để lấy kết quả dưới dạng văn bản, tiện cho việc báo cáo hoặc chia sẻ với nhóm thiết kế.

Mẹo thiết kế với tương phản tốt

• Không chỉ dùng màu sắc — Sử dụng thêm các yếu tố khác như biểu tượng, gạch dưới, hoặc kiểu chữ đậm để truyền đạt thông tin. Đặc biệt quan trọng cho người mù màu.
• Kiểm tra chế độ tối — Nhiều trang web chỉ kiểm tra tương phản ở chế độ sáng. Đảm bảo rằng bảng màu chế độ tối cũng đáp ứng tiêu chuẩn WCAG.
• Cẩn thận với chữ trên hình nền — Chữ trên hình nền hoặc gradient thường không đồng nhất về tương phản. Sử dụng lớp phủ bán trong suốt hoặc viền chữ để đảm bảo dễ đọc.
• Nhắm đến AAA khi có thể — Mặc dù AA là yêu cầu tối thiểu, việc đạt AAA cho nội dung chính (body text) sẽ cải thiện đáng kể trải nghiệm đọc cho mọi người dùng.
• Kiểm tra trạng thái tương tác — Nút bấm, liên kết, và trường nhập liệu cần đáp ứng tiêu chuẩn 3:1 cho cả trạng thái mặc định, hover, focus, và disabled.

Công cụ kiểm tra tương phản và quy trình thiết kế

Kiểm tra tương phản nên là một phần tích hợp trong quy trình thiết kế, không phải bước kiểm tra cuối cùng. Lý tưởng nhất, hãy xác minh tỷ lệ tương phản ngay khi chọn bảng màu — trước khi bắt đầu thiết kế giao diện. Nhiều hệ thống thiết kế (Design System) hiện đại như Material Design, Chakra UI, và Tailwind CSS đã tích hợp sẵn bảng màu đáp ứng WCAG AA.

Khi phát triển, sử dụng công cụ tự động (automated accessibility testing) như axe-core, Lighthouse, hoặc pa11y trong CI/CD pipeline để bắt lỗi tương phản sớm. Tuy nhiên, công cụ tự động không thể bắt tất cả — bạn vẫn cần kiểm tra thủ công cho chữ trên hình nền, gradient, và các thành phần động.