♀

WCAG 색 대비 검사

여러 텍스트/배경 색상 쌍을 WCAG 2.1 AA 및 AAA 표준에 대해 테스트하세요. 실시간 미리보기에서 다양한 크기와 굵기에서 텍스트가 어떻게 보이는지 정확히 확인할 수 있습니다.

디자인 도구 로컬에서 실행 데이터 전송 없음
wcag접근성대비율접근성
색상 쌍 내보내기 

    

      
      
    

  


  


  


  

    💡
    

      WCAG AA 일반 텍스트에는 4.5:1, 큰 텍스트(18pt 또는 14pt 굵게)에는 3:1이 필요합니다. WCAG AAA 일반 텍스트에는 7:1, 큰 텍스트에는 4.5:1이 필요합니다. 대부분의 접근성 규정에서 AA는 법적 최소 기준입니다.
    

  


  



  

    
WCAG AA 명도 대비 검사란 무엇인가요?

    
WCAG AA 및 AAA 표준에 대해 색 대비 비율을 확인하세요. 여러 텍스트/배경 색상 조합을 한 번에 테스트하세요. 무료, 브라우저 기반, 데이터 전송 없음.

  


  

    
WCAG 명도 대비 검사 사용 방법

    
    
      
  1. 색상 선택기를 사용하거나 HEX 값을 입력하여 전경(텍스트) 색상과 배경 색상을 입력하세요.
    2. 
      
  2. 이 도구는 두 색상 간의 대비율을 즉시 계산합니다.
    3. 
      
  3. 일반 텍스트와 큰 텍스트에 대한 AA 및 AAA 통과/실패 결과를 확인하세요.
    4. 
      
  4. 조합이 필요한 WCAG 수준을 충족할 때까지 색상을 조정하세요.
    5. 
      
  5. 통과한 색상 값을 복사하여 CSS에 사용하세요.
    6. 
    

  






  
관련 도구

  

    👁️
색맹 시뮬레이터
모든 이미지에서 적색약, 녹색약, 청색약을 시뮬레이션하세요

    🎨
색상 선택기
HEX, RGB, HSL, CMYK 간에 색상을 변환하세요

    🎨
색상 팔레트 생성
보색, 유사색, 삼색 팔레트를 생성하세요

  






  
    WCAG AA 명도 대비 이해
    ▾
  
  

    

      예시
      

        

          

            입력
            배경 #FFFFFF 위의 전경 #1F2937
          

          

            출력
            일반 텍스트와 큰 텍스트에 대해 WCAG AA를 통과합니다
          

        

      

    

    

      일반적인 사용 사례
      

        
    
          
  • 출시 전 WCAG AA 기준으로 텍스트 색상을 확인하세요
    • 
          
  • 디자인 시스템 토큰의 접근성 회귀를 검토하세요
    • 
          
  • 제목과 본문 텍스트의 명도 대비를 각각 확인하세요
    • 
          
  • 규격을 준수하는 색상 조합을 제품 팀에 전달하세요
    • 
        

      

    

    

      자주 묻는 질문
      

        
AA와 AAA의 차이점은 무엇인가요?
AA는 대부분의 규정에서 요구하는 표준 준수 수준입니다. AAA는 강화된 수준으로, 모든 콘텐츠에 요구되지는 않지만 가독성을 향상시킵니다.

        
이 검사는 비텍스트 대비를 확인하나요?
WCAG 1.4.11은 UI 구성 요소와 그래픽 요소에 3:1 대비를 요구합니다—이 검사기는 해당 요구 사항을 충족합니다.

        
WCAG 색 대비 검사 - 일괄 AA/AAA 테스트는 무엇을 하나요?
WCAG 색 대비 검사 - 일괄 AA/AAA 테스트는 전적으로 브라우저에서 실행되며, 데이터를 서버에 업로드하지 않고 이 작업을 완료하는 데 도움이 됩니다.

        
WCAG 색 대비 검사 - 일괄 AA/AAA 테스트는 무료로 사용할 수 있나요?
예. 이 도구는 무료로 사용할 수 있으며 가입이 필요 없습니다.