無料ツールでコントラストを確認する
公開前に実際の色を測定します。
「無料ツールでコントラストを確認する」はCoddyKit上の無料Web Accessibility Academyレッスンです。 これはレッスン4/4です。 下記で完全なレッスンを無料で読むことができます。その後、ブラウザ内の組み込みコードエディタと24時間対応のAIチューターでハンズオン演習できます。 これはWeb Accessibility Academy学習パスの一部であり、ウェブとCoddyKitアプリ全体で進捗が同期されます。 Web Accessibility Academyコースには全4レッスンが含まれています。
推測をやめて測定する
コントラストを目視で判断する必要はありません。無料のツールを使えば、2色から正確な比率を計算し、基準を満たしているかをすぐに確認できます。
WebAIM Contrast Checker
WebAIM Contrast Checkerは定番のツールです。前景色と背景色を入力すると、コントラスト比に加えてAAおよびAAAの合格判定が表示されます。
合格と不合格を読み取る
優れたツールでは、通常のテキストと大きなテキストについて、それぞれの結果にPassまたはFailと表示されます。どの基準をクリアしたのかを正確に把握できます。
Chrome DevToolsに組み込まれている機能
ブラウザー上で、DevToolsのカラーピッカーを使うと、色を調整しながらコントラスト比とAA基準の位置をリアルタイムで確認できます。
実際に描画された色を調べる
DevToolsは実際に描画されたcomputedの色と背景色を読み取ります。そのため、想定した値ではなく、実際のピクセルをテストできます。
axeでページ全体をスキャンする
axe DevToolsまたはLighthouseを実行すると、ページ全体を一度にスキャンできます。色の組み合わせを1つずつ確認するのではなく、コントラスト不足の要素をすべて検出します。
画面から色を選ぶ
多くのチェッカーにはスポイト機能があり、16進数コードを探さなくても、公開中のサイトやモックアップから直接色を取得できます。
デザインツールにも搭載されている
Figmaなどのアプリにはコントラストプラグインが用意されています。そのため、コードを書くずっと前のデザイン段階で問題を見つけられます。
グラデーションに注意する
ツールが確認するのは単色同士の組み合わせです。グラデーションや画像の上では、テキストのコントラストが一部分だけ不足することがあるため、最も悪い箇所を手動で確認してください。
ツール上で修正する
多くのチェッカーでは、合格するまで色を少しずつ調整できます。基準を満たした16進数カラーを、そのままCSSに貼り戻せます。
使用する色をテストする
スタイルシートで実際に使用している16進数値をチェッカーに入力し、公開前にこの組み合わせが4.5:1をクリアしていることを確認してください。
p {
color: #767676;
background: #ffffff;
}クイックチェック
ブラウザーを離れずにコントラストをテストできる場所を選んでください。
振り返り：公開前に測定する
WebAIM、DevTools、axeなど、コントラストを明確な合格・不合格に変えてくれる無料のツールを学びました。実際の色を測定し、公開前に問題を修正してください。✅
AI チューターと学ぶ HTML — 無料
ブラウザでリアルコードを書いて実行し、24/7 の AI チューターから瞬時にサポートを受け、ウェブまたはアプリで続きから学習できます。
- コース
- 30
- レッスン
- 120
よくある質問
「無料ツールでコントラストを確認する」レッスンは無料ですか？
はい。「無料ツールでコントラストを確認する」の完全なテキストはこのウェブで無料で読めます。インタラクティブに演習し（組み込みコードエディタと24時間対応のAIチューター）、Web Accessibility Academyコースの残りをアンロックするには、CoddyKit PROにアップグレードしてください。 Web Accessibility Academyコースには全4レッスンが含まれています。
「無料ツールでコントラストを確認する」で何を学びますか？
公開前に実際の色を測定します。 ブラウザで直接実行するハンズオンコードでWeb Accessibility Academyを演習し、24時間対応のAIチューターがレッスンを進める中での質問に答えます。
Web Accessibility Academyを始めるのに経験は必要ですか？
事前経験は必要ありません。CoddyKitのWeb Accessibility Academyは初級者から上級者向けに構成されているため、ここから始めるか最初から始めて、自分のペースで進むことができます。 これはレッスン4/4です。
「無料ツールでコントラストを確認する」レッスンにはどのくらい時間がかかりますか？
ほとんどのCoddyKitレッスンは約5～10分かかります。各レッスンはコンパクトでインタラクティブなので、着実に進歩し、ウェブとアプリ全体で正確に前回の場所から再開できます。
このWeb Accessibility Academyレッスンでコードを書いて実行できますか？
はい。すべてのWeb Accessibility Academyレッスンに組み込みコードエディタが含まれているため、ブラウザでリアルコードを書いて実行し、即座のAIフィードバックを取得できます。ローカル設定は不要です。
このコースのすべてのレッスン
- コントラスト比が存在する理由
- AAを満たす：通常サイズと大きな文字のしきい値
- 色だけに頼らない
- 無料ツールでコントラストを確認する