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

Combinaciones bsicas de color entre texto y color de fondo Silo Creativo Pgina 1 de 21
COMPARTE!

Combinaciones bsicas de
1 color entre texto y color de
fondo

Diseo Grfico
+ Diseo web
Vernica Valenzuela
Colores, Tipografa
7 Mayo, 2015
32 comentarios
READ THIS ARTICLE IN ENGLISH
Cuando vamos a disear un cartel, una revista, una web o blog., cualquier
elemento grafico en el que se incluyan tipografas y fondos, es muy importante
tener en cuenta las combinaciones de fondo y texto, al igual que lo hacamos
entre las propias tipografas.
https://www.silocreativo.com/combinaciones-basicas-de-color-entre-texto-y-color-de-fondo/ 05-05-2017
Ya conocemos perfectamente la psicologa de muchos de los colores ms

usados en el diseo 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 diseo es la funcionalidad del
mismo, y con los textos esto hay que llevarlo hasta el final.
Si estamos trabajando sobre imgenes de fondo, como os mostrbamos en

estos ejemplos, la mejor solucin es realizar el mensaje en blanco. A la hora de
leer un texto, independientemente del tamao 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 opcin. Si no hay contraste no hay legibilidad.
Por esto, hoy os voy a mostrar unos ejemplos de texto, sobre fondos de
colores bsicos, para que podamos ir descubriendo el efecto de cada uno de
ellos. Son ejemplos bsicos, sobre los que es imposible equivocarse.
Probaremos con una tipografa sans serif, open sans, para que ni la tipografa
nos distraiga del mensaje.
Blanco y negro
Es la combinacin ms conocida y que siempre funciona. Este mismo texto lo
estis leyendo en negro sobre blanco, y el 95% de los textos impresos tales
como revistas, peridicos se desarrollan de esta manera. Para textos largos
que van a leerse es la combinacin perfecta. Es la combinacin que mejor se
lee de cerca. Es el mayor contrate de todos, claridad y oscuridad, por lo que el
mensaje se transmite de manera ms clara y directa.
Sin embargo, al realizar el negativo de esta composicin, es decir una blanco

sobre negro, los textos se leen peor, lo que hacen que se pierda importancia.
Amarillo y negro
Es el acorde de las seales de advertencia y esto tiene su origen en que es la

combinacin que mejor se lee y se ve de lejos. No es una buena combinacin
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 bao que estn limpiando peligro de resbalar o en productos de
limpieza que tienen agentes txicos.
Rojo y blanco
Erroneamente se cree que es una buena combinacin, porque los textos en
rojo llaman ms la atencin, pero sin embargo ocurre todo lo contrario. Son
menos ledos porque se leen mal y dan a entender que su contenido es poco
serio. Si adems, los ponemos en negativo, blanco sobre rojo, son menos
legibles aun. Las letras rojas distraen, los fondos rojos llaman la atencin. A
todos nos viene a la cabeza la seal de STOP, el mensaje es en blanco, pero la
forma de la seal es tan caracterstica, un octgono rojo, que aunque no
pusieran las letras nos detendramos
Texto multicolor
El uso de un texto multicolor, es casi como la ultima regla de la combinacin
tipogrfica: nunca est justificado. Hay una diferencia entre combinar colores y
tipografas 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.
Escrito porVernica Valenzuela

Dibujo, pinto y hasta a veces coloreo en SiloCreativo. Adems
como desde pequea quise ser escritora, con este blog
cumplo mi sueo y escribo para compartir lo que voy
aprendiendo. Que tienes alguna duda? Pues aqui estoy!
No Te Puedes Perder...
5 combinaciones 5 combinaciones 7 Consejos para

Google Fonts serif: Google Font Sans que el Texto de tu
Mi favorita la 4 Serif. Mi favorita: Blog sea Legible
la 3

Combinaciones bsicas de color entre texto y color de fondo, 4.23 / 5 (13 votos)
32 COMENTARIOS EN COMBINACIONES BSICAS DE COLOR ENTRE TEXTO Y COLOR DE

FONDO
11 Agosto, 2014 at 17:44
Muy interesante articulo, me ha aclarado dudas que tenia respecto a colores/fuentes.

Gracias^^!
Eivan
Responder
13 Agosto, 2014 at 10:30
Gracias a t por comentar!
Vernica
Valenzuela Un saludo!
Responder
10 Agosto, 2016 at 0:24
muy bien (Y)
jhon Responder
12 Agosto, 2014 at 3:12
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 diseo, por
Edgar
Gutierrez eso siempre se recomienda un gris bastante oscuro y bueno tambin destacar que
combinar un color oscuro con letras blancas, es una opcin para resaltar parrafos
cortos pero no textos largos como artculos.
Excelente, gracias por compartir esta informacin.

Responder
13 Agosto, 2014 at 12:55
Buenos das Edgar,
Vernica
Valenzuela Como comentas tambin funciona muy bien usar un gris oscuro sobre fondo
blanco para la lectura. Dependiendo del grosor de la tipografa entre otras
cosas, podemos usar un gris ms claro u oscuro. En cualquier caso, es la
mejor combinacin negro/gris sobre blanco, en la lectura prima la legibilidad y
los contrastes nos ayudan.
Gracias por comentar!
Un saludo
Responder
1 Julio, 2015 at 15:23
Excelente
Katherine Responder
Monje
Pompejus
22 Agosto, 2014 at 20:43
Excelente Articulo. Gracias y sigue cosenchando xitos!!!
Lore Responder
25 Agosto, 2014 at 9:19
Muchas gracias Lore!

Un saludo!
Vernica
Valenzuela Responder
1 Noviembre, 2014 at 16:04
Muy buen artculo, felicidades Vernica.

La verdad es que los seres humanos somos muy sensibles a los colores. Estos entran
por nuestra retina e impactan de una forma muy rpida y directa en nuestra parte
Jess emocional.
Navas
Guerrero Es verdad que con un mal colorido y formato grfico en una web, muchas personas no
prestaran ni tres segundos de atencin.
Responder
Son pequeos detalles que hacen muy importante el buen entendimiento de

aquello que queremos transmitir.
Vernica
Valenzuela
Muchas gracias por comentar.
Un saludo!
Responder
Excelente informacin y muy til. Saludos
Damiana Responder
Gracias Damiana!
Responder
Vernica
Valenzuela
Muy interesante tus Escritos. Quiero perfeccionar el diseo grfico y estos consejos
me ayudaran mucho, Gracias por dedicar tiempo para hacer esto.
Victor
Responder
Gracias por tomarte tiempo en leernos!
Vernica
Valenzuela Un saludo Victor!
Responder
16 Diciembre, 2014 at 16:20
Felicitaciones por este excelente artculo, tengo una inquietud, deseo imprimir unos
stickers de tamao 4cms x 4cms pero ya hice la prueba y la fuente de los datos de
EDWIN
LADINO contacto no se leen, quedan borrosos, el diseo esta un fondo azul claro y la fuente en
BALLEN blanco, como se podra hacer legible en este tamao, que tipo de fuente debo utilizar y
que contraste de color me beneficiaria. Muchas gracias de antemano
Responder
Hola Edwin,
Vernica
Valenzuela
Por lo que me cuentas, la mejor opcin es cambiar uno de los colores. O bien
pones de fondo un color azul ms oscuro, o pones la tipografa 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
Gracias vero por todos los posts, realmente muy buenos todos!! estoy ideando mi blog
y me han sido de mucha utilidadSaludos!
PaPe
Responder
Gracias Pape! Nos leemos.
Vernica Responder
Valenzuela
15 Abril, 2015 at 13:42
Muy interesante me quedan claras muchas cosas sobre una presentacion que debo
realizar con paneles de gran tamao
Adriana
Rivera Lo que buscaba en si es psicologa del color en ambientes pedagogicos, si alguien
Campos tuviera algun dato preciso, estria totalmente agradecida.
Responder
12 Junio, 2015 at 12:34
Muy interesante, felicidades. Personalmente creo que los colores pueden ir ms all de
nuestros ojos y comunicar por s solos. Por lo tanto, en la comunicacin visual es
Stampaprint
necesario tener en cuenta estas caractersticas intrnsecas de cualquier tonalidad. Un
saludo, Antonia
Responder
15 Junio, 2015 at 9:45
Hola Antonia,
Vernica
Valenzuela Muy interesante tu reflexin. Los colores lo son todo y con ellos somos
capaces de expresar sentimientos y sensaciones.
Un saludo!
Responder
18 Septiembre, 2015 at 19:56
Hola Vernica, quisiera preguntarte qu tan funcional es usar letras blancas en fondos
contrastantes, no precisamente negros. Tengo una correctora de estilo que menciona
Adelaida
Martnez que ningn material de difusin como carteles, folletos y trpticos, deben contener
letras blancas en fondos de color (de ningn tipo) porque no es funcional el diseo, es
decir, que el pblico no leera el material.
Me podras ayudar por fa?
Mil gracias.
Responder
18 Septiembre, 2015 at 22:30
Hola Adelaila,
Vernica
Valenzuela La recomendacin general es que los textos vayan en negro sobre superficies
claras, pero depende del tipo de material podemos incluir pequeos textos
sobre fondos. El mensaje principal siempre debe entenderse, pero podemos
usar fondo oscuros sobre textos en blancos. Muchas veces hemos usado
imgenes 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!
Responder
Muy interesante aunque la verdad soy psimo en eso de colores como la mayora de
hombres para mi solo blanco y negro xD y en un fondo dorado q color de letra usara?
Edu
Responder
Hola Edu,
Vernica
Valenzuela Me alegro que te haya gustado. Sobre un color dorado de fondo es difcil que
destaquen muchos colores. Yo probara 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, quizs pierdan legibilidad. Creo que en este caso el negro es la mejor
opcin!
Gracias por comentar. Un saludo!

Responder
4 Enero, 2016 at 17:42
Excelente su artculo, esta bien documentado e ilustrado. Muchas gracias por su

Alex trabajo.
Responder
18 Enero, 2016 at 19:20
Buenas tardes.
Me cuesta leer muchas web,s porque usan el color gris suave sobre fondo blanco,
Jos
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 pgina 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 cmodamente 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 ms 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 Responder
Hernndez
23 Junio, 2016 at 20:42
muy buena informacin ademas de didctica..y en relacin a Imagotipo cual seria la

mejor idea de combinacin
Carlos
Responder
15 Octubre, 2016 at 13:49
Muy buen artculo Vernica. La informacin es muy til y clara. Sigue con estos posts.
Saludos.
Metagrafic
SBD Responder
14 Enero, 2017 at 22:54
Tengo una duda. Si en una remera el texto es blanco, que color me conviene que sea el
fondo?
Lautaro
Responder
16 Enero, 2017 at 11:39
Hola!
Vernica Depender de los dems colores que se incluyan en el proyecto, pero en

Valenzuela
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 direccin de correo electrnico no ser publicada. Los campos obligatorios estn marcados con
*
Comentario
Nombre * Correo electrnico * Web
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 diseo web, grfico y WordPress
Nombre
Email
SUSCRBETE!
CONCENOS!
Vitamina para mentes creativas.! Silo Creativo somos Ricardo y Vernica, Quieres conocernos un poco ms?
ETIQUETAS
Blogging Colores CSS Descargables Ecommerce Formacin Ghost hardware Html
Ilustraciones Inspiracin Packaging Plantillas Plugins SEO SiloMag Tipografa Tutoriales

UX Videos
Diseado con cario ;) Contacto | Aviso Legal
Nuestra web usa cookies para mejorar la experiencia de usuario y navegacin +Info PERFECTO!

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

Încărcat de

Informații document

Descriere originală:

Drepturi de autor

Formate disponibile

Partajați acest document

Partajați sau inserați document

Opțiuni de partajare

Vi se pare util acest document?

Este necorespunzător acest conținut?

Drepturi de autor:

Formate disponibile

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

Încărcat de

Drepturi de autor:

Formate disponibile

Combinaciones bsicas de color entre texto y color de fondo Silo Creativo Pgina 1 de 21

READ THIS ARTICLE IN ENGLISH

Ya conocemos perfectamente la psicologa de muchos de los colores ms

Si estamos trabajando sobre imgenes de fondo, como os mostrbamos en

Sin embargo, al realizar el negativo de esta composicin, es decir una blanco

Es el acorde de las seales de advertencia y esto tiene su origen en que es la

Escrito porVernica Valenzuela

5 combinaciones 5 combinaciones 7 Consejos para

32 COMENTARIOS EN COMBINACIONES BSICAS DE COLOR ENTRE TEXTO Y COLOR DE

11 Agosto, 2014 at 17:44

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

13 Agosto, 2014 at 10:30

Gracias a t por comentar!

10 Agosto, 2016 at 0:24

muy bien (Y)

12 Agosto, 2014 at 3:12

Excelente, gracias por compartir esta informacin.

13 Agosto, 2014 at 12:55

Buenos das Edgar,

Gracias por comentar!

1 Julio, 2015 at 15:23

22 Agosto, 2014 at 20:43

Excelente Articulo. Gracias y sigue cosenchando xitos!!!

25 Agosto, 2014 at 9:19

Muchas gracias Lore!

1 Noviembre, 2014 at 16:04

Muy buen artculo, felicidades Vernica.

2 Noviembre, 2014 at 20:48

Son pequeos detalles que hacen muy importante el buen entendimiento de

7 Noviembre, 2014 at 19:07

Excelente informacin y muy til. Saludos

11 Noviembre, 2014 at 11:32

14 Noviembre, 2014 at 16:31

17 Noviembre, 2014 at 11:22

Gracias por tomarte tiempo en leernos!

16 Diciembre, 2014 at 16:20

16 Diciembre, 2014 at 20:41

Espero haberte sido de ayuda.

26 Diciembre, 2014 at 16:50

30 Diciembre, 2014 at 10:19

Gracias Pape! Nos leemos.

15 Abril, 2015 at 13:42

12 Junio, 2015 at 12:34

15 Junio, 2015 at 9:45

18 Septiembre, 2015 at 19:56

Me podras ayudar por fa?

18 Septiembre, 2015 at 22:30

14 Diciembre, 2015 at 21:50

15 Diciembre, 2015 at 11:34

Gracias por comentar. Un saludo!

4 Enero, 2016 at 17:42

Excelente su artculo, esta bien documentado e ilustrado. Muchas gracias por su

18 Enero, 2016 at 19:20

18 Abril, 2016 at 3:56

Excelente articulo. Sigue escribiendo; es de mucha ayuda.

23 Junio, 2016 at 20:42

muy buena informacin ademas de didctica..y en relacin a Imagotipo cual seria la

15 Octubre, 2016 at 13:49

14 Enero, 2017 at 22:54

16 Enero, 2017 at 11:39

Vernica Depender de los dems colores que se incluyan en el proyecto, pero en

Nombre * Correo electrnico * Web

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