Contrast Checker
OKLCHコントラストチェッカー
OKLCH色を使用してリアルタイムWCAG評価でアクセシビリティ対応のカラーコントラスト比をチェック。
AA and AAA evaluation
Text, button, and card previews
Copy final accessible color pairs
How to use
01
Tune both colors
Adjust the OKLCH values for the foreground and background colors to see the contrast ratio update in real time.
02
Review WCAG results
Check whether the combination passes AA or AAA accessibility thresholds for normal and large text.
03
Preview real UI states
Switch between text, button, and card previews to understand how the pairing behaves in actual interfaces.
04
Generate new ideas
Use Randomize to explore fresh color pairs when you want inspiration or a quick starting point.
05
Copy the final values
Copy the resulting colors once you find a pair that looks right and meets your accessibility target.
前景色
Lightness
Chroma
Hue
背景色
Lightness
Chroma
Hue
アクション
プレビュー
コントラスト結果
15.64:1
Excellentコントラスト比
AA通常
Normal Text
4.5:1最小
AAA通常
Normal Text
7:1拡張
AA大きなテキスト
Large Text
3:1最小
AAA大きなテキスト
Large Text
4.5:1拡張
色情報
前景
HEX
#0e171eRGB
rgb(14, 23, 30)HSL
hsl(204.95, 38.07%, 8.59%)OKLCH
oklch(20% 0.020 240)背景
HEX
#e9f0f5RGB
rgb(233, 240, 245)HSL
hsl(205.78, 36.37%, 93.6%)OKLCH
oklch(95% 0.010 240)