♀

WCAG コントラスト 確認

複数のテキスト/背景色の組み合わせをWCAG 2.1 AAおよびAAA基準でテストします。ライブプレビューで、異なるサイズとウェイトのテキスト表示を正確に確認できます。

デザインツール ローカルで実行 データは送信されません
WCAGアクセシビリティコントラスト比a11y
カラーペアをエクスポート 

    

      
      
    

  


  


  


  

    💡
    

      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. このツールは 2 つの色のコントラスト比を即座に計算します。
    3. 
      
  3. 通常テキストと大きいテキストについて、AA と AAA の合格/不合格結果を確認します。
    4. 
      
  4. 必要な WCAG レベルを満たすまで、色を調整します。
    5. 
      
  5. 合格した色の値をコピーして CSS で使用します。
    6. 
    

  






  
関連ツール

  

    👁️
色覚 シミュレーション
任意の画像で 1 型色覚、2 型色覚、3 型色覚をシミュレート

    🎨
カラーピッカー ツール
HEX、RGB、HSL、CMYK 間で色を変換します

    🎨
カラーパレット 生成
補色、類似色、トライアドのカラーパレットを生成します

  






  
    WCAG AA コントラストを理解する
    ▾
  
  

    

      例
      

        

          

            入力
            前景 #1F2937、背景 #FFFFFF
          

          

            出力
            通常テキストと大きいテキストで WCAG AA に合格
          

        

      

    

    

      一般的な使用例
      

        
    
          
  • ローンチ前にテキストの色が WCAG AA を満たすか確認
    • 
          
  • デザインシステムのトークンにおけるアクセシビリティの回帰を確認
    • 
          
  • 見出しと本文テキストのコントラストを個別に確認
    • 
          
  • 準拠したカラーペアをプロダクトチームへ引き渡す
    • 
        

      

    

    

      よくある質問
      

        
AA と AAA の違いは何ですか？
AA はほとんどの規制で要求される標準的な準拠レベルです。AAA は強化レベルで、すべてのコンテンツに必須ではありませんが、可読性を向上させます。

        
テキスト以外のコントラストも確認できますか？
WCAG 1.4.11 では、UI コンポーネントとグラフィカル要素に 3:1 のコントラストが求められています。このチェッカーはその要件に対応しています。

        
WCAG コントラスト 確認 - バッチ AA/AAA テストは何を行いますか？
WCAG コントラスト 確認 - バッチ AA/AAA テストは完全にブラウザ内で実行され、データをサーバーにアップロードせずにこのタスクを完了できます。

        
WCAG コントラスト 確認 - バッチ AA/AAA テストは無料で利用できますか？
はい。このツールは無料で使用でき、サインアップは不要です。