Comprobador de contraste de colores
Check WCAG AA y AAA contraste de texto para los colores de hex opaco. Previsualice su par, cambiar los colores y aplicar una alternativa de texto de mayor contraste.
Contraste reporte
Color contrast report
Text: #777777 Background: #ffffff Contrast ratio: 4.4781:1
- AA · normal text: Fail (requires 4.5:1)
- AA · large text: Pass (requires 3:1)
- AAA · normal text: Fail (requires 7:1)
- AAA · large text: Fail (requires 4.5:1)
Large text: at least 24 CSS px, or approximately 18.67 CSS px when bold. This checks opaque sRGB text contrast only, not overall accessibility.
El texto exportado sigue en inglés; tus datos se conservan tal como los escribiste.
No hay señalización. No hay créditos de inteligencia artificial. Esta herramienta monta su salida en su navegador.
De una idea a algo útil.
- 01
Introduzca texto y colores de fondo.
- 02
Revise la relación calculada y los umbrales normales o de texto grande.
- 03
Prueba un color de texto sugerido y exporta el resultado.
Un pequeño contexto.
Los ratios de contraste usan el WCAG fórmula relativa-luminancia para los colores opacos del SRGB. AA texto normal requiere 4.5:1 y AA texto grande requiere 3:1. Texto grande generalmente significa por lo menos 24 CSS píxeles, o aproximadamente 18.67 CSS Pixels en negrita. La relación cruda determina el resultado antes de redondear. Esto es un cheque de color, no una auditoría de accesibilidad.
Buenas preguntas.
¿Puedo entrar en colores transparentes?
No. Use valores de hex de tres o seis dígitos opacos. Colores transparentes compuestos sobre su fondo final antes de medir.
¿Una relación de paso significa que mi página es accesible?
No. La navegación por teclado, la semántica, el enfoque, el tamaño legible y otros requisitos todavía necesitan pruebas. La herramienta solo evalúa este par de texto / fondo.