高コントラストのカラーパレット：コントラスト比を検証済み

高コントラストのカラーパレット

WCAGのコントラスト比付き高コントラストカラーパレット | We.Inc

文字とボタンの全組み合わせをWCAG 2.2で検証した、オリジナルの高コントラストカラーパレット5種。色を調整してCSSをコピーできるテスター付きです。

高コントラストのパレットとは、背景の上でも文字が読みやすいブランドカラーの組み合わせです。WCAG 2.2では、これを1:1から21:1までの比率で測ります。本文の文字にはレベルAAで4.5:1以上、AAAで7:1以上が必要で、大きな文字では3:1と4.5:1です。ここで紹介するパレットは、すべての組み合わせの比率を掲載しています。

WCAG 2.2のコントラスト最低基準

多くの配色サイトはきれいな色見本を並べて見せるだけで、その上に置いた文字が読めるかどうかは何も教えてくれません。以下の各パレットでは、色ごとに役割（背景、文字、補助テキスト、アクセント、アクセント上の文字）を割り当て、実際にページで組み合わせる色同士を検証しています。

よくある質問

どのくらいのコントラスト比なら高コントラストと言えますか？

高コントラストと呼ばれる公式の基準線は1つではありません。WCAGのレベルAAは通常の文字に4.5:1、レベルAAAは7:1を求めているため、多くのデザイナーは本文の7:1を高コントラストの目標としています。

どのサイズからが大きな文字ですか？

WCAGでは、18ポイント以上、または14ポイント以上の太字を大きな文字として扱います。W3Cの解説では、CSSピクセルでおよそ24pxと18.5pxに相当するとしています。

4.47を4.5に切り上げてもよいですか？

いいえ。W3Cは比率を四捨五入しないとしているため、4.499:1の組み合わせは4.5:1を満たしません。そのためテスターは値を切り捨てて表示します。

ボタンやアイコンにもコントラストが必要ですか？

はい。WCAG 2.2の達成基準1.4.11では、操作部品や意味のあるグラフィックと、それに隣接する色との間に3:1以上を求めています。

ロゴも基準を満たす必要がありますか？

いいえ。1.4.3では、ロゴやブランド名の一部である文字にコントラストの要件はありません。ただし、その周りにあるページ上の他の要素には引き続き要件があります。

5つの色見本ではなく5つの役割にする理由

パレットを自社ブランドに合わせる

5つのパレットとコントラスト比

比率はWCAG 2.2の計算式で算出し、小数点以下2桁で切り捨てて表示しています。

5つのパレットで検証したすべての組み合わせ

パレットをCSSで使う

「紙にインク」をCSSカスタムプロパティで

変数名は色ではなく役割で付けましょう。そうすれば、後でパレットを入れ替えるときも1行につき1か所の編集で済みます。

JavaScriptで書いたコントラストの計算式

テスターと同じ計算を、W3Cの相対輝度の定義に沿って書いたものです。

パレットテスター

パレットを選び、好きな色を変更してください。入力するたびにすべての組み合わせを再検証します。

元にするパレット

紙にインク

夜勤

森の台帳

港の青

温かな粘土

背景

本文の文字

補助テキスト

アクセント上の文字

このパレットの各組み合わせのコントラスト

{a} / {b}

合格

不合格

16進カラーコードではありません

営業時間

火曜日から土曜日、9時から5時まで営業。正午までは予約なしでもご来店いただけます。

祝日は休業です。

来店を予約する

CSS変数をコピー

コピーしました。

コピーできませんでした。コードを選択して手動でコピーしてください。

{n}組すべてが本文のAAを満たしています。

{n}組のうち{k}組が本文の4.5:1に届いていません。

すべての計算はブラウザー内で行われます。

無料で始める · クレジットカード不要

関連: ガイド｜Webマーケティングと集客を学ぶ

製品

ご利用いただける方

機能

リソース

会社情報

サイトマップを見る