Elige tus dos colores
El color del texto y el fondo sobre el que va.
Vista previa de legibilidad del texto
Elige un color de texto y un color de fondo y mira texto real dibujado a seis tamaños habituales, desde pies de foto pequeños hasta titulares grandes, cada uno marcado con si cumple el contraste WCAG AA.
- Gratis
- Sin registro
- Funciona en tu navegador
100 % privado — el cálculo se hace en tu navegador y no se envía nada a ningún servidor.
Cómo funciona
Añade tu propio texto
O usa la frase de ejemplo por defecto.
Comprueba cada tamaño
El texto pequeño necesita más contraste que el grande o en negrita.
Un solo número no cuenta toda la historia
Los comprobadores de contraste suelen dar un único ratio para un par de colores, pero si ese ratio basta depende de cómo se use el texto de verdad: WCAG fija un listón más bajo para el texto grande o en negrita que para el texto normal del cuerpo, porque los trazos más grandes y gruesos siguen siendo legibles con menos contraste. Esta herramienta muestra lo real, tus colores detrás de texto de verdad a varios tamaños, para que veas de un vistazo dónde funciona la pareja y dónde empieza a fallar.
Qué se muestra
Se dibujan seis tamaños de texto habituales con tus colores elegidos: pies de foto pequeños a 12 y 14px, texto de cuerpo a 16 y 18px, y titulares grandes a 24px y 32px en negrita. Cada uno lleva su requisito de contraste exacto e indica si lo cumple, siguiendo la regla WCAG de que el texto considerado grande, 24px en adelante, o 18,66px en adelante en negrita, solo necesita un ratio de 3:1, mientras que el texto más pequeño necesita 4.5:1.
Usa tus propias palabras
El texto de ejemplo por defecto es un pangrama neutro, pero escribir tu propio titular o párrafo es más útil: las formas de letra reales, las longitudes de palabra y el idioma afectan a lo legible que se siente una pareja de colores en la práctica, más allá de lo que capta el número de contraste por sí solo.
Cómo leer el resultado
Un ratio que falla para el tamaño de tu texto de cuerpo pero cumple para titulares significa que puedes usar estos colores de forma segura solo para texto grande, no para párrafos. Si nada cumple, los colores están demasiado cerca para cualquier uso normal y hay que separarlos más. Usa el comprobador de contraste para el ratio exacto y todos los niveles WCAG, incluido AAA, o el generador de paletas accesibles para ajustar un color hasta que cumpla.
Límites
Esto comprueba solo el contraste de color; no tiene en cuenta la fuente elegida, el espaciado entre letras ni el suavizado, que también afectan a la legibilidad real. No se sube nada, y la vista previa se calcula en tu navegador.
Preguntas frecuentes
¿Por qué el mismo contraste cumple a un tamaño y falla en otro?
WCAG exige menos contraste para el texto grande, 24px en adelante o 18,66px en negrita, porque los trazos más grandes siguen siendo legibles con más facilidad. El texto más pequeño necesita un ratio mayor.
¿Qué ratio de contraste necesito para el texto del cuerpo?
4.5:1 para WCAG AA, el nivel que más se exige.
¿Puedo previsualizar mi propio texto?
Sí. Escribe cualquier frase en el campo de ejemplo y sustituye al texto por defecto en cada tamaño.
¿Y si ningún tamaño cumple?
Los colores están demasiado cerca en contraste para un uso normal. Ajusta uno de ellos, o usa el generador de paletas accesibles para arreglarlo automáticamente.
¿El texto en negrita necesita menos contraste que el normal?
Sí, a partir de 18,66px. Por debajo de ese tamaño, la negrita y el normal necesitan el mismo ratio de 4.5:1.
¿Se envían mi texto o mis colores a algún sitio?
No. Todo se dibuja y se calcula en tu navegador.
Más herramientas
Otras utilidades que también funcionan sin salir de tu navegador.
Ajustar un color accesibleAjusta un color para que cumpla el contraste WCAG sobre un fondo, conservando su tono.
Comprobador de contraste de colorComprueba colores de texto y fondo según WCAG y obtén un arreglo que cumple.
Comprobar una paleta en escala de grisesComprueba si tu paleta de color sigue funcionando al convertirla a escala de grises.
Sacar el color de una imagenHaz clic en cualquier punto de una foto y obtén su color exacto en hex, RGB y HSL.
Extractor de colores de marcaObtén los colores dominantes de un logo o foto como códigos hex listos para usar.
Generador de paletas de colorCrea una paleta de color a juego a partir de un color base, en seis esquemas clásicos.