aXe の Error Elements must have sufficient color contrast エラーについて


aXe で出力される Error Elements must have sufficient color contrast という警告について気になったので、調べてみました。
結果を以下に記載します。


警告の意味

テキストと背景色のコントラストが足りないという警告になります。 以下のコントラストチェッカーに記載されている説明が非常にわかりやすいです。

aXe は、AAレベル 以上のコントラストがないと、警告になります。


どのように修正したか?

以下、Color Contrast Cheker を使って、対象箇所の色の補正を行いました。
WebAIM: Color Contrast Checker


参考

WCAG 2.0 の解説の日本語訳がありましたので、リンクしておきます。

以上です。

コメント