カラーコントラスト

WCAGアクセシビリティのコントラスト比を確認します。カラーコントラストを登録不要で無料利用。ブラウザ内で高速かつ安全に処理します。

テキスト（前景）

背景

Ratio: 21:1

可読性をテストするためのサンプルテキスト

WCAG適合性

AA 通常 (≥4.5:1)

適合

AA 大文字 (≥3:1)

適合

AAA 通常 (≥7:1)

適合

AAA 大文字 (≥4.5:1)

適合

カラーコントラストはブラウザ上で色を扱うためのツールです。

デザイナー、開発者、クリエイターが素早く信頼できる結果を得られるよう設計されています。

Supported formats

HEX

RGB

HSL

How it works

Step 1

カラーコントラストを開く

Step 2

色を入力またはインポートする

Step 3

結果をコピー、エクスポート、再利用する

避けるべき一般的なエラー

コントラスト確認を忘れると読みやすさが低下します。
色を使いすぎるとパレットが扱いにくくなります。

プロのヒント

主要色はCSS変数として保存しましょう。
公開前にライトモードとダークモードで確認しましょう。

Privacy guaranteed: everything is processed locally in your browser.

可能な場合、処理はブラウザ内でローカルに行われます。アカウントは不要です。

色プロジェクトのためのカラーコントラスト

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

精度を失わないカラーコントラスト

変換と計算は正確な値（HEX、RGB、HSL、OKLCH）で行われます。視覚的な近似はなく、デザイン意図に忠実な色が得られます。

無料で使えるカラーコントラスト

登録もソフトのダウンロードも不要。カラーコントラストは100%無料で、どんなブラウザでもご利用いただけます。無料プランには1日10回の利用が含まれます。

高速かつ安全なカラーコントラスト

処理はブラウザ内で直接行われ、最大速度を実現します。データはサーバーに送信されず、色とファイルはお使いの端末に保持されます。

共有とコラボレーションのためのカラーコントラスト

結果をHEX、RGB、HSL、CSS、JSONとしてエクスポートしたり、ワンクリックでコピーできます。チームでのカラーガイド共有やデザインシステムの文書化に最適です。

すべてのカラーツールを見る

抽出、変換、パレット、グラデーション、WCAGコントラストをわずか数クリックで。

すべてのツールを見る

Related tools

WCAGアナライザー

テキスト読みやすさ

色覚シミュレーター

ガイドとチュートリアル

詳細なガイドでツールの使い方を学びましょう。

color-contrast：accessibilityの実践ガイド

color-contrastの使い方、accessibilityのベストプラクティス、よくあるミスを学べるローカライズ済みガイド。

画面で目が疲れる色とその理由

特定の色が視覚疲労を引き起こす理由と、デジタルプロジェクトに快適な色合いを選ぶ方法を解説。

アクセシビリティのための色のコントラストを確認する方法

WCAG基準に従って色のコントラストを確認し最適化するための完全ガイド。ツール、方法、ベストプラクティス。

Frequently asked questions

はい、オンラインで無料で利用できます。

可能な場合、データ保護のため処理はブラウザ内で行われます。

Cookieを使用しています