Đây là lỗi cực kỳ phổ biến ở landing page, hero section, dark mode và các thiết kế thiên về thẩm mỹ. Nếu xử lý đúng cách, bạn có thể cải thiện accessibility mà không cần phá UI hay thay đổi toàn bộ hệ màu.
Color contrast là gì
Color contrast là độ tương phản giữa màu chữ (foreground) và màu nền (background). Mục tiêu của contrast là đảm bảo văn bản đủ rõ để người dùng có thể đọc được trong nhiều điều kiện thị giác khác nhau.
Theo tiêu chuẩn WCAG:
- Text thường phải đạt tỷ lệ tương phản tối thiểu 4.5:1
- Text lớn có thể chấp nhận mức 3:1
- Icon, button, và các yếu tố tương tác cũng phải đảm bảo đủ tương phản
Nếu không đạt các mức này, công cụ audit sẽ báo lỗi Elements do not have sufficient color contrast.
Vì sao lỗi này xuất hiện rất nhiều
Lý do phổ biến nhất không nằm ở code, mà nằm ở quyết định thiết kế.
- Ưu tiên brand color hơn khả năng đọc
- Dùng màu chữ quá nhạt trên nền sáng hoặc nền ảnh
- Dark mode nhưng text dùng màu xám thiếu tương phản
- Overlay gradient hoặc image background làm giảm độ rõ của chữ
Nhiều designer kiểm tra giao diện bằng mắt thường trên màn hình tốt, nhưng không kiểm tra theo tiêu chuẩn accessibility.
Những vị trí dễ dính lỗi nhất
- Hero section với background image
- CTA button dùng màu brand nhạt
- Text phụ, caption, meta info
- Dark mode hoặc theme tối
- Placeholder trong form input
Ví dụ lỗi thường gặp
<p style="color:#999;background:#fff">
Nội dung này rất khó đọc
</p>
Màu xám nhạt trên nền trắng trông có vẻ tinh tế, nhưng tỷ lệ tương phản thường không đạt chuẩn.
Ví dụ đạt chuẩn accessibility
<p style="color:#333;background:#fff">
Nội dung này dễ đọc hơn và đạt chuẩn
</p>
Chỉ cần tăng nhẹ độ đậm của màu chữ là có thể vượt qua ngưỡng tương phản mà không làm giao diện trở nên “nặng nề”.
Cách khắc phục mà không phá UI
Không phải lúc nào fix color contrast cũng đồng nghĩa với việc đổi toàn bộ bảng màu. Các giải pháp thực tế gồm:
- Tăng độ đậm của text thay vì đổi màu hoàn toàn
- Thêm overlay tối hoặc sáng cho background image
- Dùng text-shadow rất nhẹ để tăng độ tách bạch
- Điều chỉnh màu chữ riêng cho dark mode
- Không dùng placeholder làm nội dung chính
Mục tiêu là cải thiện khả năng đọc, không phải “đập UI làm lại từ đầu”.
Công cụ kiểm tra color contrast nên dùng
- Lighthouse Accessibility Audit
- axe DevTools
- WCAG Contrast Checker
- Color Contrast Analyzer
Các công cụ này giúp xác định chính xác phần tử nào vi phạm và tỷ lệ tương phản hiện tại là bao nhiêu.
Những sai lầm cần tránh
- Chỉ kiểm tra contrast cho text lớn, bỏ qua text nhỏ
- Dựa hoàn toàn vào cảm giác thị giác cá nhân
- Fix tạm bằng cách tăng font-size để né audit
- Hy sinh accessibility để giữ màu brand tuyệt đối
Lợi ích khi sửa lỗi color contrast
Khi color contrast được cải thiện đúng chuẩn, bạn sẽ nhận được nhiều lợi ích rõ ràng:
- Nội dung dễ đọc hơn với mọi đối tượng người dùng
- Cải thiện điểm accessibility trong Lighthouse
- Tăng trải nghiệm UX và thời gian đọc
- Website thân thiện hơn với tiêu chuẩn WCAG
Kết luận
Lỗi Elements do not have sufficient color contrast không phải là lỗi hiếm, mà là lỗi “quá quen”. Nó xuất hiện khi thiết kế ưu tiên thẩm mỹ hơn khả năng tiếp cận. Chỉ cần điều chỉnh hợp lý màu chữ, màu nền và cách hiển thị, bạn hoàn toàn có thể đạt chuẩn accessibility mà vẫn giữ được tinh thần thiết kế ban đầu.
Bình luận