Color

El color es un elemento fundamental a la hora de comunicar la personalidad de nuestra marca. El uso correcto de nuestra paleta de colores es fundamental para mantener una imagen coherente.


Uso del color

El uso del color también afecta a la identificación y comprensión de la información, por ello es básico utilizar combinaciones entre texto y fondo, que favorezcan un mínimo de contraste visual, así como la combinación de colores sin texto.

El contraste visual es la relación entre la luminancia de un elemento y la del fondo.

En el caso de que el elemento que se sitúa por delante del fondo sea un texto, la relación mínima debe ser de al menos 4,5:1

Sin embargo, si el texto tiene unas dimensiones grandes (18 pt o más; 14 pt en negrita), la relación de contraste requerida es menor, más concretamente de 3:1.

Herramientas para comprobar contraste


Combinaciones de texto y colores de fondo

Como norma general, se emplea texto de color negro sobre los colores básicos (naranja, azul y amarillo). Se podrá utilizar texto de color naranja sobre fondo blanco, si el tamaño del mismo es superior a 24px/18pt (o 19px/14pt si está en negrita).

El texto en blanco se usa sobre el fondo negro y sobre fondos rellenos de colores especiales (Banca Patrimonial, Bankinter Invesment y Family Office).

En el caso de los enlaces, se aplica la norma anterior. Únicamente se da una excepción con el fondo blanco, en este caso el color del enlace se establece mediante el naranja para enlaces.

Tabla colores

Color Fondo Texto
Negro
Blanco
Enlaces
Negro
#212425
Blanco
#FFFFFF
Texto
AAA 17.6
Texto
AA 5.2
Naranja
#FF8D30
Texto
AAA 7.1
Texto
AAA 7.1
Azul
#B7F0F0
Texto
AAA 13
Texto
AAA 13
Amarillo
#FED227
Texto
AAA 11
Texto
AAA 11
Banca Patrimonial
#AF6200
Texto
AA 4.5
Texto
AA 4.5
Bankinter Invesment
#687B54
Texto
AA 4.5
Texto
AA 4.5
Family Office
#2C4859
Texto
AAA 10
Texto
AAA 10
Naranja enlaces
#C05600
AAAContraste 7 o más
AA Contraste 4.5 o más
About WCAG 2.0 contrast