色を選ぶ前にテキストのコントラストを確認する

パレットで見栄えのする緑色でも、小さなラベルでは読みにくいことがあります。デザイン全体に使う前に、テキストの色と背景色を一緒に確認してください。

ここでは、カラースタジオで再現できる4つの組み合わせを紹介します。3番目は2番目とまったく同じ緑色を使っていますが、背景だけが異なります。

背景の変更で合格が不合格に変わる

サンプル2と4は、通常のテキストのWCAG AAコントラストしきい値を満たしています。サンプル1と3は満たしていません。ここに表示されている数値は表示用に丸められています。チェックでは計算された完全な値が使用されます。

背景を白からクリーム色に変えたことで、サンプル2は不合格になりました。サンプル4では緑を暗くすることで、しきい値を再び上回りました。これらはサンプルの色であり、この配色をそのまま使う必要はありません。CSSをダウンロードして、自分のレイアウトで試してみてください。

テキストのサイズも確認する

WCAGのテキストコントラストガイダンスでは、レベルAAの通常のテキストに最低4.5:1の比率を設定しています。大きいテキストのしきい値は3:1と低くなっています。「大きい」とは、通常のテキストで少なくとも24 CSSピクセル、太字テキストで約18.67 CSSピクセルを意味します。

この区別は、見出しの下にある小さなラベルにとって重要です。色の組み合わせは見出しでは合格しても、ラベルでは不合格になることがあります。実際に表示されるサイズでそれぞれを判断してください。ソーシャル画像がフィードで縮小される場合も含みます。

不合格の値を切り上げて合格にしないでください。4.499:1の結果は、依然として4.5:1を下回っています。

ツールで4つの組み合わせを試す

1. カラースタジオを開き、コントラストを選択します。
2. テキストの色と背景色に最初の組み合わせを入力します。
3. 通常のテキストAAを確認し、次に大きいテキストAAと比較します。
4. 他の組み合わせでも繰り返します。サンプル2と3では、背景だけを変更して、両方の値が重要な理由を確認してください。
5. 選択した組み合わせを実際のデザインに適用し、最終的なサイズで読み取ります。大きなサンプル見出しだけでなく、小さなラベルやリンクも確認してください。

スマートフォンでは、プレビューと設定が順番に表示されます。チェックはデスクトップと同じ値を使用します。

単色は出発点にすぎない

チェッカーは、不透明な2つの単色を比較します。写真やグラデーションのテキストの背後にあるすべてのピクセルを検査したり、部分的に透明なオーバーレイを考慮したりすることはありません。文字の下の最も明るい部分と最も暗い部分を確認するか、テストできる色のテキスト用の無地パネルを用意してください。

ライトテーマとダークテーマの両方を提供している場合は、両方でデザインを試してください。白いカードで合格しても、ダークメニュー上の同じテキストについては何も保証されません。細い文字は比率が示すよりも読みにくい場合があるため、ぎりぎりの合格を目指すのではなく、最小値より少し余裕を持たせてください。

確認した内容

2026年10月5日に、4つの組み合わせすべてをカラースタジオと同じコントラスト関数で実行しました。結果ファイルには、正確な比率とAAの判定が記録されています。ダウンロード可能なCSSとイラストは、同じ色の値を使用しています。

これはテキストのコントラストをチェックするものであり、ページ全体のアクセシビリティをチェックするものではありません。キーボードアクセス、ラベル、読み上げ順序、またはコンテンツを誰かが理解できるかどうかは評価されません。