（バリアブルは一旦忘れてヨシ）
バリアントの活用
長方形とフレームとセクションの使い分け
レイヤーには名前をつけよう
WCAG（Web Content Accessibility Guidelines）は、Webコンテンツを誰もが利用しやすいようにするための国際的なガイドラインです。
障害の有無や年齢、デバイスの種類などにかかわらず、より多くのユーザーがWebを利用しやすくなるよう、さまざまな基準が定義されています。
現行の正式版は「WCAG 2.1」が主流で、今後「WCAG 2.2」や「WCAG 3.0」なども検討されています。
また、これらのガイドラインは国内外で参照・法制化されることが多く、日本でもJIS X 8341-3の基準として取り入れられています。
WCAGにおけるコントラスト比とは、「前景（文字）と背景の相対的な明度差を示す数値」のことです。
コントラスト比は 1:1（同じ色）から 21:1（最大の差）までの範囲で表されます。
色の明度や彩度を加味した数式で計算され、視認性・判読性に大きく関わってきます。
4.5:1 は、WCAGのレベルAAを満たす「通常の文字（小さい文字）」向けの最小コントラスト比です。
以下にWCAGで定義されている主なコントラスト比の基準を示します。
小さい文字を読みやすくするためには 4.5:1 以上が必要とされ、大きな文字であれば 3:1 でも判読性が確保しやすいとされています。
視力が弱い方や色弱の方、高齢者の方など、コントラストが低いと文字や情報を判読しにくいユーザーが一定数存在します。
4.5:1は「多くの人が文字を判読できる最低限のコントラスト」として国際的な標準になっています。
また、ディスプレイの品質や周囲の明るさによっては、コントラストが実際より低く見える場合もあるため、事前に4.5:1以上を確保しておくことが大切です。
前景色（文字色）と背景色のカラーコードを入力すると、自動的にコントラスト比を算出してくれるツールが多数存在します。
既存のWebページをブラウザ拡張機能で直接チェックし、文字色と背景色のコントラストを測定する方法もあります。
背景がグラデーションや画像の場合は、文字直下にある色を正しく取得し、コントラストを確認するようにしましょう。
「薄いグレー背景 × 濃いグレー文字」などは一見落ち着いた配色に見えますが、コントラストが足りないケースが多いです。
白背景の場合でも #666 や #777 などは不十分になることがあるので、#333 などの濃い文字色を検討しましょう。
見出しやキャッチコピーなどはフォントサイズを大きくして、3:1でもAA基準を満たすことを狙えます。
ただし、小さい文字では4.5:1以上を確保するように注意してください。
文字の背後に画像を置く場合は、半透明オーバーレイなどを使い、文字と背景とのコントラストが十分になるよう工夫します。
背景と文字が同系色の場合は彩度や明度を大きく変えてコントラストをつけましょう。
コントラスト比が十分でも、色弱のタイプによっては見分けにくい配色があります。
例えば赤と緑の組み合わせは要注意です。
色弱シミュレーターを使い、複数の見え方を検証すると効果的です。
4.5:1 はWCAGレベルAAで定める、通常サイズの文字に対する最低限のコントラスト比です。
多くのユーザーが文字を読みやすくするため、まずは4.5:1を目標にしましょう。
大きな文字なら3:1でも基準を満たせる場合がありますが、さらに読みやすくしたい場合は7:1を目指す選択肢もあります。
コントラストチェッカーなどのツールを活用し、実際の閲覧環境での見やすさも検証することが重要です。
デザインの美しさと読みやすさを両立させるために、アクセシビリティを意識した配色を心がけてください。