Đảm bảo ai cũng có thể đọc được văn bản của bạn
Chữ màu xám nhạt trên nền trắng, chữ trắng trên nút màu pastel, hoặc liên kết màu xanh lam trên nền tối có thể trông rất đẹp trong bản thiết kế nhưng người dùng thực tế lại không thể đọc được. Công cụ kiểm tra độ tương phản này sẽ đo tỷ lệ tương phản giữa bất kỳ màu chữ và màu nền nào, đồng thời cho bạn biết ngay lập tức liệu nó có đáp ứng Hướng dẫn Tiếp cận Nội dung Web (WCAG) ở cấp độ AA và AAA hay không — nếu không, công cụ sẽ đề xuất màu gần nhất đạt chuẩn.
Tính năng
- Tỷ lệ tương phản từ 1:1 đến 21:1.
- Kết quả WCAG 2 AA và AAA cho văn bản thường, văn bản lớn và các thành phần giao diện (UI).
- Mọi định dạng màu: HEX, RGB, HSL hoặc tên màu CSS.
- Xem trước trực tiếp với tiêu đề, phần thân và văn bản nhỏ.
- Đề xuất màu sắc đạt chuẩn mà vẫn giữ nguyên tông màu của bạn.
- Nút hoán đổi để kiểm tra phiên bản chữ sáng trên nền tối.
Tóm tắt các yêu cầu của WCAG
| Nội dung | AA | AAA |
|---|---|---|
| Văn bản thường | 4.5:1 | 7:1 |
| Văn bản lớn (≥ 24 px, hoặc ≥ 19 px in đậm) | 3:1 | 4.5:1 |
| Thành phần UI và đồ họa | 3:1 | — |
| Logo và văn bản trang trí | Không yêu cầu | Không yêu cầu |
Các kết hợp phổ biến
| Chữ | Nền | Tỷ lệ | Văn bản thường AA |
|---|---|---|---|
| #000000 | #FFFFFF | 21:1 | Đạt |
| #767676 | #FFFFFF | 4.54:1 | Đạt (màu xám nhạt nhất đạt chuẩn) |
| #999999 | #FFFFFF | 2.85:1 | Không đạt |
| #FFFFFF | #0EA5E9 | 2.77:1 | Không đạt |
| #FFFFFF | #0369A1 | 5.93:1 | Đạt |
Các công cụ liên quan
Chuyển đổi mã màu giữa các định dạng bằng Công cụ chuyển đổi mã màu, tạo bảng màu hoàn chỉnh bằng Công cụ tạo bảng màu, hoặc lấy mã màu chính xác từ ảnh chụp màn hình bằng Công cụ lấy mã màu từ ảnh.