Verificador de Contraste OKLCH
Verifica los ratios de contraste de color para cumplimiento de accesibilidad usando colores OKLCH con evaluación WCAG en tiempo real.
How to use
Tune both colors
Adjust the OKLCH values for the foreground and background colors to see the contrast ratio update in real time.
Review WCAG results
Check whether the combination passes AA or AAA accessibility thresholds for normal and large text.
Preview real UI states
Switch between text, button, and card previews to understand how the pairing behaves in actual interfaces.
Generate new ideas
Use Randomize to explore fresh color pairs when you want inspiration or a quick starting point.
Copy the final values
Copy the resulting colors once you find a pair that looks right and meets your accessibility target.
Color de primer plano
Color de fondo
Acciones
Vista previa
Texto de encabezado de ejemplo
Este es un texto de párrafo de ejemplo para probar la legibilidad con tu combinación de colores elegida.
Ejemplo de texto pequeño para pruebas detalladas.
Resultados de contraste
Información de color
Primer plano
#0e171ergb(14, 23, 30)hsl(204.95, 38.07%, 8.59%)oklch(20% 0.020 240)Fondo
#e9f0f5rgb(233, 240, 245)hsl(205.78, 36.37%, 93.6%)oklch(95% 0.010 240)