Chọn màu & kiểm tra độ tương phản

Cách dùng Chọn màu & kiểm tra độ tương phản

Công cụ tính gì và khi nào nên dùng

Chọn và chuyển đổi màu giữa HEX, RGB, HSL, HSV và CMYK, gợi ý sắc độ sáng, tối và màu phối hợp, và kiểm tra độ tương phản chữ theo hướng dẫn tiếp cận WCAG.

Cách sử dụng, từng bước

1. Chọn màu bằng bảng chọn hoặc nhập dưới dạng HEX, RGB, HSL hoặc tên màu.
2. Chọn màu nền để kiểm tra độ tương phản.
3. Sao chép bất kỳ định dạng nào chỉ với một cú nhấp.
4. Dùng các sắc độ sáng, tối và màu phối hợp để tạo bảng màu.

Ý nghĩa của từng ô nhập

• Màu – Mặc định là #2443C8, màu xanh SmartCalcy.
• Nền – Mặc định là màu trắng.

Cách đọc kết quả

• Tỷ lệ tương phản – Từ 1:1 đến 21:1, kèm kết quả AA và AAA cho chữ thường và chữ lớn.
• Định dạng – HEX, RGB, HSL, HSV và CMYK.
• Sắc độ sáng và tối – Các phiên bản sáng hơn và tối hơn.
• Màu phối hợp – Bổ túc, tương đồng và bộ ba.

Công thức

Tỷ lệ tương phản = (L1 + 0,05) ÷ (L2 + 0,05), trong đó L1 và L2 là độ chói tương đối của màu sáng hơn và tối hơn. WCAG AA cần 4,5:1 cho chữ thường và 3:1 cho chữ lớn; AAA cần 7:1 và 4,5:1.

Ví dụ minh họa

Với các màu mặc định, #2443C8 trên nền trắng có tỷ lệ tương phản 7,74:1, đạt AAA cho mọi cỡ chữ.

Giả định và giới hạn

• Giá trị CMYK là phép chuyển đổi đơn giản, không phải hồ sơ màu in được quản lý.
• Kết quả tương phản theo công thức WCAG 2.

Lỗi thường gặp

• Chỉ kiểm tra độ tương phản trên chữ lớn rồi dùng màu đó cho chữ nhỏ.
• Chỉ dựa vào màu sắc để thể hiện ý nghĩa.

Câu hỏi thường gặp

Công cụ liên quan