♀

cek kontras warna

Uji beberapa pasangan warna teks/latar terhadap standar WCAG 2.1 AA dan AAA. Pratinjau langsung menunjukkan persis bagaimana teks akan tampak pada berbagai ukuran dan ketebalan.

Alat Desain Berjalan lokal Tidak ada data dikirim
WCAGaksesibilitasrasio kontrasa11y
Ekspor Pasangan Warna 

    

      
      
    

  


  


  


  

    💡
    

      WCAG AA memerlukan 4.5:1 untuk teks normal, 3:1 untuk teks besar (18pt atau 14pt tebal). WCAG AAA memerlukan 7:1 untuk teks normal, 4.5:1 untuk teks besar. Menargetkan AA adalah minimum hukum di sebagian besar regulasi aksesibilitas.
    

  


  



  

    
Apa itu cek kontras WCAG AA?

    
Periksa rasio kontras warna terhadap standar WCAG AA dan AAA. Uji beberapa pasangan warna teks/latar sekaligus. Gratis, berbasis browser, tanpa data dikirim.

  


  

    
Cara menggunakan cek kontras WCAG

    
    
      
  1. Masukkan warna latar depan (teks) dan warna latar belakang menggunakan pemilih warna atau dengan mengetik nilai HEX.
    2. 
      
  2. Alat ini langsung menghitung rasio kontras antara kedua warna.
    3. 
      
  3. Periksa hasil lulus/gagal AA dan AAA untuk teks normal dan teks besar.
    4. 
      
  4. Sesuaikan warna hingga kombinasi Anda memenuhi level WCAG yang dibutuhkan.
    5. 
      
  5. Salin nilai warna yang lulus untuk digunakan di CSS Anda.
    6. 
    

  






  
Alat Terkait

  

    👁️
simulator buta warna
Simulasikan protanopia, deuteranopia, tritanopia pada gambar apa pun

    🎨
color picker
Konversi warna antara HEX, RGB, HSL, dan CMYK

    🎨
buat palet warna
Buat palet warna komplementer, analog, dan triadik

  






  
    Pahami Kontras WCAG AA
    ▾
  
  

    

      Contoh
      

        

          

            Input
            Warna latar depan #1F2937 pada latar belakang #FFFFFF
          

          

            Output
            Lulus WCAG AA untuk teks normal dan teks besar
          

        

      

    

    

      Kasus Penggunaan Umum
      

        
    
          
  • Periksa warna teks terhadap WCAG AA sebelum peluncuran
    • 
          
  • Tinjau regresi aksesibilitas pada token sistem desain
    • 
          
  • Verifikasi kontras judul dan teks isi secara terpisah
    • 
          
  • Serahkan pasangan warna yang sesuai standar ke tim produk
    • 
        

      

    

    

      Pertanyaan yang Sering Diajukan
      

        
Apa perbedaan antara AA dan AAA?
AA adalah tingkat kepatuhan standar yang diwajibkan oleh sebagian besar regulasi. AAA adalah tingkat lanjutan —tidak diwajibkan untuk semua konten, tetapi meningkatkan keterbacaan.

        
Apakah ini memeriksa kontras non-teks?
WCAG 1.4.11 mewajibkan kontras 3:1 untuk komponen UI dan elemen grafis —pemeriksa ini mencakup persyaratan tersebut.

        
Apa fungsi cek kontras warna - Uji Batch AA/AAA?
Fitur cek kontras warna - Uji Batch AA/AAA berjalan sepenuhnya di browser Anda dan membantu Anda menyelesaikan tugas ini tanpa mengunggah data ke server.

        
Apakah cek kontras warna - Uji Batch AA/AAA gratis digunakan?
Ya. Alat ini gratis digunakan dan tidak memerlukan pendaftaran.