Comprobador de contraste de color

Verifique el contraste de primer plano y fondo con WCAG AA y AAA. Vea la actualización de la proporción a medida que elige colores.

Color Contrast Checker

Live

Foreground (text)

Background

17.85:1

Contrast ratio

AA normal: PassAA large: PassAAA normal: PassAAA large: Pass

Readable headline sample

Body text at normal size should stay clear against this background. Adjust colors until WCAG targets pass.

Small caption text for density checks.

CSS output

color: #0f172a;
background-color: #ffffff;
/* contrast ratio: 17.85:1 */

Key capabilities

Verifique el contraste entre primer plano y fondo con las pautas WCAG AA y AAA.
Se ejecuta en tu navegador
Gratis para usar

Cómo usar

Elija texto (primer plano) y colores de fondo.
Lea la relación de contraste y los resultados AA/AAA.
Ajústelo hasta que supere su nivel objetivo.

How this tool works

Elija texto (primer plano) y colores de fondo.
Lea la relación de contraste y los resultados AA/AAA.
Ajústelo hasta que supere su nivel objetivo.

Recommended settings

Utilice primero las opciones predeterminadas y luego ajústelas si es necesario

Supported formats

Text / on-page input

File size and limits

Las vistas previas multicapa muy complejas pueden parecer más lentas en teléfonos más antiguos.

Privacy

Los generadores de color y CSS se ejecutan completamente en su navegador. Las vistas previas y las conversiones nunca cargan tus estilos.

Common use cases

Utilice el Comprobador de contraste de color siempre que lo necesite: verifique el contraste de primer plano y fondo con las pautas WCAG AA y AAA.

Troubleshooting

La vista previa se ve diferente después de pegar

Verifique si hay CSS competitivo en su página (restablecimientos, colores heredados). Primero copie la regla generada en una hoja de estilo aislada.

Preguntas frecuentes

¿Esto carga mi CSS?

No. Los generadores y convertidores se ejecutan en su navegador con vista previa en vivo.

¿Necesito una cuenta?

No. Abra la herramienta, modifique los controles y copie el CSS.