Tiny Online Tools logoTiny Online Toolssearchツールを検索…grid_viewすべてのツール
ホームchevron_rightデザインツールchevron_rightカラーコントラストチェッカーカラーコントラストチェッカー

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

アクセシビリティのためのWCAG 2.1カラーコントラスト比を確認します。

#f8fafc#111827

Sample Heading Text

The quick brown fox jumps over the lazy dog. This is body text at 16px to demonstrate readability at normal size.

16.96:1
Contrast Ratio
WCAG 2.1 結果
check_circle
AA Normal Text
Min 4.5:1 — Body text, UI components
合格
check_circle
AA Large Text
Min 3:1 — 18pt+ or 14pt+ bold
合格
check_circle
AAA Normal Text
Min 7:1 — Enhanced: body text
合格
check_circle
AAA Large Text
Min 4.5:1 — Enhanced: large text
合格

関連ツール

ランダムカラーパレット生成ツール

ランダムカラーパレット生成ツール

ハーモニールールでランダムなカラーパレットを生成します。

Border Radius ジェネレーター

Border Radius ジェネレーター

コーナーの丸みを視覚的にコントロールしてCSSをコピーします。

Box Shadow ジェネレーター

Box Shadow ジェネレーター

CSSボックスシャドウをリアルタイムプレビューで視覚的に作成します。

CSS Clip-Path ジェネレーター

CSS Clip-Path ジェネレーター

ライブプレビューでCSS clip-path形状を生成します。

Bcrypt ジェネレーター

Bcrypt ジェネレーター

bcrypt パスワードハッシュを生成します。

画像回転

画像回転

画像をカスタム角度で回転します。

SQL 圧縮ツール

SQL 圧縮ツール

コメントを削除して空白を圧縮することでSQLクエリを最小化します。

apps

もっと見る

無料オンラインツールの全コレクションを見る。

色を本番に出す前にコントラストを確認

配色がきれいでも、アクセシビリティ要件を満たしていないことはよくあります。このチェッカーを使えば、前景色と背景色の組み合わせを WCAG の基準に照らして確認できるため、デザインシステムやコンポーネント、実際の画面に入る前に問題を見つけやすくなります。

結果で分かること

このツールではコントラスト比に加えて、次の代表的な WCAG 基準を満たしているかが分かります。

  • AA の通常テキスト
  • AA の大きいテキスト
  • AAA の通常テキスト
  • AAA の大きいテキスト

実務で役立つ場面

色のコントラスト確認は、次のようなときに特に便利です。

  • ブランドカラーを UI コンポーネントで使う前に検証したいとき
  • ボタン、カード、バナー上の文字色を試したいとき
  • デザインハンドオフ時にアクセシビリティを確認したいとき
  • 低視力ユーザーに読みにくい配色を避けたいとき

基準を満たしていても確認は必要です

技術的には合格していても、小さな文字サイズや細いウェイトでは読みにくいことがあります。比率が問題なくても、最後に実際の文字サイズに近いプレビューを確認しておくと安心です。