Template:Greater color contrast ratio

ナビゲーションに移動 検索に移動
テンプレートの解説[表示] [編集] [履歴] [キャッシュを破棄]

このテンプレートは、コントラスト比の大きな色のペア (color1/color2 または color1/color3) を決定します。これは、前景色/背景色のペアを選択するときに便利です。アクセシビリティのためのW3Cのガイドライン (WCAG 2.0解説) では、大きなテキストの場合は3以上、通常サイズのテキストの場合は4.5以上のコントラスト比が必要です。 デフォルトモード (color2が白、color3が黒) で使用すると、選択した色のペアのコントラスト比は常に4.58を超えます。

使い方[編集]

書式[編集]

{{Greater color contrast ratio|color1|color2|color3|bias=|css=}}

[編集]

  • <span style="{{Greater color contrast ratio|#CCCCFF|brown|yellow|css=y}}">#CCCCFF</span>#CCCCFF
  • <span style="{{Greater color contrast ratio|#2222FF|brown|yellow|css=y}}">#2222FF</span>#2222FF
  • <span style="{{Greater color contrast ratio|#2222FF|css=y}}">#2222FF</span>#2222FF
  • <span style="{{Greater color contrast ratio|#4444FF|css=y}}">#4444FF</span>#4444FF
  • <span style="{{Greater color contrast ratio|#6666FF|css=y}}">#6666FF</span>#6666FF
  • <span style="{{Greater color contrast ratio|#8888FF|css=y}}">#8888FF</span>#8888FF
  • <span style="{{Greater color contrast ratio|green|css=y}}">green</span>green
  • <span style="{{Greater color contrast ratio|orange|css=y}}">orange</span>orange
  • <span style="background: navy; color: {{Greater color contrast ratio|navy}};">navy</span>navy
  • <span style="{{Greater color contrast ratio|#CC5500|bias=0|css=y}}">#CC5500</span>#CC5500
  • <span style="{{Greater color contrast ratio|#CC5500|bias=1|css=y}}">#CC5500</span>#CC5500

引数[編集]

引数の一覧
引数 指定内容 既定値 説明
1 color1  
2 color2 #FFFFFF
3 color3 #000000
bias 1 0 コントラスト比の最小値を下げる。アクセシビリティ基準を満たさなくなる可能性があるので注意。
css y n Cascading Style Sheetsで出力する場合は y を指定。

関連項目[編集]