Thư viện thuật ngữ / UI/UX

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

Còn gọi: contrast ratio, tỉ lệ tương phản, wcag contrast

Tỉ lệ tương phản màu (contrast ratio) là con số đo độ chênh sáng giữa màu chữ và màu nền, từ 1:1 (giống nhau) đến 21:1 (đen trên trắng); chuẩn WCAG yêu cầu tối thiểu 4,5:1 cho chữ thường và 3:1 cho chữ lớn ở mức AA.

Ảnh minh hoạ Tỉ lệ tương phản màu (contrast ratio): bốn cặp chữ và nền với tỉ lệ tương phản ghi rõ (2:1, 3:1, 4,5:1, 7:1) và dấu đạt hay không đạt
Bốn cặp chữ và nền với tỉ lệ tương phản ghi rõ (2:1, 3:1, 4,5:1, 7:1) và dấu đạt hay không đạt

Hiểu kỹ hơn

Tương phản đủ giúp người nhìn kém, người dùng ngoài nắng hay trên màn hình rẻ vẫn đọc được. Lỗi phổ biến là chữ xám nhạt trên nền trắng, chữ trắng trên ảnh sáng, và chữ trên nút màu thương hiệu tươi. Mức AAA nghiêm hơn: 7:1 cho chữ thường. Các công cụ kiểm tra tương phản (như công cụ Contrast checker của ColorME) cho kết quả ngay và gợi ý màu đạt chuẩn.