Màu sắc và độ tương phản: những điều cần nhớ để thiết kế dễ đọc

Màu sắc ảnh hưởng trực tiếp đến việc người dùng có đọc được nội dung hay không. Phần hướng dẫn về màu và độ tương phản trong khóa Learn Accessibility của web.dev tóm tắt những điều nhà thiết kế cần nắm.

Ngưỡng tương phản theo WCAG

Văn bản thường, kể cả chữ nằm trong hình ảnh, cần tỷ lệ tương phản tối thiểu 4.5:1 với nền. Chữ cỡ lớn (từ 18pt/24px, hoặc 14pt/18.5px khi in đậm) và các biểu tượng quan trọng chỉ cần 3:1. Logo và thành phần trang trí được miễn trừ. Tỷ lệ này dựa trên độ chói tương đối, dao động từ 1 đến 21, trong đó chữ đen trên nền trắng đạt tối đa 21:1.

Cách kiểm tra

Có thể dùng Chrome DevTools (bộ chọn màu hiển thị tỷ lệ tương phản), Color Contrast Analyzer, Adobe Color hay Leonardo để tính tỷ lệ và gợi ý cặp màu đạt chuẩn. Nên đưa bước kiểm tra này vào design system ngay từ khi định nghĩa bảng màu.

Đừng chỉ dựa vào màu

Thông tin, hành động hay trạng thái không nên chỉ được truyền đạt bằng màu sắc. Hãy bổ sung họa tiết, chữ hoặc biểu tượng. Mẹo hữu ích là xem thiết kế ở chế độ thang xám để phát hiện sớm vấn đề, đồng thời tận dụng media query prefers-color-scheme cho giao diện tối và prefers-contrast cho giao diện tương phản cao.