Kiểm tra độ tương phản màu WCAG AA, AAA – Miễn phí
Miễn phí, không cần đăng ký, chạy trên trình duyệt. Kiểm tra chữ có dễ đọc trên nền hay không bằng tỷ lệ tương phản WCAG, xem kết quả AA và AAA cho chữ thường, chữ lớn và thành phần điều khiển, và nhận màu gần nhất đạt chuẩn.
Chữ lớn trông như thế này
Chữ nội dung thông thường trông như thế này. Con cáo nâu nhanh nhẹn nhảy qua chú chó lười, và chữ nhỏ, như chú thích, nằm bên dưới.
Chữ nhỏ: chú thích 14px.
NútTỷ lệ tương phản13.08:1
- Chữ thường, AA: ĐạtChữ nội dung, tối thiểu 4.5:1
- Chữ thường, AAA: ĐạtNâng cao, tối thiểu 7:1
- Chữ lớn, AA: Đạt18pt+, hoặc 14pt+ đậm, tối thiểu 3:1
- Chữ lớn, AAA: ĐạtNâng cao, tối thiểu 4.5:1
- Biểu tượng và điều khiển, AA: ĐạtNút, viền, đường biểu đồ: 3:1
Dùng công thức tương phản WCAG 2. Tỷ lệ không bao giờ được làm tròn lên, nên 4.49:1 không được tính là 4.5:1. Kiểm tra trên thiết bị của bạn.
Vì sao nên dùng Kiểm tra độ tương phản màu
- Miễn phí 100%
- Dùng bao nhiêu lần tùy thích. Không cần đăng ký, không hình mờ, không cần cài đặt.
- Riêng tư ngay từ thiết kế
- Những gì bạn nhập chỉ nằm trong trình duyệt và không bao giờ được gửi cho chúng tôi.
- Chạy trên mọi thiết bị
- Chạy trên trình duyệt trên Windows, Mac, Linux, Android và iPhone. Không cần ứng dụng.
Cách dùng Kiểm tra độ tương phản màu
- Nhập màu chữ và màu nền, hoặc chọn màu.
- Xem tỷ lệ tương phản và kết quả đạt hay không đạt.
- Nếu không đạt, nhấn vào một màu gợi ý đạt chuẩn.
Câu hỏi thường gặp
- Tôi cần tỷ lệ tương phản bao nhiêu?
- WCAG AA yêu cầu 4.5:1 cho chữ thường và 3:1 cho chữ lớn và các thành phần giao diện như nút và biểu tượng. AAA yêu cầu 7:1 và 4.5:1.
- Thế nào được coi là chữ lớn?
- Tối thiểu 18 point (24px) chữ thường, hoặc 14 point (khoảng 18.7px) chữ đậm.
- Công cụ có xử lý màu chữ trong suốt không?
- Có. Màu chữ trong suốt được hòa với màu nền trước khi đo độ tương phản.
- Tại sao 4.49:1 không đạt?
- WCAG quy định không được làm tròn lên, nên bất cứ tỷ lệ nào dưới 4.5:1 đều không đạt AA cho chữ thường.
- Kiểm tra độ tương phản màu có miễn phí không?
- Có. Bạn dùng miễn phí, không cần đăng ký và không cần cài đặt gì.
Công cụ liên quan
- Chuyển mã màu HEX sang RGBChuyển đổi màu giữa HEX, RGB, HSL, HSV và CMYK chỉ trong một bước, kể cả độ trong suốt. Dán mã ở bất kỳ định dạng nào hoặc chọn màu, rồi sao chép định dạng bạn cần và kiểm tra độ tương phản của chữ.
- Tạo bảng màuTạo bảng màu chỉ bằng một phím bấm, khóa những màu bạn thích, hoặc xây dựng từ một màu gốc với các kiểu phối màu tương đồng, bổ túc hoặc bộ ba. Xuất dưới dạng biến CSS, Tailwind hoặc JSON.
- Tìm tên màuTìm tên của bất kỳ màu nào: dán mã HEX, RGB hoặc HSL để nhận các tên màu CSS gần nhất, một mô tả dễ hiểu, và danh sách đầy đủ 148 màu có tên để tham khảo.