Cá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ện
========================================================================

Trước khi áp dụng bất kỳ màu nào vào giao diện, hãy kiểm tra độ tương phản. Đây là quy trình chính xác để đi từ giá trị HEX đến thiết kế có thể truy cập.

Author: Lubor Šimůnek
Published: 2026-08-29
Category: Thiết kế

Tại sao độ tương phản quan trọng

Khoả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ặp

Phổ 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ế

1. Lấy màu nền. Mở Color Picker Camera: HEX RGB (https://apps.apple.com/us/app/color-picker-camera-hex-rgb/id6759371237), 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.
2. Lấy màu văn bản theo cách tương tự.
3. 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.
4. Đ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ản

RGB 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 (https://play.google.com/store/apps/details?id=com.tomas.color_picker) 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à APCA

Hướ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 (https://apps.apple.com/us/app/color-picker-camera-hex-rgb/id6759371237) hoặc Android (https://play.google.com/store/apps/details?id=com.tomas.color_picker) — không quảng cáo, không theo dõi và hoạt động hoàn toàn ngoại tuyến.

--
Source: https://appstoryo.com/vi/blog/check-text-contrast-picked-color-ui
License: CC BY 4.0 (https://creativecommons.org/licenses/by/4.0/)
Cite as: Lubor Šimůnek (2026). Cá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ện. AppStoryo, lapnito.cz s.r.o. https://appstoryo.com/vi/blog/check-text-contrast-picked-color-ui