🚧

A customização está disponível para os SDK Mobile (Android e iOS). A customização na plataforma Web (JavaScript) ainda está em desenvolvimento.

Introdução

É possível customizar as cores de diversos elementos da interface dos SDKs Liveness 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é 4 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, outline de botões sem preenchimento e máscara oval de captura
• SecondaryColor:
  Será aplicado em ícones explicativos e carregamento, fundo de barras de feedback para usuário durante a tela de captura
• TitleColor:
  Será aplicado em textos que possuam o comportamento de título
• ParagraphColor:
  Será aplicado em textos que possuam comportamento de parágrafo

Observação: não é possível alterar a cor do ícone de câmera (tela de solicitação de permissão) ou do ícone X (saída do fluxo).

Observação 2: o texto "Acesso à câmera" (tela de solicitação de permissão) tem o comportamento de Paragraph.

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
• TitleColor: #283785
• ParagraphColor: #353840

🚧

Observação: considerar a cor Branco #ffffff como BackgroundColor da interface (não-customizável).

Modo Dimming

O Modo Dimming é ativado automaticamente quando é identificada uma exposição à alta luminosidade durante a captura. São aplicadas transformações visuais em tela a fim de melhorar a experiência e eficácia da captura e validação do Liveness.

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

As cores aplicadas no modo Dimming são as mesmas passadas na chamada do SDK. Caso nenhuma cor seja informada na inicialização do SDK, para cada parâmetro, as cores pré-definidas serão:

• PrimaryColor: #FF4800
• SecondaryColor: #FF4800

🚧

Observação: considerar a cor Preto #000000 como BackgroundColor e Branco #ffffff como TitleColor e ParagraphColor da interface nesse modo (não-customizáveis).

Implementação

Na inicialização do SDK Android ou iOS:

val colors = CSLivenessConfigColors( 
    Color.parseColor("#FF4800"), 
    Color.parseColor("#FF4800"), 
    Color.parseColor("#283785"), 
    Color.parseColor("#353840") 
) 
 
//Iniciando a classe de configuração de customizações (Opcional) 
val config = CSLivenessConfig(vocalGuidance, colors) 
 
//Iniciando o SDK 
val mCSLiveness = CSLiveness(clientId, clientSecret, identifierId, cpf, config) 
val mIntent = Intent(applicationContext, CSLivenessActivity::class.java) 
mIntent.putExtra(CSLiveness.PARAMETER_NAME, mCSLiveness) 
startActivityForResult(mIntent, REQUEST_CODE)

CSLivenessConfigColors colors = new CSLivenessConfigColors( 
        Color.parseColor("#FF4800"), 
        Color.parseColor("#FF4800"), 
        Color.parseColor("#283785"), 
        Color.parseColor("#353840") 
); 

 
CSLivenessConfig config = new CSLivenessConfig(vocalGuidance, colors); 
 
//Iniciando o SDK 
CSLiveness mCSLiveness = new CSLiveness(clientId, clientSecret, identifierId, cpf, config); 
Intent mIntent = new Intent(getApplicationContext(), CSLivenessActivity.class); 
mIntent.putExtra(CSLiveness.PARAMETER_NAME, mCSLiveness); 
startActivityForResult(mIntent, REQUEST_CODE);  

private var livenessSdk: CSLiveness?
  ...

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

let configuration = CSLivenessConfig(
  clientId: String.clientId,
  clientSecret: String.clientSecret,
  identifierId: String.identifierId,
  cpf: String.cpf,
  colors: colors
)

self.livenessSdk = CSLiveness(configuration: configuration), vocalGuidance: bool)
self.livenessSdk?.delegate = self
self.livenessSdk?.start(viewController: self, animated: true)

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.

Exemplos

Recomendado

• TitleColor:#435198
• Cor do background (fixa): #ffffff

👍

Taxa: 7.31 (CR ≥ 4.5)

Não recomendado

• TitleColor:#f0d5d5
• Cor do background (fixa): #ffffff

❗️

Taxa: 1.38 (CR < 4.5)