uuutil ← ツール一覧

コントラストチェッカー

文字色と背景色を入力します。hex・RGB・HSLやCSSカラー名など、カラーコンバーターと同じ記法が使えます。対応ブラウザでは画面のスポイトで取得でき、未対応の環境では色見本からネイティブのカラーピッカーが開きます。相対輝度から計算したWCAG 2.xのコントラスト比が、通常・大テキスト各サイズのAA/AAA合否表とともに表示され、基準値(通常4.5:1と7:1、大3:1と4.5:1)も明記されるので結果を自分で確かめられます。2色のサンプル表示は両サイズで描画されます(あくまでサンプルで、実際のページの評価ではありません)。不合格のレベルごとに、文字色・背景色を明るく/暗くする合格に最も近い調整案をコピー可能な値で提案します。ワンクリックで2色を入れ替えられます。

プライバシー台帳

取得するデータ なし。
使用ライブラリ Lit 3 — ツールファイルに同梱。
保存されるデータ なし。
送信されるデータ なし。

自分のページで使う

ツール一式を1つの自己完結HTMLファイルとしてダウンロードできます。Litライブラリ同梱の読めるソースで、ネットワークリクエストはゼロ。ディスクから直接開いて動作し、自由にカスタマイズできます。

ホスト版ウィジェットを使う場合は、scriptタグ1行で埋め込めます(常に最新版):

<script type="module" src="https://uuutil.com/tools/contrast-checker.js"></script>
<uu-contrast-checker lang="ja"></uu-contrast-checker>

ソースのライセンス: MIT — 利用・改変・再配布は自由です。コピーにはライセンス表記を残してください。