感覚的な『読みやすさ』を、客観的な『合格ライン』へ。背景と文字の色の組み合わせからコントラスト比を計算し、WCAG 2.1のAA/AAA適合判定と色覚多様性の見え方を同時に検証できます。
見出し：誰もが使いやすいデザイン
この文章はプレビュー用です。背景色と文字色の組み合わせを確認してください。 アクセシビリティに配慮した設計は、すべてのユーザーにとっての使いやすさに繋がります。
PASS
Req: 4.5:1
PASS
Req: 3.0:1
FAIL
Req: 7.0:1
PASS
Req: 4.5:1
PASS
Req: 3.0:1
目標の 4.5:1 を満たしています
色相と彩度を維持したまま明度だけを走査し、元の色に最も近い合格色へ補正します。すでに基準を満たしている場合は変更しません。
コントラスト比の計算過程
相対輝度（文字）
0.1170
相対輝度（背景）
1.0000
コントラスト比
6.29 : 1
(1.0000 + 0.05) ÷ (0.1170 + 0.05) = 6.29
Contrast Ratio
6.29
現在の対比率
Presets
背景が暗い場合は明るい文字色を、背景が明るい場合は暗い文字色を選ぶことで、視覚障害のある方や低照度環境でも読みやすくなります。色覚シミュレーションを切り替えると、色の違いだけに頼った表現になっていないかも確認できます。
コントラスト比チェッカーとは？アクセシビリティ判定の基礎
Webアクセシビリティにおける「カラーコントラスト」は、視覚障害を持つ方だけでなく、高齢者、あるいは日光の強い屋外でスマホを操作するすべての人に関わる重要な要素です。
本ツールは、国際的なガイドラインであるWCAG 2.1（Web Content Accessibility Guidelines）に基づき、相対輝度から算出されるコントラスト比を精密に計算します。AA/AAAの合格判定に加え、非テキスト（UI部品）の3.0:1判定、色覚多様性シミュレーション、 計算過程の可視化、色相を保ったままの自動調整までを1画面で完結できる設計です。
こんなシーンで便利です
WebサイトのUI/UX設計
ボタンやナビゲーションメニューの文字色を決定する際、デザイン性とアクセシビリティを両立させるための数値的根拠として活用します。
納品前のクオリティチェック
クライアントへのデザイン納品前に、主要な箇所が国際基準を満たしているかを確認。相対輝度と計算式もそのまま検収資料へ転記できます。
色覚多様性を考慮した配色検証
P型・D型・T型の見え方に切り替え、色の違いだけに依存した情報設計になっていないかを目視で確認します。
ダークモード対応の検証
ライトモードとダークモード、それぞれの背景色に対して文字が埋もれてしまわないか、個別にコントラスト比を測定します。
使い方は簡単 4ステップ
- 文字色と背景色のHEXコードを入力するか、カラーピッカーで選択します。
- コントラスト比と、AA/AAA/非テキストそれぞれの判定結果（PASS/FAIL）を確認します。
- 色覚シミュレーションを切り替えて、P型・D型・T型での見え方も検証します。
- 不合格の場合は目標比率と調整対象を選び、「自動調整」で合格ラインの色を算出します。
※プレビューエリアでは、実際に見出し、本文、ボタンがどのように見えるかをリアルタイムで確認できます。確定した配色はCSS変数の形式でコピー可能です。
ご利用時の注意点
- WCAG基準：18pt（約24px）未満のテキストを「Normal」、それ以上を「Large」として判定しています。太字の場合は14pt以上がLarge扱いです。
- 非テキストのコントラスト：達成基準1.4.11に基づき、UI部品やグラフィックには3.0:1以上が求められます。
- 色覚シミュレーション：2色覚（P型・D型・T型）を線形変換で近似したものです。実際の見え方には個人差があり、当事者による確認を代替するものではありません。
- JIS対応：日本国内のJIS X 8341-3基準もWCAGと共通の計算式を用いているため、国内案件でもそのまま利用可能です。
- プライバシー：入力されたカラーコードは、すべてブラウザ内（ローカル）で処理され、サーバーに送信されることはありません。
WCAG 2.1 コントラスト比の合格ライン早見表
Webアクセシビリティの国際基準に基づく、テキストサイズ・要素別の合格ライン（コントラスト比）です。
| 適合レベル・対象 | 通常のテキスト | 大きなテキスト (18pt以上) | 主な用途・推奨レベル |
|---|---|---|---|
| AA基準 (必須) | 4.5 : 1 以上 | 3.0 : 1 以上 | 一般的なWebサイト・企業のコーポレートサイト |
| AAA基準 (推奨) | 7.0 : 1 以上 | 4.5 : 1 以上 | 公共機関・高齢者向けサービス・ブログ本文 |
| 非テキスト (1.4.11) | 3.0 : 1 以上 | 3.0 : 1 以上 | ボタンの枠線・アイコン・フォーカス表示・グラフ |
| 非適合 (不合格) | 4.5 : 1 未満 | 3.0 : 1 未満 | 装飾目的やロゴを除き、推奨されない配色 |
【コントラスト比の計算方法】
コントラスト比は、色の相対輝度（Relative Luminance）から求められます。各色のRGB値を0〜1に正規化してガンマ補正を解除し、赤0.2126・緑0.7152・青0.0722の重み付けで輝度を算出。明るい方の輝度をL1、暗い方をL2として(L1 + 0.05) ÷ (L2 + 0.05)で計算され、結果は1:1（同色）から21:1（黒と白）の範囲に収まります。本ツールでは両色の相対輝度と代入後の式を画面上に表示します。
【ダークモードにおける視認性の目安】
ダークモードでは、背景（#121212等）と文字色のコントラストが強すぎると（例：純白の#FFFFFF）、ハレーションを起こして逆に読みにくくなる場合があります。「PASS（合格）」かつ「目が疲れにくい」最適なバランス（コントラスト比 10:1 〜 15:1 程度）を見つけることが、ユーザー体験の向上に直結します。
フロントエンド開発とブランド戦略におけるカラーアクセシビリティの統合手法
適合判定を通過した配色データをコンポーネント設計へ組み込む方法や、ブランドアイデンティティと視認性を高度に両立させるためのシステム化アプローチについて解説します。
CSS変数とDesign Tokensを活用したマルチテーマデザインのコンポーネント設計
コントラスト比を最適化したカラーコードは、個別にハードコーディングするのではなくDesign Tokensとして抽象化し、CSS変数やTailwind CSSのテーマ設定に集約してください。
セマンティックな命名規則（例：--color-text-body-mutedなど）を用いて色の一貫性を管理することで、ライトモードとダークモードの切り替えロジックにおいて常に適正なコントラスト比（AA基準以上）を維持したフロントエンド実装が仕組み化できます。
色覚多様性に配慮した情報設計と色以外の手がかりを併用する冗長化の原則
WCAG 2.1の達成基準1.4.1「色の使用」では、色だけを唯一の視覚的手段として情報を伝えてはならないと定められています。
たとえばグラフの系列を赤と緑で塗り分けた場合、P型・D型の色覚特性を持つ方には両者がほぼ同じ黄土色に見えるため、判別が困難になります。
凡例のラベル直付け、ハッチング（斜線・ドット）パターンの併用、線種の変更、アイコンの追加といった色以外の手がかりを重ねることで、コントラスト比の数値要件と実際の判別可能性を同時に満たす設計が実現します。
ブランドガイドラインのレギュレーション策定とアクセシビリティの担保
企業のコーポレートカラーやブランドアイデンティティ（プライマリーカラー）が、WCAG 2.1の4.5:1という基準を満たさないケースは少なくありません。
この場合は、ロゴマーク自体は装飾物として非適合のまま許容し、UIパーツやボタンテキスト等に展開するフェーズで、背景色に微弱なグラデーションやプレーンな中間色（#111111から#333333など）を重ねることで、ブランドイメージを毀損せずに視認性を最大化するガイドラインを策定するのが定石です。
状態変化に伴うアクセシビリティ担保とインタラクションのコントラスト設計
静的な画面遷移時だけでなく、ユーザーがボタンにマウスを重ねた際（hover）やキーボードフォーカスが当たった際（focus）、非活性状態（disabled）のカラーコントラスト比にも厳格な注意が必要です。
特に、disabled状態のテキストはWCAG 2.1のコントラスト比規制から除外されていますが、クリック可能と誤認されないための3.0:1未満の減色表現と、完全に読めなくならないための視認性の境界を、アウトラインやアンダーラインの併用によってデザイン的に補強することがユーザビリティ向上に直結します。
カラーコントラストのチェックでよくある失敗と対策
感覚的な「おしゃれ・トレンド」を最優先し、WCAGアクセシビリティ非適合のままリリース
淡いグレーの背景に白い文字を重ねたり、彩度の高い背景に同系色の文字を配置するなど、デザイナー自身の主観やパソコン画面での見た目だけで配色を決定してしまい、屋外のスマホ画面や視覚特性を持つユーザーから「文字が全く読めない」とクレームを受ける失敗です。
💡 対策・解決策を見る▼
コントラスト比の数値だけを見て合格とし、色覚特性による判別困難を見落とす
赤と緑、青と紫のように、輝度が近く色相だけが異なる組み合わせは、コントラスト比の計算上は基準を満たすことがあります。しかしP型・D型の色覚特性を持つ方には両者がほぼ同じ色に見えるため、グラフの系列やエラー表示、必須項目のハイライトなどが判別できなくなる失敗です。
💡 対策・解決策を見る▼
文字だけをチェックして、ボタンの枠線やアイコンなど非テキスト要素の基準を見落とす
WCAG 2.1の達成基準1.4.11では、UI部品の境界線やアイコン、フォーカスインジケーターにも3.0:1以上のコントラストが求められます。本文テキストのみを検証して合格と判断し、淡いグレーの入力フォーム枠やフォーカスリングが背景に埋もれてしまい、キーボード操作のユーザーが現在位置を見失う失敗です。
💡 対策・解決策を見る▼
不合格（FAIL）時の微調整に時間を取られ、UI/UXデザインの制作スケジュールが遅延する
カラーコントラストチェックで不合格が出た際、合格ラインに達するまでPhotoshopやFigmaのカラーピッカーを手動で何度も動かして数値を再計算する作業を繰り返し、無駄な修正工数や検収コストが膨らんでしまう失敗です。
💡 対策・解決策を見る▼
よくある質問（FAQ）
Q.入力したカラーコードやデザインの設定データが外部に漏洩する心配はありませんか？
A. 一切ありません。本ツールは完全ローカル処理型の安全設計を採用しています。入力されたカラーコードや各種設定はすべてユーザーのブラウザ内（メモリ上）でのみ処理され、外部のサーバーへ送信されたりデータベースに保存されたりすることは一切ありません。ページを閉じればデータは即座に完全消去されます。
Q.コントラスト比はどのような計算式で算出されているのですか？
A. WCAG 2.1で定義された相対輝度をもとに算出しています。まず各色のRGB値を0から1の範囲に正規化し、ガンマ補正を解除した線形値へ変換したうえで、赤に0.2126、緑に0.7152、青に0.0722の重み付けを行って相対輝度を求めます。そのうえで明るい方の輝度に0.05を加えた値を、暗い方の輝度に0.05を加えた値で割ることでコントラスト比が決まります。本ツールでは両色の相対輝度と実際の計算式を画面上に表示するため、検証結果の根拠をそのまま資料に転記できます。
Q.スマートフォンやタブレットのブラウザからでもコントラスト比の判定はできますか？
A. はい、可能です。各種スマートフォンやタブレットのブラウザ環境にも完全に対応したレスポンシブ設計となっています。端末の画面輝度や屋外での視認性を考慮しながら、文字色と背景色のHEXコードを入力するだけで、いつでもその場で合格判定を検証できます。
Q.日本のJIS規格（JIS X 8341-3）に準拠したWebアクセシビリティ検証にも使えますか？
A. はい、そのままご利用いただけます。日本国内の公的基準であるJIS X 8341-3は、国際ガイドラインであるWCAG 2.1と共通の相対輝度計算式および適合判定基準を採用しています。そのため、本ツールのAA基準やAAA基準の判定結果は、国内のWebアクセシビリティ検収作業の正確な数値根拠としてそのまま適用可能です。
Q.文字の大きさが18pt未満か以上かで合格ラインの数値が変わるのはなぜですか？
A. 文字のサイズや太さによって視認性が変化するためです。WCAG 2.1基準では、18pt未満（または太字の14pt未満）の通常テキストは判読が難しくなるため4.5:1以上のコントラスト比（AA基準）を要求しますが、18pt以上の大きなテキスト（または太字の14pt以上）であれば視認性が高まるため3.0:1以上で合格と判定されます。
Q.ボタンの枠線やアイコンなど、文字以外の要素にもコントラストの基準はありますか？
A. はい、WCAG 2.1の達成基準1.4.11「非テキストのコントラスト」により3.0:1以上が求められます。対象となるのはボタンの境界線、入力フォームの枠、フォーカスインジケーター、アイコン、グラフの色分けなど、意味を伝えるために必要なUI部品やグラフィックです。本ツールでは判定カードに非テキスト向けの3.0:1の合否を独立して表示しているため、文字とUI部品の基準を同時に検証できます。
Q.色覚特性のあるユーザーからどのように見えるかを確認できますか？
A. はい、色覚シミュレーション機能で確認できます。P型（赤を感じにくい）、D型（緑を感じにくい）、T型（青を感じにくい）の3種類に切り替えると、プレビュー全体がその見え方へ変換されます。コントラスト比の数値上は合格していても、赤と緑の組み合わせのように色の違いだけで情報を伝えている配色は判別が困難になる場合があるため、数値判定と併せた目視確認をおすすめします。
Q.カラーコントラストが不合格になった場合、色相を変えずに合格させる方法はありますか？
A. はい、簡単に対応できます。本ツールの自動調整機能は、現在の色相と彩度を維持したまま明度だけを全域で走査し、目標のコントラスト比を満たす色のうち元の色に最も近いものを提案します。目標値は3.0:1、4.5:1、7.0:1から選択でき、調整の対象を文字色か背景色のどちらにするかも指定可能です。すでに基準を満たしている場合は色を変更しないため、必要以上にコントラストを下げてしまう心配もありません。
あなたの声で、
このツールをより鋭く。
「こんな機能が欲しい」「ここを直してほしい」といったご意見や、新しいツールのリクエストを募集しています。エンジニアが直接目を通し、開発の参考にさせていただきます。