Introdução

É possível customizar as cores de diversos elementos da interface do SDK de Captura de Documentos ClearSale para que fique de acordo com o branding da sua empresa.

As possibilidades de customização seguem um sistema onde podem ser utilizadas até 5 cores diferentes que impactarão componentes específicos em tela:

• PrimaryColor:
  Será aplicado como cor de fundo de botões de ação principais/ativos do SDK e outline de botões sem preenchimento
• SecondaryColor:
  Será aplicado em ícones explicativos e carregamento, fundo de barras de feedback para usuário durante a tela de captura
• TertiaryColor:
  Será aplicado como cor de fundo de ícones informativos grandes
• TitleColor:
  Será aplicado em textos que possuam o comportamento de título
• ParagraphColor:
  Será aplicado em textos que possuam comportamento de parágrafo e demais itens de apoio como o botão de fechamento do SDK

A seguir, trazemos um esquema visual das relações entre as cores do sistema de customização e os componentes que serão impactados:

Interface padrão

Caso nenhuma cor seja informada na inicialização do SDK, para cada parâmetro, as cores pré-definidas serão:

• PrimaryColor: #FF4800
• SecondaryColor: #FF4800
• TertiaryColor: #EFEFEF
• TitleColor: #283785
• ParagraphColor: #353840

Implementação

Na inicialização do SDK Android ou iOS:

val colors = CSDocumentoscopySDKColorsConfig(
    primaryColor = Color(0xFFFF4800).toArgb(),
    secondaryColor = Color(0xFFFF4800).toArgb(),
    tertiaryColor = Color(0xFFEFEFEF).toArgb(),
    titleColor = Color(0xFF283785).toArgb(),
    paragraphColor = Color(0xFF353840).toArgb()
)

val config = CSDocumentoscopySDKConfig(colors = colors)
val csDocumentoscopy = CSDocumentoscopy(clientId, clientSecret, identifierId, cpf, config)

CSDocumentoscopySDK.initialize(application, csDocumentoscopy, listener)

CSDocumentoscopySDKColorsConfig colors = new CSDocumentoscopySDKColorsConfig(
        Color.parseColor("#FFFFFF4F"),
        Color.parseColor("#FFFF4800"),
        Color.parseColor("#FFEFEFEF"),
        Color.parseColor("#FF283785"),
        Color.parseColor("#FF353840")
);
CSDocumentoscopySDKConfig config = new CSDocumentoscopySDKConfig(colors);
CSDocumentoscopy csDocumentoscopy = new CSDocumentoscopy(clientId, clientSecret, identifierId, cpf, config);
CSDocumentoscopySDK.INSTANCE.initialize(getApplication(), csDocumentoscopy, listener);

let colors = CSDocumentoscopyColorsConfig( 
	primaryColor: UIColor, 
	secondaryColor: UIColor, 
	tertiaryColor: UIColor, 
	titleColor: UIColor, 
	paragraphColor: UIColor 
) 

let configuration = CSDocumentoscopyConfig( 
	colors: colors 
) 

let sdk = CSDocumentoscopy(configuration:   configuration) 
sdk.delegate = CSDocumentoscopyDelegate 
sdk.initialize( 
	clientId: String, 
	clientSecret: String, 
	identifierId: String, 
	cpf: String, 
	viewController: ViewController
) 

Disclaimer

🚧

Não é permitido retirar, modificar cores ou trocar o posicionamento da logo ClearSale.

🚧

A alteração das cores da interface do SDK pode afetar diretamente a experiência dos seus usuários. Recomendamos fortemente a análise prévia das taxas de contraste de acordo com as Diretrizes de Acessibilidade para Conteúdo Web (WCAG) 2.0 e a realização de testes antes da publicação para garantir que todos os elementos estejam com alta visibilidade e legibilidade, evitando impactos na usabilidade e conversão. A ClearSale não se responsabiliza por quedas de desempenho que sejam provenientes de uma customização que não respeite um contraste mínimo de 4.5:1.

Taxa de contraste

A taxa de contraste (CR) é a diferença entre o brilho máximo e mínimo de um monitor de computador ou tela de celular. Ela auxilia na medição da legibilidade do seu conteúdo. Quanto maior a taxa, melhor a legibilidade. Números mais baixos (e vermelhos na ferramenta sugerida abaixo) indicam baixa legibilidade e devem ser revisados.

Recomendamos a utilização do site WCAG Color Contrast Checker que traz uma ferramenta indicando a taxa de contraste entre as cores escolhidas para fundos de botões, ícones e textos. Nela, é possível passar duas cores e verificar a taxa (CR), que vai de 1.0 até 21.0, sendo que o ideal é não ser menor do que 4.5.

🚧

Observação: considerar a cor Branco #ffffff para o background da interface, com exceção das telas de Instruções de Captura e Captura do Documento.

Exemplos

Recomendado

• SecondaryColor:#1e00ff
• TertiaryColor: #dbdfff

👍

Taxa: 6.40 (CR ≥ 4.5)

Não recomendado

• SecondaryColor: #1e00ff
• TertiaryColor: #0f2bff

❗️

Taxa: 1.12 (CR < 4.5)