0Pricing
Web Accessibility Academy · レッスン

AAを満たす：通常サイズと大きな文字のしきい値

本文と大きな文字に必要な最低コントラスト比を把握します。

「AAを満たす：通常サイズと大きな文字のしきい値」はCoddyKit上の無料Web Accessibility Academyレッスンです。 これはレッスン2/4です。 下記で完全なレッスンを無料で読むことができます。その後、ブラウザ内の組み込みコードエディタと24時間対応のAIチューターでハンズオン演習できます。 これはWeb Accessibility Academy学習パスの一部であり、ウェブとCoddyKitアプリ全体で進捗が同期されます。 Web Accessibility Academyコースには全4レッスンが含まれています。

AA基準を目指す

多くのチームは、コントラストについてWCAGのLevel AAを目標にします。実際のユーザーを支援できる厳しさがあり、現実的に公開できる基準でもあります。

通常の文字：4.5対1

本文の場合、AAでは少なくとも4.5:1が求められます。段落、ラベル、ページ上のほとんどの文字が対象です。

大きな文字の定義

大きな文字とは、通常の太さで24px、または太字で18.66px以上の文字です。このサイズなら読みやすいため、ルールが緩和されます。

大きな文字：3対1

大きな文字に必要なのは3:1だけです。形が大きく視覚的な重みがあるため、明るさの差が小さくても明確に読めます。

太字ならサイズ基準が下がる

太さも重要です。太字の文字は、線が太く目で捉えやすいため、18.66pxという小さいサイズでも大きな文字として扱われます。

ポイントとピクセル

WCAGでは大きな文字を18pt、または太字の14ptと定義しており、CSSでは24pxと18.66pxに相当します。通常、ツールが変換してくれます。

UIコンポーネント：3対1

基準1.4.11では、ボタン、入力欄、フォーカスインジケーターは周囲に対して3:1を満たす必要があります。これにより、コントロールが見える状態を保てます。

AAAはさらに厳しい

より高い保証が必要ですか？AAAでは、通常の文字を7:1、大きな文字を4.5:1に引き上げます。ただし、ほとんどの製品はAAを基本目標にします。

無効状態とロゴは対象外

いくつかのものはルールの対象外です。無効状態のコントロール、純粋な装飾、ブランドロゴには、最低コントラスト要件がありません。

プレースホルダーも対象

薄いグレーのplaceholderも実際の文字なので、4.5:1を満たす必要があります。初期値の多くは基準を満たさないため、意図的に濃くしてください。

CSSで大きな文字を指定する

この見出しは大きな文字のサイズなので、AAに合格するには3:1の比率で十分です。

h2 {
  font-size: 24px;
  font-weight: 400;
}

簡単な確認

さまざまな文字に必要なAAの数値を確認しましょう。

まとめ：AAを満たす

組み合わせを覚えておきましょう。通常の文字は4.5:1、大きな文字やUIパーツは3:1です。これらを満たせば、コントラストはAAに合格します。次は、色だけに頼らない方法です。🎯

よくある質問

「AAを満たす：通常サイズと大きな文字のしきい値」レッスンは無料ですか？

はい。「AAを満たす：通常サイズと大きな文字のしきい値」の完全なテキストはこのウェブで無料で読めます。インタラクティブに演習し（組み込みコードエディタと24時間対応のAIチューター）、Web Accessibility Academyコースの残りをアンロックするには、CoddyKit PROにアップグレードしてください。 Web Accessibility Academyコースには全4レッスンが含まれています。

「AAを満たす：通常サイズと大きな文字のしきい値」で何を学びますか？

本文と大きな文字に必要な最低コントラスト比を把握します。 ブラウザで直接実行するハンズオンコードでWeb Accessibility Academyを演習し、24時間対応のAIチューターがレッスンを進める中での質問に答えます。

Web Accessibility Academyを始めるのに経験は必要ですか？

事前経験は必要ありません。CoddyKitのWeb Accessibility Academyは初級者から上級者向けに構成されているため、ここから始めるか最初から始めて、自分のペースで進むことができます。 これはレッスン2/4です。

「AAを満たす：通常サイズと大きな文字のしきい値」レッスンにはどのくらい時間がかかりますか？

ほとんどのCoddyKitレッスンは約5～10分かかります。各レッスンはコンパクトでインタラクティブなので、着実に進歩し、ウェブとアプリ全体で正確に前回の場所から再開できます。

このWeb Accessibility Academyレッスンでコードを書いて実行できますか？

はい。すべてのWeb Accessibility Academyレッスンに組み込みコードエディタが含まれているため、ブラウザでリアルコードを書いて実行し、即座のAIフィードバックを取得できます。ローカル設定は不要です。

このコースのすべてのレッスン

  1. コントラスト比が存在する理由
  2. AAを満たす：通常サイズと大きな文字のしきい値
  3. 色だけに頼らない
  4. 無料ツールでコントラストを確認する
← Web Accessibility Academyに戻る