同人サイトのカラーコントラストチェック(2024年版)

当記事は元々ファンアートや小説を置いているサイト(以下:同人サイト)用に書いたものなので、もしかすると分かりづらい点があるかもしれません。何卒ご容赦いただけますと幸いです。

同人サイトの配色を変更したので、カラーコントラストチェックを行いました。色のアクセシビリティは比較的素人でも手を出しやすい領域だと思うのですが、チェック結果を出している個人サイトをほとんど見たことがなかったため、ないよりはあった方が良いと思い、noteでも公開することにしました。

使用ツール：カラーコントラストチェッカーアナライザーツール｜Adobe
参考：ウェブアクセシビリティ導入ガイドブック｜デジタル庁

裏サイトの配色

#565656：本文の文字色
#fff：メインコンテンツの背景色。ボタンなどの文字色としても使用
#d8e3e7：ヘッダー・フッター等で使用している背景色。背景画像の色を抽出している
#6473B0：見出しの装飾などに使用
#828ebf：ボタンの基本色
#465BB0：リンクで使用している色
#DFE8EE：フッターウィジェットで使用
#666666：ページネーションで使用

チェック結果

※「文字色×背景色：判定」の形で記載しています

#565656×#fff：AAA
#565656×#d8e3e7：AA
#6473B0×#fff：AA
#6473B0×#d8e3e7：NG (使用機会なし)
#465BB0×#fff：AA
#465BB0×#d8e3e7：AA
#666666×#fff：AA
#666666×#d8e3e7：NG (使用機会なし)
#465BB0×#DFE8EE：AA
#565656×#d8e3e7：AA
#fff×#6473B0：AA
#fff×#828ebf：NG
#fff×#465BB0：AA

使用ツール：カラーコントラストチェッカーアナライザー(Adobe)

結果は概ね問題なし。一番使用機会が多い#565656×#fffでは無事にAAAを取れています。
本当はリンク色でもAAAを目指した方が良いのですが、デザインとのバランスや、隣接する#565656との見分けやすさを考えて上記のままに留めておくことにしました。
（代わりにリンク文字の下にラインを引くよう設定しています）

NGになった組み合わせは使用していないものがほとんどでしたが、#fff×#828ebfは使用機会が多いので改善の必要がありそうです。
文字色×背景色のコントラストの解決自体は難しくないのですが、ホバーやフォーカスしている時に使用する#465BB0との見分けやすさも考える必要があるのが難点。