Comprobador de contraste
Elige un color de texto y uno de fondo para obtener el ratio de contraste exacto, las insignias de cumplimiento WCAG y una vista previa de texto normal y grande.
Gratis Se ejecuta en local Sin registro
18.88: 1Relación de contraste
AA Texto normal: Cumple AA Texto grande: Cumple AAA Texto normal: Cumple AAA Texto grande: Cumple
Vista previa
Vista previa
El veloz murciélago hindú comía feliz cardillo y kiwi.
Ajustes rápidos
WCAG AA exige 4.5:1 para texto normal y 3:1 para texto grande.
Cómo se usa
1
Define los colores
Elige un color de texto y un color de fondo, o pega valores HEX.
2
Lee el ratio
La herramienta muestra el ratio y qué niveles WCAG se cumplen.
3
Ajusta hasta que cumpla
Cambia los colores y observa cómo se actualizan las insignias al instante.
Por qué usar esta herramienta
WCAG AA y AAA
Los umbrales de texto normal y grande se comprueban por separado.
Vista previa en vivo
Comprueba cómo queda la pareja con texto normal y con un titular grande.
Ratios exactos
Usa la fórmula de luminancia relativa de WCAG.
Preguntas frecuentes
¿Qué ratio necesito?
WCAG AA exige 4.5:1 para texto normal y 3:1 para texto grande. AAA los eleva a 7:1 y 4.5:1.
¿Qué se considera texto grande?
18pt (24px) normal o 14pt (18,66px) en negrita, y tamaños mayores.
¿Comprueba el contraste de elementos no textuales?
No. Esta herramienta revisa el contraste de texto; los componentes de interfaz tienen un requisito aparte de 3:1.
¿Por qué mi ratio difiere del de otra herramienta?
Las pequeñas diferencias vienen del redondeo. Esta herramienta usa la fórmula de luminancia relativa de WCAG con canales sRGB.
¿Se sube algo?
No. Los cálculos de color se hacen localmente en tu navegador.
Herramientas relacionadas
Color y diseño Generador de degradados CSS Crea degradados CSS lineales, radiales y cónicos con puntos de color ajustables y copia el valor CSS o Tailwind. Gratis y en local. Color y diseño Conversor de colores Convierte colores entre HEX, RGB, HSL y HSV, elige uno con la rueda de color y copia valores listos para CSS y herramientas de diseño. Herramientas de imagen Compresor de imágenes Comprime imágenes JPG, PNG y WebP en tu navegador. Ajusta la calidad, cambia el ancho, compara tamaños y descarga sin subir archivos. Herramientas de imagen Generador de favicons Crea un set completo de favicons desde una imagen: recorta el cuadrado, genera PNG de 16 a 512, un icono para Apple, un manifiesto y el HTML. Herramientas de desarrollo Codificador y decodificador Base64 Convierte texto a Base64 o vuelve a texto legible. Compatible con UTF-8 y con la variante URL-safe, y todo se ejecuta en tu navegador, sin subir nada. Herramientas de texto Conversor de mayúsculas y minúsculas Cambia texto entre MAYÚSCULAS, minúsculas, Tipo título, tipo frase, camelCase, PascalCase, snake_case y kebab-case al instante.
Última actualización: