Contrast là gì?
Còn gọi: tương phản, tương phản là gì, tương phản màu, tương phản màu sắc
Contrast là sự khác biệt rõ ràng giữa các yếu tố về màu, độ sáng, kích thước, độ đậm hoặc hình dạng, giúp tạo điểm nhấn, phân cấp thông tin và đảm bảo nội dung dễ đọc.
Hiểu kỹ hơn
Trong giao diện, tương phản có hai mặt. Mặt thứ nhất là thẩm mỹ và phân cấp: tiêu đề to và đậm đặt cạnh chữ thân nhỏ, nút màu nổi trên nền trung tính, giúp mắt biết nhìn vào đâu trước. Mặt thứ hai là khả năng đọc, đo bằng tỉ lệ tương phản độ sáng. WCAG 2.2 mức AA yêu cầu chữ thường đạt ít nhất 4.5:1, chữ lớn (từ 24px, hoặc 18,66px khi in đậm) đạt 3:1, và thành phần giao diện như viền ô nhập, icon đạt 3:1 với nền. Trong Figma, có thể kiểm tra bằng các plugin như Stark hoặc Contrast. Ví dụ: chữ xám #999999 trên nền trắng chỉ đạt khoảng 2.8:1, không đạt AA cho chữ thường. Lỗi thường gặp là chạy theo phong cách tối giản với chữ xám nhạt trên nền trắng, nhìn sang trọng trên màn hình đẹp nhưng khó đọc ngoài nắng.
