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)