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

前景色と背景色のコントラスト比をテストして、アクセシビリティを確保します。

色を確認する

色の組み合わせをテストして、テキストの読みやすさのためにWCAGアクセシビリティ基準を満たしていることを確認します。

19.07対1
コントラスト
AAA
テキストの結果
素晴らしい

比較済み:#000000 を #F2FF00 上に表示

テキスト

16px、レギュラー(400)

通常のテキストとみなされます。

  • AA(WCAG 1.4.3):少なくとも4.5:1

    合格
  • AAA(WCAG 1.4.6):少なくとも7:1

    合格

UIコンポーネントとグラフィック

アイコン、入力欄の境界線、フォーカス表示など、インターフェースを使うために見る必要がある部分です。

  • AA(WCAG 1.4.11):少なくとも3:1

    合格
19.07 対 1。テキスト: AA に合格しています, AAA に合格しています。UIコンポーネント: 合格。
判定方法
比較された色(ブレンド後)
テキスト #000000 を背景 #F2FF00 上に表示
相対輝度
テキスト 0.0000、背景 0.9039
計算式
(L1 + 0.05) / (L2 + 0.05) ここで L1 は明るい色の輝度、L2 は暗い色の輝度です。
正確な比率
19.0794 対 1、表示は 19.07 対 1。 表示されている値は切り捨てられており、四捨五入されていません。だから実際より良く見えることはありません。比較に使われるのは正確な値です。

テキストサイズ: 16px、レギュラー(400)

通常のテキストとみなされます。 大きなテキストは少なくとも24px(18pt)、またはボールド(太さ700以上)の場合は少なくとも18.67px(14pt)です。サイズは四捨五入ではなく切り捨てで表示されます。

通常のテキストとみなされます。 大きなテキストは少なくとも24px(18pt)、またはボールド(太さ700以上)の場合は少なくとも18.67px(14pt)です。サイズは四捨五入ではなく切り捨てで表示されます。

Aa
プレビューのタイトル

素早い茶色の狐が怠けた犬を飛び越える

小さなテキストの例 (12px)

テキスト
#000000
背景
#f2ff00

WCAG基準

レベル AA

通常のテキストの最小コントラスト比は 4.5:1、大きなテキストの最小コントラスト比は 3:1。ほとんどのウェブサイトで必須。

レベル AAA

通常のテキストに対する強化されたコントラスト比は 7:1、 大きなテキストに対するのは4.5:1。最適なアクセシビリティのために推奨。

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

テキストと背景色のコントラスト比を計算します。

テキストと背景色のためにカラー ピッカーを使用して色を選択するか、例えば #259 または #2596BE のような RGB 16 進形式で色を入力します。スライダーを調整して色を選択できます。Web Content Accessibility Guidelines (WCAG) には、視覚的なユーザーがテキストを読めるかどうかを判断するための具体的なガイドラインがあります。この基準は、特定のアルゴリズムを使用して色の組み合わせを比較可能な比率にマッピングします。この式を使用すると、WCAG は、テキストとその背景に対する 4.5:1 のカラーコントラスト比が、通常の(本文)テキスト、および大きなテキスト(18+ pt 通常または 14+ pt 太字)に適していることを示しています。

主な機能

  • リアルタイムのコントラスト比計算
  • WCAG AA & AAA適合性チェック
  • 微調整用HSLスライダー
  • 複数のプレビュー形式

高度なツール

  • 自動カラー修正
  • テキストと背景のサンプル
  • 色名検出
  • 結果のエクスポート

よくある質問

WCAG AA に準拠するには、通常のテキストで 4.5:1 以上のコントラスト比が必要です。大きなテキスト(18pt または 14pt の太字)は 3:1 以上が必要です。

WCAG AAA では、より高いコントラスト比が求められます。通常のテキストは 7:1、大きなテキストは 4.5:1 です。AA はそれぞれ 4.5:1 と 3:1 です。

自動修正機能を使うと、デザインの意図を保ったままテキストまたは背景の色を調整できます。手動で調整する場合は、AA/AAA に準拠する最適な範囲を示す視覚的なインジケーター付きの HSL スライダーを使ってください。

緑のゾーンと AA/AAA のマーカーは、WCAG に準拠するための最適な範囲を示します。方向のヒント(明るい側/暗い側)は、現在の色の組み合わせに応じて、より良いコントラストに向けた方向を示します。

はい。任意の HEX カラーコードを入力するか、カラーピッカーで好きな色を選べます。URL は自動的に更新されるので、特定の色の組み合わせを共有できます。