このページにはアフィリエイト広告が含まれます。

UIパーツ・非テキストコントラスト比チェッカー

WCAG 2.1 達成基準 1.4.11（非テキストのコントラスト比 3.0:1 以上）および達成基準 1.4.3（テキスト比率）に準拠しているかをリアルタイム判定します。

カラーパラメータ設定

ボタンや入力欄が配置されている親要素の背景色
ボタン外枠、入力フォーム境界、アイコン自体の色
ボタンや入力フィールドの内側の塗りつぶし色
UIパーツ内部のラベルテキスト色
実務プリセット（クリックで反映）:
境界線 vs 背景 (非テキスト SC 1.4.11)
0.00:1
-
基準: 3.0:1 以上（ボタン外枠・入力欄視認性）
境界線 vs パーツ背景 (境界明瞭度)
0.00:1
-
パーツ内外の輪郭が識別可能か
文字 vs パーツ背景 (テキスト SC 1.4.3)
0.00:1
-
通常テキスト: 4.5:1 / 大文字: 3.0:1
文字 vs 背景 (枠外配置・透明パーツ時)
0.00:1
-
ゴーストボタンや透過背景での基準
UIレンダリング・プレビュー（リアルタイム適用）
WCAG 2.1 準拠 CSS定義 

      

    

  


  
  

    
[ 広告 ]

    

    
  


  
  

    
Webアクセシビリティ（JIS X 8341-3 / WCAG 2.1）実務資料・推薦機材

    

      

        

          Webアクセシビリティ 導入・改善の実務教本
          
JIS X 8341-3:2016およびWCAG 2.1適合レベルAAの達成要件、デザインシステムへの組み込み手法を解説した実務書。

        

        Amazon.co.jp
      

      

        

          カラーマネジメント対応高再現性モニター
          
正確なsRGB/Display P3カバレッジと輝度均一性を持つ制作現場標準モニター。コントラスト比判定の正確な視認検証に必須。

        

        Amazon.co.jp