♀

kiểm tra tương phản WCAG

Kiểm tra nhiều cặp màu văn bản/nền theo tiêu chuẩn WCAG 2.1 AA và AAA. Xem trước trực tiếp hiển thị chính xác văn bản sẽ trông thế nào ở các kích thước và độ đậm khác nhau.

Công cụ thiết kế Chạy cục bộ Không gửi dữ liệu
WCAGkhả năng truy cậptỷ lệ tương phảna11y
Xuất cặp màu 

    

      
      
    

  


  


  


  

    💡
    

      WCAG AA yêu cầu 4.5:1 cho văn bản thường, 3:1 cho văn bản lớn (18pt hoặc 14pt in đậm). WCAG AAA yêu cầu 7:1 cho văn bản thường, 4.5:1 cho văn bản lớn. Đạt AA là mức tối thiểu theo luật ở hầu hết quy định về khả năng truy cập.
    

  


  



  

    
Công cụ kiểm tra contrast WCAG AA là gì?

    
Kiểm tra tỷ lệ tương phản màu theo tiêu chuẩn WCAG AA và AAA. Kiểm tra nhiều cặp màu chữ/nền cùng lúc. Miễn phí, chạy trên trình duyệt, không gửi dữ liệu.

  


  

    
Cách sử dụng công cụ kiểm tra contrast WCAG

    
    
      
  1. Nhập màu foreground (văn bản) và màu background bằng bộ chọn màu hoặc bằng cách nhập giá trị HEX.
    2. 
      
  2. Công cụ tính ngay tỷ lệ contrast giữa hai màu.
    3. 
      
  3. Kiểm tra kết quả đạt/không đạt AA và AAA cho văn bản thường và văn bản lớn.
    4. 
      
  4. Điều chỉnh màu cho đến khi kết hợp của bạn đạt mức WCAG bạn cần.
    5. 
      
  5. Sao chép các giá trị màu đạt chuẩn để dùng trong CSS.
    6. 
    

  






  
Công cụ liên quan

  

    👁️
mô phỏng mù màu
Mô phỏng protanopia, deuteranopia, tritanopia trên mọi hình ảnh

    🎨
chọn màu
Chuyển đổi màu giữa HEX, RGB, HSL và CMYK

    🎨
tạo bảng màu
Tạo bảng màu bổ sung, tương tự và bộ ba

  






  
    Hiểu về contrast WCAG AA
    ▾
  
  

    

      Ví dụ
      

        

          

            Đầu vào
            Foreground #1F2937 trên background #FFFFFF
          

          

            Đầu ra
            Đạt WCAG AA cho văn bản thường và văn bản lớn
          

        

      

    

    

      Các trường hợp sử dụng phổ biến
      

        
    
          
  • Kiểm tra màu văn bản theo WCAG AA trước khi ra mắt
    • 
          
  • Rà soát các hồi quy về khả năng truy cập trong token của design system
    • 
          
  • Xác minh riêng contrast của tiêu đề và văn bản nội dung
    • 
          
  • Bàn giao các cặp màu đạt chuẩn cho đội ngũ sản phẩm
    • 
        

      

    

    

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

        
Sự khác biệt giữa AA và AAA là gì?
AA là mức tuân thủ tiêu chuẩn được hầu hết quy định yêu cầu. AAA là mức tăng cường — không bắt buộc cho mọi nội dung nhưng cải thiện khả năng đọc.

        
Công cụ này có kiểm tra độ tương phản phi văn bản không?
WCAG 1.4.11 yêu cầu độ tương phản 3:1 cho các thành phần UI và yếu tố đồ họa — công cụ kiểm tra này đáp ứng yêu cầu đó.

        
Công cụ kiểm tra tương phản WCAG - Kiểm tra hàng loạt AA/AAA làm gì?
Công cụ kiểm tra tương phản WCAG - Kiểm tra hàng loạt AA/AAA chạy hoàn toàn trong trình duyệt của bạn và giúp bạn hoàn thành tác vụ này mà không tải dữ liệu lên máy chủ.

        
Công cụ kiểm tra tương phản WCAG - Kiểm tra hàng loạt AA/AAA có miễn phí sử dụng không?
Có. Công cụ này miễn phí sử dụng và không yêu cầu đăng ký.