SYNCER

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

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

公開日:

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

コントラストを確認する

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

判定結果
背景色#2660a1文字色#fff
コントラスト比6.4:1限界〜6.4:1
通常文字AA巨大文字・太文字AAA

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

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

太文字(14px以上)は、3:1 以上でAA、 4.5:1 以上で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」は高いレベルの組み合わせです。

    適切な文字色候補

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