devtools-hub

Color Contrast Checker

WCAG 2.1 準拠のコントラスト比をリアルタイムチェック

BOOTHで見る(有料版)
開発者向けカラーアクセシビリティ

前景色と背景色を選ぶだけで WCAG 2.1 のコントラスト比を即計算。AA / AAA 基準の合否を通常テキスト・大テキスト別に判定。アクセシビリティ対応の UI 開発に。

広告

Color Contrast Checker

ratio17.40:1
BG
FG
Contrast RatioAAA
034.5721
WCAG 2.1
AA通常4.5:1✓ PASS
AA大文字3:1✓ PASS
AAA通常7:1✓ PASS
AAA大文字4.5:1✓ PASS
Preview

大テキスト — Large Text

通常テキスト — The quick brown fox jumps over the lazy dog.

小テキスト — アクセシビリティ対応の UI を作るために、コントラスト比を確認しましょう。

Features

  • コントラスト比をリアルタイム計算(WCAG 2.1 準拠)
  • AA / AAA 基準を通常テキスト・大テキスト別に合否判定
  • カラーピッカー+HEX 直接入力に対応
  • 前景色と背景色を実際の組み合わせでプレビュー確認
  • 前景↔背景ワンクリックスワップ

Desktop Only

有料版のみ

デスクトップ版(BOOTH)でのみ使える機能

  • スポイトツール(画面から色をピック)
  • カラーセット保存(最大10件)

Desktop App

デスクトップ版を入手する

Web版にはない機能をデスクトップ版で追加しています。

  • スポイトツール(画面から色をピック)
  • カラーセット保存(最大10件)
BOOTH で見る

WCAGコントラスト比とアクセシビリティ対応の基礎

Webアクセシビリティのガイドライン(WCAG 2.1)では文字と背景色のコントラスト比に基準値が設けられています。コントラストが不十分だと低視力者・色弱者がテキストを読めなくなるため、適切な配色設計が重要です。

WCAG 2.1のコントラスト比基準

WCAG 2.1のコントラスト比基準はLevel AA(一般要件)とLevel AAA(高い要件)に分かれます。通常テキスト(18px未満)はAA: 4.5:1以上・AAA: 7:1以上、大テキスト(18px以上、または14px以上のBold)はAA: 3:1以上・AAA: 4.5:1以上が求められます。

コントラスト比の計算方法

コントラスト比はWCAGの相対輝度(relative luminance)公式で計算します。明るい色と暗い色の相対輝度を(L1+0.05)/(L2+0.05)で割り算した値です。白(#FFFFFF)と黒(#000000)の比は21:1で最大値です。Color Contrast Checkerでは任意の2色を選ぶだけで自動計算してAA/AAAの合否を表示します。

よくある失敗パターン

明るいグレーの文字(#999999)を白背景に使うと2.85:1でAAを下回ります。薄いプレースホルダーテキスト、軽い色のリンクテキスト、カラーだけで区別したボタンなどは視覚障害者には判別できないことがあります。デザインレビュー時にColor Contrast Checkerで全テキスト要素を確認する習慣をつけましょう。

アクセシビリティ対応のビジネスメリット

アクセシビリティ対応は障害者差別解消法(日本)や欧米の法規制への準拠義務だけでなく、全ユーザーの読みやすさ向上・SEOへの良影響(コンテンツの可読性)・強い日差しや低品質な画面での視認性改善にもつながります。

広告

Related Tools

base64-studio

Base64 エンコード & デコード

開発者向けテキストエンコード

使ってみる →

BOOTH

JSON Studio

JSON フォーマッター & バリデーター

JSON開発者向けフォーマッター

使ってみる →

BOOTH

color-deck

カラーコード変換 & パレット保存

カラーデザイン開発者向け

使ってみる →

BOOTH

このツールを共有する