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
合格

関連ツール

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

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

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

Aspect Ratio Calculator

Aspect Ratio Calculator

Calculate aspect ratios and scaled dimensions for images and video.

Border Radius ジェネレーター

Border Radius ジェネレーター

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

Box Shadow ジェネレーター

Box Shadow ジェネレーター

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

UUID v1 生成ツール

UUID v1 生成ツール

埋め込みタイムスタンプ付きの UUID v1 を生成します。

CSS Clip-Path ジェネレーター

CSS Clip-Path ジェネレーター

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

SVG パスエディター

SVG パスエディター

SVG パスデータ (d 属性) を対話的に編集・可視化できます。

apps

もっと見る

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

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

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

結果で分かること

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

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

実務で役立つ場面

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

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

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

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