目次
目次
コントラスト比とは何ですか？
Framerを使用すると、ウェブサイトのデザインとそれを使用するユーザーの体験を設計できます。ただし、サイトをローンチする前に、コントラスト比がウェブアクセシビリティ基準を満たしていることを確認することをお勧めします。
コントラスト比は、二つの色、一般的に前景（テキストやグラフィック）と背景の間の明るさの差を測定したものです。この比率は1:1から21:1までの尺度で測定され、数値が高いほどコントラスト比が高いことを意味します。十分なコントラスト比はコンテンツの可読性と視認性を保証します。特に視覚障害、色覚異常、またはその他の認知関連の困難を抱えるユーザーにとって非常に重要な要素です。
コントラスト比に関するWCAGガイドライン
ウェブコンテンツアクセシビリティガイドライン（Web Content Accessibility Guidelines, WCAG）では、アクセシビリティの高いデジタル体験を支援するため、具体的なコントラスト比の推奨事項を提供しています。
WCAG 2.1 によると、レベル AA 準拠のためには以下の最小コントラスト比を満たす必要があります。
通常のテキスト：最小 4.5:1
18pt または 14pt の大きなテキスト：最小 3:1
ウェブサイトを公開する前に、以下のコントラスト比検査ツールのいずれかを使用してコントラスト比を確認してください。
WCAGアクセシビリティの理解
WCAGはウェブアクセシビリティガイドラインを3つのレベル（レベルA、AA、AAA）に分けて提示しています。これらのレベルはコンテンツのアクセシビリティを保証する基準の強さを示します。Framerでデザインを行う際には、どのレベルを目標とするべきか確認してください。
WCAGの3つのアクセシビリティレベル
レベルA：基本的なアクセシビリティを満たすレベルです。例えば、画像に代替テキストを提供するなど、最も基本的な要件が含まれます。
レベルAA：大多数のユーザーがアクセスできる基準であり、多くのデジタルサービスが標準として目指すレベルです。強調する明暗比（本文4.5:1、大きなテキスト3:1）がまさにレベルAAの基準です。
レベルAAA：すべてのユーザーがアクセスできるようにする非常に厳格な基準です。動画に手話（手話字幕）を提供したり、本文テキストのコントラスト比を7:1の高コントラストに設定するなど、高水準の要件が含まれます。このレベルはすべてのウェブサイトに適用するのが難しい場合があるため、ご注意ください。
レベルAAの核心基準
ウェブアクセシビリティの様々な要素の中で、コントラスト比（Contrast Ratio）はユーザーがコンテンツを容易に読めるように支援する非常に重要な要素です。大多数のユーザーを考慮するレベルAAガイドラインを改めて具体的に確認しましょう。
本文テキストのコントラスト比：テキストと背景間のコントラスト比は、最低4.5:1以上を維持しなければなりません。これは一般的なテキストの可読性を確保するための基準です。
大きなテキストのコントラスト比：テキストと背景間のコントラスト比は、最低3:1以上を維持しなければなりません。大きなテキスト（18pt以上のサイズまたは14ptボールド以上のテキスト）はサイズのおかげでコントラストがそれほど重要でない場合もありますが、十分な可読性を確保するためにこの基準を満たす必要があります。
このコントラスト比基準を遵守することで、視覚的アクセシビリティが向上し、様々なユーザーがあなたのコンテンツをより読みやすくなるでしょう。該当基準を満たし、ユーザーにより高いアクセシビリティを提供してください。
よくある質問(FAQ)
Q. Framerにはコントラスト比チェックを自動で行う機能が組み込まれていますか？
いいえ。Framer自体にリアルタイムのコントラスト比チェッカーは組み込まれていません。Framerは主にデザインとウェブサイト構築に重点を置いていますが、現在記事で言及されているWebAIM Contrast Checkerのような外部ツールを使用して、カラーパレットとテキストの組み合わせを確認する必要があります。
Q. レベルAAA基準を満たすとウェブサイトはより良くなりますか？
はい、レベルAAAは最高レベルのアクセシビリティを提供しますが、その基準は非常に厳格であるため、ウェブサイトのデザインや特定の機能実装に大きな制約となる場合があります。そのため、レベルAAを標準として目指すことが一般的です。
Q. Framerではロゴや画像などの要素にもコントラスト比基準を適用する必要がありますか？
いいえ。コントラスト比基準は基本的にテキストの可読性を保証するために設計されています。したがって、テキスト以外の要素の中でも情報伝達を目的としない場合は、必ずしもコントラスト比基準を適用する必要はありません。
本記事はFramer公式ブログの 'Understanding contrast ratio'を翻訳・脚色したコンテンツです。
