OKLCH Kontrast-Prüfer
Überprüfe Farbkontrastverhältnisse für Barrierefreiheit mit OKLCH-Farben und Echtzeit-WCAG-Bewertung.
使用指南
1. 调整颜色：分别调整前景色和背景色的 OKLCH 值，实时查看对比度变化。
2. WCAG 标准：查看对比度是否符合 AA（4.5:1）或 AAA（7:1）无障碍标准。
3. 预览效果：切换不同预览模式（文本/按钮/卡片）查看实际效果。
4. 随机颜色：点击"Randomize"生成随机颜色组合，寻找灵感。
5. 复制颜色：点击复制按钮获取颜色值，用于你的项目中。
Vordergrundfarbe
Lightness
Chroma
Hue
Hintergrundfarbe
Lightness
Chroma
Hue
Aktionen
Vorschau
Sample Heading Text
This is sample paragraph text to preview the contrast between foreground and background colors. The contrast ratio helps determine if text is readable.
Small text with reduced opacity
Kontrast-Ergebnisse
15.64:1
ExcellentContrast Ratio
AA
Normal Text
≥ 4.5:1
AAA
Normal Text
≥ 7:1
AA Large
Large Text
≥ 3:1
AAA Large
Large Text
≥ 4.5:1
Color Values
Foreground
HEX
#0e171eRGB
rgb(14, 23, 30)HSL
hsl(204.95, 38.07%, 8.59%)OKLCH
oklch(20% 0.020 240)Background
HEX
#e9f0f5RGB
rgb(233, 240, 245)HSL
hsl(205.78, 36.37%, 93.6%)OKLCH
oklch(95% 0.010 240)