SYNCERのロゴ
アイキャッチ画像

色のコントラストチェッカー

「Web Content Accessibility Guidelines (WCAG) 2.0」に基づいた、最適な文字色と背景色の組み合わせを見つけるためのウェブサービスです。

確認

背景色と文字色をそれぞれのフォームに入力すると、色のコントラストを計算します。

背景色

文字色

結果

項目
背景色#2660a1
文字色#ffffff
コントラスト比6.421617658233243
通常文字 (22px未満)AA
巨大文字 (22px以上)AAA
太文字 (14px以上)AAA

通常文字(22px未満)は、4.5 以上でAA、 7 以上でAAAです。

巨大文字(22px以上)は、3 以上でAA、 4.5 以上でAAAです。

太文字(14px以上)は、3 以上でAA、 4.5 以上でAAAです。

Web Content Accessibility Guidelines (WCAG) 2.0

Web Content Accessibility Guidelines (WCAG) 2.0とは、ウェブコンテンツをよりアクセシブルにするための一定の基準を設けたガイドラインで、従うことで人々にとって利用しやすいウェブサイトとなります。達成レベルとして、AA(達成)、AAA(高いレベルで達成)があります。その中で、色のコントラスト比は次のように定められています。

文字の種類AAAAA
通常文字 (22px未満)4.5 以上7 以上
巨大文字 (22px以上)3 以上4.5 以上
太文字 (14px以上)3 以上4.5 以上
最低限のコントラスト
オープングラフ画像
Web Content Accessibility Guidelines (WCAG) 2.0の項目、1.4.3の「色のコントラスト」に関する説明が掲載されています。

ヒント

基本的な操作

  • 背景色と文字色、それぞれのフォームに色を入力して下さい。文字色と背景色のコントラスト比を計算して表示します。
  • 各フォームの右側にあるボタンをクリックすると、カラーピッカーが表示されます。
  • 背景色と文字色の組み合わせが実際にどのように見えるか、デモが表示されます。

判定結果について

  • チェックをすると、判定結果の表が更新されます。
  • 「コントラスト比」は、背景色と文字色のコントラスト比です。
  • 「AA」は適切な組み合わせ、「AAA」は高いレベルの組み合わせです。

適切な文字色候補

  • チェックをすると、デモの下部に背景色に適した文字色の候補が表示されます。
  • コントラスト比の高い順に表示されるので、文字色を決めるのにぜひ、ご利用下さい。