コントラストチェッカー

Check WCAG color contrast ratio between foreground and background colors and verify AA/AAA compliance。無料、プライベート、100%クライアントサイド。

入力

例を試す:

出力

Local only

最近の履歴

履歴はまだありません

使い方

Enter two colors (foreground and background) separated by a newline or space.
Read the contrast ratio and AA/AAA compliance results.
Adjust colors to meet your accessibility target.

このツールを使うタスク

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

前景色と背景色のコントラスト比を測定し、WCAG AA または AAA のしきい値を満たしているか確認します。

RGB 色を HEX に変換する(逆変換も)

色の値を rgb() と #rrggbb 表記の間で変換します。CSS 作業に欠かせないアルファチャネルの扱いにも対応します。

よくある質問

What is the WCAG contrast ratio?: The ratio is (L1 + 0.05) / (L2 + 0.05) where L1 and L2 are the relative luminances of the lighter and darker colors. Black on white yields 21:1.
What are the AA and AAA thresholds?: AA requires 4.5:1 for normal text and 3:1 for large text. AAA requires 7:1 for normal text and 4.5:1 for large text.

関連ツール

カラーコンバーター

Convert colors between HEX, RGB, HSL, HSV, and CMYK color spaces. Auto-detects input format。無料、プライベート、100%クライアントサイド。

カラーミキサー

Blend two colors by ratio using normal, multiply, screen, overlay, darken, or lighten blend modes。無料、プライベート、100%クライアントサイド。

画像カラーピッカー

Extract dominant colors from image。無料、プライベート、100%クライアントサイド。