Check WCAG Contrast for Accessible Text
Cuándo aplica
Use this when you are picking foreground and background colors for UI or content. Enter two sRGB hex colors, compare the ratio to WCAG thresholds, and iterate before you ship.
Herramienta a usar
Ratio de contraste entre dos colores hex y umbrales AA/AAA.
Abrir Contraste WCAG →Pasos
- 1Enter the text (foreground) color as #RRGGBB or #RGB.
- 2Enter the background color the same way.
- 3Read the contrast ratio and which WCAG rows pass or fail.
- 4Adjust colors until you meet your target (often AA for body text).
- 5Re-check after real content is placed (long paragraphs, small labels).
Ejemplos
- Gray #111827 on white #ffffff for long-form reading.
- Brand accent button: ensure both default and hover states still pass.
Qué evitar
- Checking only one breakpoint while responsive themes change colors.
- Ignoring non-text UI that still needs discernible boundaries.
- Trusting contrast on gradients without sampling worst-case points.
Herramientas relacionadas
En el blog
Más en Herramientas de imagen
- Comprimir imagenes para paginas web mas rapidas
- Preparar imagenes para tamanos de redes sociales
- Eliminar metadatos EXIF antes de compartir fotos
- Convertir imagenes para compatibilidad y tamano de archivo
- Agregar marca de agua para proteger imagenes publicadas
- Difuminar informacion sensible antes de compartir imagenes
Ver todas las guías por tarea o ver la lista completa en el hub de Herramientas de imagen.
FAQ
Does this replace an audit?
No. It is a fast sRGB check. Full audits cover motion, structure, and more.
Non-hex inputs?
This tool expects hex. Convert from HSL/RGB elsewhere first.
Todas las guías por tarea · Herramientas de Herramientas de imagen · Blog