appstoryoAppStoryolapnito.cz s.r.o.blog/check-text-contrast-picked-color-ui/viCách kiểm tra độ tương phản văn bản của màu đã chọn trước khi dùng trong giao diệnLubor Šimůnek29082026© 2026 lapnito.cz s.r.o.2026lapnito.cz s.r.o.CC BY 4.0Tìm hiểu cách kiểm tra tỷ lệ tương phản WCAG và điều chỉnh màu sắc trong HSL để giao diện luôn dễ tiếp cận và dễ đọc.
Thiết kếarticleAppStoryoTại sao độ tương phản quan trọngKhoảng 300 triệu người trên thế giới mắc một dạng thiếu khả năng nhận biết màu sắc. Thiết kế với độ tương phản tốt không chỉ là thẩm mỹ — ở nhiều khu vực, đây là yêu cầu pháp lý. Tiêu chuẩn tham chiếu là WCAG 2.1 với hai mức chính:
Mức AA: tỷ lệ tương phản 4,5:1 cho văn bản thường và 3:1 cho văn bản lớn (18px trở lên hoặc 14px đậm).
Mức AAA: 7:1 cho văn bản thường.
Lỗi thường gặpPhổ biến nhất là: màu xám nhạt trên nền trắng (có thể chỉ đạt 1,5:1), nút màu với chữ trắng trông đọc được nhưng không qua AA, và màu sắc đạt trong chế độ sáng nhưng thất bại ở chế độ tối.
Quy trình thực tếLấy màu nền. Mở Color Picker Camera: HEX RGB, hướng camera vào bề mặt và chạm để lấy giá trị HEX ngay lập tức. Ứng dụng cũng hiển thị HSL.
Lấy màu văn bản theo cách tương tự.
Kiểm tra cặp màu trong công cụ kiểm tra tương phản — như WebAIM Contrast Checker, bảng Accessibility trong DevTools, hoặc plugin Contrast trong Figma.
Điều chỉnh độ sáng trong HSL cho đến khi đạt ngưỡng. Giữ nguyên H và S, giảm L để làm tối màu mà không thay đổi bản sắc hình ảnh.
Tại sao HSL lý tưởng để điều chỉnh độ tương phảnRGB và HEX không cung cấp kiểm soát trực quan về độ sáng. HSL tách biệt màu sắc, độ bão hòa và độ sáng. Color Picker Camera: HEX RGB hiển thị HEX, RGB, HSL và CMYK đồng thời — không cần chuyển đổi thủ công.
Ví dụ thực tếNút xanh trung bình (#4A90E2) với chữ trắng có tương phản khoảng 3,1:1 — không qua AA. Chuyển sang xanh navy đậm (#1A3A6B) và tương phản tăng lên 9,4:1, vượt cả AAA.
Ghi chú về WCAG 3.0 và APCAHướng dẫn thế hệ tiếp theo giới thiệu APCA — mô hình tương phản tri giác tinh tế hơn. WCAG 2.1 AA vẫn là tiêu chuẩn áp dụng hiện nay, nhưng kiểm tra với APCA đáng cân nhắc cho các dự án dài hạn.
Tải Color Picker Camera: HEX RGB miễn phí cho iOS hoặc Android — không quảng cáo, không theo dõi và hoạt động hoàn toàn ngoại tuyến.