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

(1)

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

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.

READ THIS ARTICLE IN ENGLISH

(2)

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.

(3)

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.

(4)

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

(5)

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.

(6)

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

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

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

(7)

Eivan

11 Agosto, 2014 at 17:44

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

Responder

Verónica Valenzuela

13 Agosto, 2014 at 10:30

Gracias a tí por comentar! Un saludo!

Responder

jhon

10 Agosto, 2016 at 0:24

muy bien (Y) Responder

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

(8)

Edgar Gutierrez

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 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,

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

(9)

Katherine Monje Pompejus 1 Julio, 2015 at 15:23 Excelente Responder Lore 22 Agosto, 2014 at 20:43

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

25 Agosto, 2014 at 9:19

Muchas gracias Lore! 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

(10)

Jesús Navas Guerrero

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

Son pequeños detalles que hacen muy importante el buen entendimiento de aquello que queremos transmitir.

Muchas gracias por comentar. Un saludo!

Responder

Damiana

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

Gracias Damiana! Responder

(11)

Victor

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

Responder

Gracias por tomarte tiempo en leernos! Un saludo Victor! Responder EDWIN LADINO BALLEN 16 Diciembre, 2014 at 16:20

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

(12)

16 Diciembre, 2014 at 20:41

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

PaPe

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

Responder

Gracias Pape! Nos leemos. Responder

(13)

Adriana Rivera Campos

15 Abril, 2015 at 13:42

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

Stampaprint

12 Junio, 2015 at 12:34

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 Verónica Valenzuela 15 Junio, 2015 at 9:45 Hola Antonia,

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

(14)

Responder

Adelaida Martínez

18 Septiembre, 2015 at 19:56

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 Verónica Valenzuela 18 Septiembre, 2015 at 22:30 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.

(15)

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

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

(16)

Alex

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

Responder

José

18 Enero, 2016 at 19:20

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

Johalice Hernández

18 Abril, 2016 at 3:56

Excelente articulo. Sigue escribiendo; es de mucha ayuda. Responder

(17)

Carlos

23 Junio, 2016 at 20:42

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

Responder

Metagrafic SBD

15 Octubre, 2016 at 13:49

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

Responder

Lautaro

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?

Responder

16 Enero, 2017 at 11:39

(18)

Verónica

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

Comentario

Nombre * Correo electrónico * Web

DEJA UN COMENTARIO

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

(19)

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

Recibir un email con los siguientes comentarios a esta entrada.

PUBLICAR COMENTARIO

ÚNETE A SILOCREATIVO!

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

(20)

Blogging Colores CSS Descargables Ecommerce Formación Ghost hardware Html

Nombre

Email

CONÓCENOS!

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

ETIQUETAS ¡SUSCRÍBETE!

(21)

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

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

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

1

+