Combinaciones Básicas de Color Entre Texto y Color de Fondo

Combinaciones básicas de color entre texto y color de fondo • Silo Creativo

Página 1 de 21



COMPARTE!


1

   +

Combinaciones básicas de color entre texto y color de fondo Diseño Gráfico Diseño web ♥ Verónica Valenzuela ⋆ Colores, Tipografía  7 Mayo, 2015 32 comentarios

READ THIS ARTICLE IN ENGLISH

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.

https://www.silocreativo.com/combinaciones-basicas-de-color-entre-texto-y-color-de-fondo/

05-05-2017

Combinaciones básicas de color entre texto y color de fondo • Silo Creativo

Página 2 de 21

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.

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.

https://www.silocreativo.com/combinaciones-basicas-de-color-entre-texto-y-color-de-fondo/

05-05-2017

Combinaciones básicas de color entre texto y color de fondo • Silo Creativo

Página 3 de 21

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.

Amarillo y negro

https://www.silocreativo.com/combinaciones-basicas-de-color-entre-texto-y-color-de-fondo/

05-05-2017

Combinaciones básicas de color entre texto y color de fondo • Silo Creativo

Página 4 de 21

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.

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

https://www.silocreativo.com/combinaciones-basicas-de-color-entre-texto-y-color-de-fondo/

05-05-2017

Combinaciones básicas de color entre texto y color de fondo • Silo Creativo

Página 5 de 21

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

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.

https://www.silocreativo.com/combinaciones-basicas-de-color-entre-texto-y-color-de-fondo/

05-05-2017

Combinaciones básicas de color entre texto y color de fondo • Silo Creativo

Página 6 de 21

Escrito por Verónica Valenzuela Dibujo, pinto y hasta a veces coloreo en SiloCreativo. Además como desde pequeña quise ser escritora, con este blog cumplo mi sueño y escribo para compartir lo que voy aprendiendo. ¿Que tienes alguna duda? Pues aqui estoy!

No Te Puedes Perder...

5 combinaciones Google Fonts serif: Mi favorita la 4

5 combinaciones Google Font Sans Serif. Mi favorita: la 3

7 Consejos para que el Texto de tu Blog sea Legible

★★★★★ Combinaciones básicas de color entre texto y color de fondo, 4.23 / 5 (13 votos)

https://www.silocreativo.com/combinaciones-basicas-de-color-entre-texto-y-color-de-fondo/

05-05-2017

Combinaciones básicas de color entre texto y color de fondo • Silo Creativo

Página 7 de 21

32 COMENTARIOS EN “COMBINACIONES BÁSICAS DE COLOR ENTRE TEXTO Y COLOR DE FONDO”

11 Agosto, 2014 at 17:44

Eivan

Muy interesante articulo, me ha aclarado dudas que tenia respecto a colores/fuentes. Gracias^^! Responder

13 Agosto, 2014 at 10:30

Gracias a tí por comentar! Verónica Valenzuela

Un saludo! Responder

10 Agosto, 2016 at 0:24

muy bien (Y) jhon

Responder

https://www.silocreativo.com/combinaciones-basicas-de-color-entre-texto-y-color-de-fondo/

05-05-2017

Combinaciones básicas de color entre texto y color de fondo • Silo Creativo

Página 8 de 21

12 Agosto, 2014 at 3:12

Edgar Gutierrez

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. Responder

13 Agosto, 2014 at 12:55

Buenos días Edgar, Verónica Valenzuela

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 Responder

https://www.silocreativo.com/combinaciones-basicas-de-color-entre-texto-y-color-de-fondo/

05-05-2017

Combinaciones básicas de color entre texto y color de fondo • Silo Creativo

Página 9 de 21

1 Julio, 2015 at 15:23

Excelente Katherine Monje Pompejus

Responder

22 Agosto, 2014 at 20:43

Excelente Articulo. Gracias y sigue cosenchando Éxitos!!! Lore

Responder

25 Agosto, 2014 at 9:19

Muchas gracias Lore! Verónica Valenzuela

Un saludo! Responder

1 Noviembre, 2014 at 16:04

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

https://www.silocreativo.com/combinaciones-basicas-de-color-entre-texto-y-color-de-fondo/

05-05-2017

Combinaciones básicas de color entre texto y color de fondo • Silo Creativo

Jesús Navas Guerrero

Página 10 de 21

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. Responder

2 Noviembre, 2014 at 20:48

Verónica Valenzuela

Son pequeños detalles que hacen muy importante el buen entendimiento de aquello que queremos transmitir. Muchas gracias por comentar. Un saludo! Responder

7 Noviembre, 2014 at 19:07

Excelente información y muy útil. ¡Saludos¡ Damiana

Responder

11 Noviembre, 2014 at 11:32

Gracias Damiana! Responder

https://www.silocreativo.com/combinaciones-basicas-de-color-entre-texto-y-color-de-fondo/

05-05-2017

Combinaciones básicas de color entre texto y color de fondo • Silo Creativo

Página 11 de 21

Verónica Valenzuela

14 Noviembre, 2014 at 16:31

Muy interesante tus Escritos. Quiero perfeccionar el diseño gráfico y estos consejos Victor

me ayudaran mucho, Gracias por dedicar tiempo para hacer esto. Responder

17 Noviembre, 2014 at 11:22

Gracias por tomarte tiempo en leernos! Verónica Valenzuela

Un saludo Victor! Responder

16 Diciembre, 2014 at 16:20

EDWIN LADINO BALLEN

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 Responder

https://www.silocreativo.com/combinaciones-basicas-de-color-entre-texto-y-color-de-fondo/

05-05-2017

Combinaciones básicas de color entre texto y color de fondo • Silo Creativo

Página 12 de 21

16 Diciembre, 2014 at 20:41

Hola Edwin, Verónica Valenzuela

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! Responder

26 Diciembre, 2014 at 16:50

PaPe

Gracias vero por todos los posts, realmente muy buenos todos!! estoy ideando mi blog y me han sido de mucha utilidad…Saludos! Responder

30 Diciembre, 2014 at 10:19

Gracias Pape! Nos leemos. Verónica Valenzuela

Responder

https://www.silocreativo.com/combinaciones-basicas-de-color-entre-texto-y-color-de-fondo/

05-05-2017

Combinaciones básicas de color entre texto y color de fondo • Silo Creativo

Página 13 de 21

15 Abril, 2015 at 13:42

Adriana Rivera Campos

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. Responder

12 Junio, 2015 at 12:34

Stampaprint

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 Responder

15 Junio, 2015 at 9:45

Hola Antonia, Verónica Valenzuela

Muy interesante tu reflexión. Los colores lo son todo y con ellos somos capaces de expresar sentimientos y sensaciones. Un saludo!

https://www.silocreativo.com/combinaciones-basicas-de-color-entre-texto-y-color-de-fondo/

05-05-2017

Combinaciones básicas de color entre texto y color de fondo • Silo Creativo

Página 14 de 21

Responder

18 Septiembre, 2015 at 19:56

Adelaida Martínez

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. Responder

18 Septiembre, 2015 at 22:30

Hola Adelaila, Verónica Valenzuela

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.

https://www.silocreativo.com/combinaciones-basicas-de-color-entre-texto-y-color-de-fondo/

05-05-2017

Combinaciones básicas de color entre texto y color de fondo • Silo Creativo

Página 15 de 21

Un saludo! Responder

14 Diciembre, 2015 at 21:50

Edu

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? Responder

15 Diciembre, 2015 at 11:34

Hola Edu, Verónica Valenzuela

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! Responder

4 Enero, 2016 at 17:42

https://www.silocreativo.com/combinaciones-basicas-de-color-entre-texto-y-color-de-fondo/

05-05-2017

Combinaciones básicas de color entre texto y color de fondo • Silo Creativo

Alex

Página 16 de 21

Excelente su artículo, esta bien documentado e ilustrado. Muchas gracias por su trabajo. Responder

18 Enero, 2016 at 19:20

José

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. Responder

18 Abril, 2016 at 3:56

Excelente articulo. Sigue escribiendo; es de mucha ayuda. Johalice Hernández

Responder

https://www.silocreativo.com/combinaciones-basicas-de-color-entre-texto-y-color-de-fondo/

05-05-2017

Combinaciones básicas de color entre texto y color de fondo • Silo Creativo

Página 17 de 21

23 Junio, 2016 at 20:42

Carlos

muy buena información ademas de didáctica…..y en relación a Imagotipo cual seria la mejor idea de combinación Responder

15 Octubre, 2016 at 13:49

Metagrafic SBD

Muy buen artículo Verónica. La información es muy útil y clara. Sigue con estos posts. Saludos. Responder

14 Enero, 2017 at 22:54

Lautaro

Tengo una duda. Si en una remera el texto es blanco, que color me conviene que sea el fondo? Responder

16 Enero, 2017 at 11:39

Hola!

https://www.silocreativo.com/combinaciones-basicas-de-color-entre-texto-y-color-de-fondo/

05-05-2017

Combinaciones básicas de color entre texto y color de fondo • Silo Creativo

Verónica Valenzuela

Página 18 de 21

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! Responder

DEJA UN COMENTARIO

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

Comentario

Nombre *

Correo electrónico *

Web

https://www.silocreativo.com/combinaciones-basicas-de-color-entre-texto-y-color-de-fondo/

05-05-2017

Combinaciones básicas de color entre texto y color de fondo • Silo Creativo

Página 19 de 21

Recibir un email con las últimas noticias y recursos gratuitos de SiloCreativo PUBLICAR COMENTARIO

Recibir un email con los siguientes comentarios a esta entrada.

ej. WordPress

BUSCAR

ÚNETE A SILOCREATIVO! Únete a SiloCreativo y recibe las últimas noticias y recursos gratuitos sobre diseño web, gráfico y WordPress

https://www.silocreativo.com/combinaciones-basicas-de-color-entre-texto-y-color-de-fondo/

05-05-2017

Combinaciones básicas de color entre texto y color de fondo • Silo Creativo

Página 20 de 21

Nombre

Email

¡SUSCRÍBETE!

CONÓCENOS!

¡Vitamina para mentes creativas.! Silo Creativo somos Ricardo y Verónica, ¿Quieres conocernos un poco más?

ETIQUETAS

Blogging Colores CSS Descargables Ecommerce Formación Ghost hardware Html

https://www.silocreativo.com/combinaciones-basicas-de-color-entre-texto-y-color-de-fondo/

05-05-2017

Combinaciones básicas de color entre texto y color de fondo • Silo Creativo

Página 21 de 21

Ilustraciones Inspiración Packaging Plantillas Plugins SEO SiloMag Tipografía Tutoriales UX Videos

Diseñado con cariño ;) Contacto | Aviso Legal

        

Nuestra web usa cookies para mejorar la experiencia de usuario y navegación +Info

https://www.silocreativo.com/combinaciones-basicas-de-color-entre-texto-y-color-de-fondo/

PERFECTO!

05-05-2017