Combinaciones básicas de color entre texto y color de fondo

Cuando vamos a diseñar un cartel, una revista, una web o blog…., cualquier elemento grafico en el que se incluyan tipografías y fondos, es muy importante tener en cuenta las combinaciones de fondo y texto, al igual que lo hacíamos entre las propias tipografías.

Ya conocemos perfectamente la psicología de muchos de los colores más usados en el diseño por lo que podemos determinar el uso de ellos. Pues bien, cuando hablamos de textos que se van a imprimir sobre fondos lo que debe prevalecer sobre todo es la legibilidad de los mismos. No podemos hacer que el lector se canse a la mitad, o que sea tan ilegible que acabe con dolor de cabeza. Una de las partes principales del diseño es la funcionalidad del mismo, y con los textos esto hay que llevarlo hasta el final.

Si estamos trabajando sobre imágenes de fondo, como os mostrábamos en estos ejemplos, la mejor solución es realizar el mensaje en blanco. A la hora de leer un texto, independientemente del tamaño del mismo, ante todo hemos de buscar el contraste entre los colores de fondo y texto, por lo que sobre un fondo en el que predominen los colores fuertes, el blanco siempre va a ser una buena opción. Si no hay contraste no hay legibilidad.

mala-combinacion-texto-fondo

Por esto, hoy os voy a mostrar unos ejemplos de texto, sobre fondos de colores básicos, para que podamos ir descubriendo el efecto de cada uno de ellos. Son ejemplos básicos, sobre los que es imposible equivocarse. Probaremos con una tipografía sans serif, open sans, para que ni la tipografía nos distraiga del mensaje.

Blanco y negro

Es la combinación más conocida y que siempre funciona. Este mismo texto lo estáis leyendo en negro sobre blanco, y el 95% de los textos impresos tales como revistas, periódicos… se desarrollan de esta manera. Para textos largos que van a leerse es la combinación perfecta. Es la combinación que mejor se lee de cerca. Es el mayor contrate de todos, claridad y oscuridad, por lo que el mensaje se transmite de manera más clara y directa.

Sin embargo, al realizar el negativo de esta composición, es decir una blanco sobre negro, los textos se leen peor, lo que hacen que se pierda importancia.

combinacion-blanco-negro

Amarillo y negro

Es el acorde de las señales de advertencia y esto tiene su origen en que es la combinación que mejor se lee y se ve de lejos. No es una buena combinación para textos largos, pero si para crear mensajes claros que deben ser vistos por todos. Todos recordamos mensajes de advertencia cuando entramos a un cuarto de baño que están limpiando “peligro de resbalar” o en productos de limpieza que tienen agentes tóxicos.

combinacion-texto-amarillo-negro

Rojo y blanco

Erroneamente se cree que es una buena combinación, porque los textos en rojo llaman más la atención, pero sin embargo ocurre todo lo contrario. Son menos leídos porque se leen mal y dan a entender que su contenido es poco serio. Si además, los ponemos en negativo, blanco sobre rojo, son menos legibles aun. Las letras rojas distraen, los fondos rojos llaman la atención. A todos nos viene a la cabeza la señal de STOP, el mensaje es en blanco, pero la forma de la señal es tan característica, un octógono rojo, que aunque no pusieran las letras nos detendríamos 😉

combinacion-texto-blanco-rojo

Texto multicolor

El uso de un texto multicolor, es casi como la ultima regla de la combinación tipográfica: nunca está justificado. Hay una diferencia entre combinar colores y tipografías y que el texto en si sea multicolor. El resultado de esto es la ilegibilidad del mismo. Hay muchos puntos en los que podemos jugar con el color, pero siempre dando uniformidad. El texto, como siempre decimos ha de ser legible y por lo tanto la uniformidad del color es muy importante.

mal-uso-texto-multicolor

Comentarios (47)

        1. Hola Carls,

          Por lo que me cuentas, aun sin saber la tonalidad del celeste, considero que no hay suficiente contraste entre ambas. Yo te animaría a poner un tono azul mas intenso, de manera que contrasten.

          Un saludo!

        2. hola carls leí el articulo considero que la letra blanca no combina con el azul celeste ya que es un color muy tenue o bajo recomendaría unas letra negras, saludos

  1. tengo que apuntar que usar el 100% negro en web (black, #000 o rgb(0,0,0)) no es muy bueno, quizas para la lectura pero no combinara 100% en nuestro sitio o diseño, por eso siempre se recomienda un gris bastante oscuro y bueno también destacar que combinar un color oscuro con letras blancas, es una opción para resaltar parrafos cortos pero no textos largos como artículos.

    Excelente, gracias por compartir esta información.

    1. Buenos días Edgar,

      Como comentas también funciona muy bien usar un gris oscuro sobre fondo blanco para la lectura. Dependiendo del grosor de la tipografía entre otras cosas, podemos usar un gris más claro u oscuro. En cualquier caso, es la mejor combinación negro/gris sobre blanco, en la lectura prima la legibilidad y los contrastes nos ayudan.

      Gracias por comentar!

      Un saludo

  2. Muy buen artículo, felicidades Verónica.
    La verdad es que los seres humanos somos muy sensibles a los colores. Estos entran por nuestra retina e impactan de una forma muy rápida y directa en nuestra parte emocional.
    Es verdad que con un mal colorido y formato gráfico en una web, muchas personas no prestarían ni tres segundos de atención.

  3. Muy interesante tus Escritos. Quiero perfeccionar el diseño gráfico y estos consejos me ayudaran mucho, Gracias por dedicar tiempo para hacer esto.

  4. Felicitaciones por este excelente artículo, tengo una inquietud, deseo imprimir unos stickers de tamaño 4cms x 4cms pero ya hice la prueba y la fuente de los datos de contacto no se leen, quedan borrosos, el diseño esta un fondo azul claro y la fuente en blanco, como se podría hacer legible en este tamaño, que tipo de fuente debo utilizar y que contraste de color me beneficiaria. Muchas gracias de antemano

    1. Hola Edwin,

      Por lo que me cuentas, la mejor opción es cambiar uno de los colores. O bien pones de fondo un color azul más oscuro, o pones la tipografía en blanco. Si el azul es clarito, no contrasta nada con el fondo y por eso se ve borroso.

      Espero haberte sido de ayuda.

      Un saludo!

  5. Muy interesante… me quedan claras muchas cosas sobre una presentacion que debo realizar con paneles de gran tamaño…
    Lo que buscaba en si es psicología del color en ambientes pedagogicos, si alguien tuviera algun dato preciso, estria totalmente agradecida.

  6. Muy interesante, felicidades. Personalmente creo que los colores pueden ir más allá de nuestros ojos y comunicar por sí solos. Por lo tanto, en la comunicación visual es necesario tener en cuenta estas características intrínsecas de cualquier tonalidad. Un saludo, Antonia

  7. Hola Verónica, quisiera preguntarte qué tan funcional es usar letras blancas en fondos contrastantes, no precisamente negros. Tengo una correctora de estilo que menciona que ningún material de difusión como carteles, folletos y trípticos, deben contener letras blancas en fondos de color (de ningún tipo) porque no es funcional el diseño, es decir, que el público no leería el material.

    ¿Me podrías ayudar por fa?

    Mil gracias.

    1. Hola Adelaila,

      La recomendación general es que los textos vayan en negro sobre superficies claras, pero depende del tipo de material podemos incluir pequeños textos sobre fondos. El mensaje principal siempre debe entenderse, pero podemos usar fondo oscuros sobre textos en blancos. Muchas veces hemos usado imágenes y sobrepuesto frases en blanco sobre ellos con un buen resultado. Lo importante es que se lea bien el mensaje, por lo que si quieres escribir el texto en blanco, busca el color o imagen de fondo marque ese contraste.

      Un saludo!

  8. Muy interesante aunque la verdad soy pésimo en eso de colores como la mayoría de hombres para mi solo blanco y negro xD y en un fondo dorado q color de letra usaría?

    1. Hola Edu,

      Me alegro que te haya gustado. Sobre un color dorado de fondo es difícil que destaquen muchos colores. Yo probaría con un negro o un color que hiciera contraste. El rosa va muy bien con el dorado, pero si lo que vas a poner son letras, quizás pierdan legibilidad. Creo que en este caso el negro es la mejor opción! 🙂

      Gracias por comentar. Un saludo!

  9. Buenas tardes.
    Me cuesta leer muchas web,s porque usan el color gris suave sobre fondo blanco, cosa que no comprendo, porque normalmente las publicaciones en papel son con letra negra sobre fondo blanco.
    Hay algunos sitios en que ese gris es tan suave que cuesta leerlo con comodidad, como es, por ejemplo, la página del Museo de El Prado.
    Este comentario, por ejemplo, está en gris medio, y esta intensidad de color no permite (a mí al menos) leer cómodamente largos textos. Recurro a veces a marcar el texto como si quisiera copiarlo, de esa manera se establece un fondo azul con letras blancas, y es más «legible».
    ¿Por qué se usa tanto el gris?
    Gracias por las aclaraciones.

    1. Hola!

      Dependerá de los demás colores que se incluyan en el proyecto, pero en general el color tiene que dar contraste, por lo que debes decantarte por un color con intensidad y dejar de lado los colores pasteles o aquellos que se acerquen al blanco.

      Un saludo!

  10. Sumamente interesante. Hay aspectos en los que no habría caído de no ser por tus puntualizaciones y tus ejemplos. Todos ellos muy visuales. Mil gracias.

  11. hola, para la lectura de textos largos en ordenadores, no seria mejor negro sobre color claro en lugar de blanco? El blanco brilla mucho y reducir un poco ese contraste creo que seria mas saludable para la vista.
    gracias

    1. Hola Fer!

      Como bien dices, es recomendable para la vista usar en nuestra pantallas interfaces oscuras, ya que reducen la fatiga visual. Pero claro, tal como explicamos en el artículo, la legibilidad de los textos es bastante menor que si usamos la combinación contraria de colores.

      Por eso, cuando estemos diseñando, debemos reflexionar sobre cual es nuestra prioridad: la legibilidad del texto o que no causemos cansancio visual. Si el entorno / diseño que estemos creando, sabemos de antemano que va a ser u sitio donde nuestros usuarios van a pasar muchas horas, y la mayoria de ellas no van a estar haciendo una lectura intensiva de texto, es mejor usar fondo oscuro con textos o iconos claros. Si es al contrario, y la lectura si va a ser intensiva, mejor usar fondo claro y tipografías en negro para que tengan una mejor legibilidad.

      Espero que te haya servido de ayuda. Un saludo, y gracias por tu comentario!

  12. Voy a pintar un pitufo a mi nieto para un taburete, los colores del pitufo son rojo y turquesa, qué color puedo darle al fondo dibujo, que no sea blanco?.
    Me ha gustado mucho tu artículo, muchas gracias.

  13. Tengo que enviar a confeccionar un letrero luminoso y tú artículo dió en el clavo con las interrogantes que tenía, muchas gracias, excelente explicacion

  14. Hola,
    Necesito hacer una presentación de clase.
    Me gustan los colores fosforescentes, pero el fondo de las presentaciones tienen que ser blancas, que colores me recomendaríais?
    La clase es grande hay muchos compañeros y de lejos depende de que letras no se ven mucho.
    Estoy muy confusa, el texto lo tengo hecho, pero me falta el color del texto.

  15. Hola me piden un cuadro con fondo de color y letras multicolor en pasteles
    Pienso que al ser el fondo de color se va a perder el contenido.
    Porque tiene pared blanca para colgarlo. Yo sugerí un color manteca de fondo pero lo quieren en otro color. ¿Como podría manejarlo?

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *