axe DevToolsを用いたチェック実施方法の例¶

axe DevToolsのインストールや基本的な使用方法については、axe DevToolsを使用したアクセシビリティー・チェックを参照してください。また、axe DevToolsのルールと当ガイドラインの対応も合わせて参照してください。

チェックID: 0021 ¶

テキストの表示色と背景色には、充分なコントラスト比が確保されている。

文字サイズが30px（22pt）以上の場合：3:1以上（[SHOULD] 4.5:1以上）

文字サイズが22px（18pt）以上で太字の場合：3:1以上（[SHOULD] 4.5:1以上）

その他の場合：4.5:1以上（[SHOULD] 7:1以上）

「要素には十分な色のコントラストがなければなりません」という問題が出ないことを確認する。

ただし、ガイドラインを満たしていない状態であっても、以下の場合は問題として表示されませんので注意が必要です。

マウスホバーなどで背景色やテキスト色が変化する場合の、変化後のコントラスト比が不足する場合
大きいテキストのコントラスト比が3:1以上4.5:1未満の場合
- freeeの場合日本語テキストを想定しているため、「大きいテキスト」を30px（22pt）以上または22px（18pt）以上の太字としているが、WCAGでは欧文テキストを想定して18pt以上または14pt以上の太字としているため、その間のサイズではコントラスト不足を検知できない
テキスト以外のコントラスト比が不足している場合
- アイコン、画像、画像化されたテキスト、ボタンやフィールドの枠線など
半透明な要素などが重なって違う色に見えている場合の、実際に見えている色のコントラスト比が不足する場合
要素が重なっていて背景色と前景色の特定が難しい場合