カラーコントラスト確認

2色の相対輝度からコントラスト比を計算し、通常文字・大きな文字のAA・AAA判定を表示します。

文字色#17333b背景色#ffffff

PitaTools
読みやすさをプレビュー

コントラスト比13.35 : 1

✓ 通常文字 AA合格

✓ 通常文字 AAA合格

✓ 大きな文字 AA合格

✓ 大きな文字 AAA合格

Guide

このツールでできること

文字色と背景色からコントラスト比を計算し、WCAGの通常文字・大きな文字に対するAA・AAA基準を確認できます。ボタン、本文、補助テキストの配色判断に使えます。

How it works

処理の仕組み

sRGBの各色を線形化して相対輝度を求め、明るい側と暗い側の輝度からコントラスト比を計算します。文字サイズ別のWCAGしきい値と比較して判定します。

Examples

具体的な使用例

入力と結果の例

入力: 文字色 #132B33、背景色 #FFFFFF
結果: 高いコントラスト比とAA・AAA判定

濃い青緑と白の輝度差が大きいため、本文文字として読み取りやすい組み合わせになります。

Cautions

利用時の注意点

AA合格だけで全利用者の読みやすさを保証するものではなく、フォント、太さ、周囲の色も影響します。
プレースホルダーや無効状態も情報を伝える場合は同様に確認してください。

Next step

結果の活用方法

ブランド色を固定する場合は背景色や文字サイズを調整して基準を満たします。
色だけで状態を示さず、文字やアイコンも併用してください。

更新日：2026.07.26

Guides

特徴

比率を自動計算
AA・AAA判定
実際の配色をプレビュー

Steps

使い方

文字色と背景色を選びます。
表示と比率を確認します。
必要な達成基準を確認します。

PitaTools

活用例

Webアクセシビリティ
ブランド配色確認
ボタン・文字色選定

Example

入力例・結果例

入力例: 加工したい画像、色、サイズなどの設定
結果例: 比率を自動計算

ファイルや複数項目を使うツールでは、安全のためサンプルを自動選択せず利用イメージのみ表示します。

Privacy

プライバシーとデータ処理

公開中のツールはブラウザ完結です。入力した文章、URL、画像、PDF、ファイル、パスワードをPitaToolsのサーバーへ送信せず、端末内で処理します。

FAQ

よくある質問

AAの通常文字基準は？

一般に4.5:1以上です。大きな文字は3:1以上です。

Explore · 画像・デザイン

不具合報告・改善要望

「カラーコントラスト確認」についてお気づきの点を運営者へお知らせください。

報告・要望を送る