Contrast Finder

Contrast-Finder encontra os bons contrastes para a acessibilidade web.

O critèrio de sucesso 1.4.3 das WCAG requer para o texto un rácio de contraste mínimo de 4.5 para fontes normais (e 3 para fontes largas).

Cor em hexadecimal, RGB ou com palavras-chave de cores.
Exemplo : #FFFFFF, rgb(255,255,255) ou white
The contrast of your colours is insufficient.
Current ratio: 1.85

Contraste anterior

Contraste inválido
Primeiro plano Fundo Exemplo Rácio Distância
  • hsl(0, 0%, 100%)
  • rgb(255, 255, 255)
  • #FFFFFF
  • hsl(68, 92%, 41%)
  • rgb(175, 203, 8)
  • #AFCB08

Título Grande com palavras em negrito

Este é um texto de exemplo com algumas palavras em negrito para ilustrar o contraste correto.

1.84718

Novo contraste : 21 resultados (3.659.369 cores testadas)

Contrastes válidos
Primeiro plano Fundo Exemplo Rácio Distância
  • hsl(0, 0%, 100%)
  • rgb(255, 255, 255)
  • #FFFFFF
  • hsl(64, 35%, 35%)
  • rgb(118, 123, 59)
  • #767B3B

Título Grande com palavras em negrito

Este é um texto de exemplo com algumas palavras em negrito para ilustrar o contraste correto.

4.50002 82.65
  • hsl(0, 0%, 100%)
  • rgb(255, 255, 255)
  • #FFFFFF
  • hsl(64, 54%, 31%)
  • rgb(117, 124, 37)
  • #757C25

Título Grande com palavras em negrito

Este é um texto de exemplo com algumas palavras em negrito para ilustrar o contraste correto.

4.50049 87.23
  • hsl(0, 0%, 100%)
  • rgb(255, 255, 255)
  • #FFFFFF
  • hsl(66, 30%, 36%)
  • rgb(117, 123, 65)
  • #757B41

Título Grande com palavras em negrito

Este é um texto de exemplo com algumas palavras em negrito para ilustrar o contraste correto.

4.50074 80.51
  • hsl(0, 0%, 100%)
  • rgb(255, 255, 255)
  • #FFFFFF
  • hsl(65, 87%, 26%)
  • rgb(115, 125, 8)
  • #737D08

Título Grande com palavras em negrito

Este é um texto de exemplo com algumas palavras em negrito para ilustrar o contraste correto.

4.50072 88.39
  • hsl(0, 0%, 100%)
  • rgb(255, 255, 255)
  • #FFFFFF
  • hsl(65, 86%, 26%)
  • rgb(115, 125, 9)
  • #737D09

Título Grande com palavras em negrito

Este é um texto de exemplo com algumas palavras em negrito para ilustrar o contraste correto.

4.5003 88.39
  • hsl(0, 0%, 100%)
  • rgb(255, 255, 255)
  • #FFFFFF
  • hsl(70, 23%, 39%)
  • rgb(115, 123, 76)
  • #737B4C

Título Grande com palavras em negrito

Este é um texto de exemplo com algumas palavras em negrito para ilustrar o contraste correto.

4.50015 74.5
  • hsl(0, 0%, 100%)
  • rgb(255, 255, 255)
  • #FFFFFF
  • hsl(66, 63%, 30%)
  • rgb(114, 125, 28)
  • #727D1C

Título Grande com palavras em negrito

Este é um texto de exemplo com algumas palavras em negrito para ilustrar o contraste correto.

4.50094 88.52
  • hsl(0, 0%, 100%)
  • rgb(255, 255, 255)
  • #FFFFFF
  • hsl(69, 34%, 36%)
  • rgb(114, 124, 61)
  • #727C3D

Título Grande com palavras em negrito

Este é um texto de exemplo com algumas palavras em negrito para ilustrar o contraste correto.

4.50071 82.97
  • hsl(0, 0%, 100%)
  • rgb(255, 255, 255)
  • #FFFFFF
  • hsl(68, 51%, 32%)
  • rgb(113, 125, 40)
  • #717D28

Título Grande com palavras em negrito

Este é um texto de exemplo com algumas palavras em negrito para ilustrar o contraste correto.

4.50042 87.94
  • hsl(0, 0%, 100%)
  • rgb(255, 255, 255)
  • #FFFFFF
  • hsl(71, 29%, 37%)
  • rgb(113, 124, 67)
  • #717C43

Título Grande com palavras em negrito

Este é um texto de exemplo com algumas palavras em negrito para ilustrar o contraste correto.

4.5004 80.72
  • hsl(0, 0%, 100%)
  • rgb(255, 255, 255)
  • #FFFFFF
  • hsl(67, 81%, 27%)
  • rgb(111, 126, 13)
  • #6F7E0D

Título Grande com palavras em negrito

Este é um texto de exemplo com algumas palavras em negrito para ilustrar o contraste correto.

4.50059 89.57
  • hsl(0, 0%, 100%)
  • rgb(255, 255, 255)
  • #FFFFFF
  • hsl(68, 80%, 27%)
  • rgb(111, 126, 14)
  • #6F7E0E

Título Grande com palavras em negrito

Este é um texto de exemplo com algumas palavras em negrito para ilustrar o contraste correto.

4.50008 89.56
  • hsl(0, 0%, 100%)
  • rgb(255, 255, 255)
  • #FFFFFF
  • hsl(72, 38%, 35%)
  • rgb(111, 125, 56)
  • #6F7D38

Título Grande com palavras em negrito

Este é um texto de exemplo com algumas palavras em negrito para ilustrar o contraste correto.

4.50021 85.55
  • hsl(0, 0%, 100%)
  • rgb(255, 255, 255)
  • #FFFFFF
  • hsl(70, 61%, 30%)
  • rgb(110, 126, 30)
  • #6E7E1E

Título Grande com palavras em negrito

Este é um texto de exemplo com algumas palavras em negrito para ilustrar o contraste correto.

4.50056 89.65
  • hsl(0, 0%, 100%)
  • rgb(255, 255, 255)
  • #FFFFFF
  • hsl(72, 50%, 32%)
  • rgb(109, 126, 41)
  • #6D7E29

Título Grande com palavras em negrito

Este é um texto de exemplo com algumas palavras em negrito para ilustrar o contraste correto.

4.50006 89.13
  • hsl(0, 0%, 100%)
  • rgb(255, 255, 255)
  • #FFFFFF
  • hsl(70, 84%, 27%)
  • rgb(107, 127, 11)
  • #6B7F0B

Título Grande com palavras em negrito

Este é um texto de exemplo com algumas palavras em negrito para ilustrar o contraste correto.

4.50089 90.99
  • hsl(0, 0%, 100%)
  • rgb(255, 255, 255)
  • #FFFFFF
  • hsl(70, 82%, 27%)
  • rgb(107, 127, 12)
  • #6B7F0C

Título Grande com palavras em negrito

Este é um texto de exemplo com algumas palavras em negrito para ilustrar o contraste correto.

4.50043 90.99
  • hsl(0, 0%, 100%)
  • rgb(255, 255, 255)
  • #FFFFFF
  • hsl(72, 62%, 30%)
  • rgb(106, 127, 29)
  • #6A7F1D

Título Grande com palavras em negrito

Este é um texto de exemplo com algumas palavras em negrito para ilustrar o contraste correto.

4.50033 91.19
  • hsl(0, 0%, 100%)
  • rgb(255, 255, 255)
  • #FFFFFF
  • hsl(72, 92%, 26%)
  • rgb(103, 128, 5)
  • #678005

Título Grande com palavras em negrito

Este é um texto de exemplo com algumas palavras em negrito para ilustrar o contraste correto.

4.50009 92.64
  • hsl(0, 0%, 100%)
  • rgb(255, 255, 255)
  • #FFFFFF
  • hsl(72, 93%, 25%)
  • rgb(103, 128, 4)
  • #678004

Título Grande com palavras em negrito

Este é um texto de exemplo com algumas palavras em negrito para ilustrar o contraste correto.

4.50051 92.65
  • hsl(0, 0%, 100%)
  • rgb(255, 255, 255)
  • #FFFFFF
  • hsl(72, 95%, 25%)
  • rgb(103, 128, 3)
  • #678003

Título Grande com palavras em negrito

Este é um texto de exemplo com algumas palavras em negrito para ilustrar o contraste correto.

4.50094 92.65
Não satisfeito?
Propõe-me uma gama de cores válidas