メインコンテンツへスキップ
Tooletto

カラーコントラストチェッカー

カラーピッカー・コンバーターのプリセット

テキストの色が背景に対してWCAG 2.1の閾値に照らして読みやすいかをチェックします。コントラストはWebで最もよくあるアクセシビリティの失敗であり、同時に最も直しやすいものでもあります — 通常は色を少し暗くするだけです。

  • ファイルは端末の外に出ません
  • 無料、登録不要
  • 透かしなし
  • 一度読み込めばオフラインでも動作します
Loading tool…

カラーピッカー・コンバーターの使い方

  1. 1

    色を選ぶ

    カラースウォッチを使うか、HEXまたはRGB値を直接入力します。

  2. 2

    どの形式もコピー

    HEX、RGB、HSL、HSV、CMYKがすべて同時に表示されます。

  3. 3

    コントラストをチェック

    背景色を設定してテキストがWCAG AAとAAAに合格するか確認します。

コントラストがWebで最もよくあるアクセシビリティの失敗である理由

自動化されたアクセシビリティ監査は、スキャンされたWebサイトで一貫して不十分なカラーコントラストを最も頻繁な単一の違反として発見しており、他のすべてのアクセシビリティ問題のカテゴリを合わせたものより多いです — そして、修正に構造的またはセマンティックなマークアップの変更が必要な多くのアクセシビリティ問題とは異なり、コントラストの失敗は通常、ページの構造、マークアップ、デザインをまったく変更する必要なく、色を少し暗くしたり明るくしたりするだけで解決します。この組み合わせ — 非常によくあるが、特定されれば比較的安価に修正できる — がまさに、公開後の完全なアクセシビリティ監査に検出を頼るのではなく、公開前に特定の色の組み合わせに専用のコントラストチェッカーを直接使う価値がある理由です。

AAとAAAの閾値、そしてどちらが実際に適用されるか

WCAGは異なる数値の閾値を持つ2つの適合レベルを定義しており、どちらが適用されるかは、プロジェクトがコミットしたレベルと、特定にチェックされているテキストのサイズの両方に依存します。ほとんどの法的アクセシビリティ要件と組織のポリシーが参照するAAレベルは、通常サイズのテキストに4.5:1の比率を要求しますが、18ptまたは14pt太字以上と定義される大きなテキストでは3:1に緩和されます。より大きなグリフは小さいものより低いコントラストでも読みやすいままだからです。より厳格な基準であるAAAレベルは、それぞれ同じ閾値を7:1と4.5:1に引き上げます。ほとんどのプロジェクトは実用的な基準としてAAを目指します。AAAは、より顕著な視力障害を持つユーザーを特に対象としたコンテンツのために予約されており、そこではより厳しい閾値が課す追加のデザイン上の制約に見合う価値があります。

よくある質問

HEX、RGB、HSLの違いは何ですか?

HEXとRGBは同じもの — 赤、緑、青をどれだけ混ぜるか — を異なる表記で表します。HSLは色相、彩度、輝度として再定式化し、これはずっと考えやすいです: 色を明るくするには3つを推測する代わりに1つの数値を変えるだけです。

コントラスト比は何を意味しますか?

2つの色の相対輝度を1(同一)から21(黒と白)のスケールで比較します。WCAGはAAレベルで通常のテキストに少なくとも4.5:1、大きなテキストに3:1を要求し、AAAでは7:1と4.5:1に上がります。

自分には問題なく見えるのに、なぜ私の色はコントラストに失敗するのですか?

比率は2つの色がどれだけ違って見えるかではなく、相対輝度から計算されるためです。輝度の似た2つの鮮やかな色 — たとえばオレンジと赤 — は違って見えますが輝度コントラストはほとんどありません。そしてこれは視力の弱い人や太陽の下の画面では読めなくなります。

CMYKへの変換は印刷用に正確ですか?

これは標準的な算術変換であり、カラーマネジメントされた結果というより出発点です。実際の印刷作業には特定の印刷機と用紙のためのICCプロファイルが必要です。CMYKは多くの鮮やかなRGB色をそもそも再現できないためです。