Bucket
ホーム

DESIGN

カラー変換・コントラスト

HEX⇄RGB⇄HSL の変換と、文字の読みやすさ(WCAG)の判定。

使い方左のカラーピッカーで色を選ぶと HEX / RGB / HSL が即時変換されます。右では文字色と背景色を指定してコントラスト比を確認できます。例: 文字色 #1b1d21・背景 #ffffff → コントラスト比 17.0:1(AAA)。

変換

HEX
#2B50C7
RGB
rgb(43, 80, 199)
HSL
hsl(226, 64%, 47%)

コントラスト判定

サンプル Sample 123
コントラスト比
16.88 : 1
WCAG(通常文字)
AAA
基準: WCAG 2.1 の通常文字の基準は、AA が 4.5:1、AAA が 7:1 以上です(大きい文字は 3:1 で AA)。