Contrast Finder

Contrast-Finder encuentra los contrastes adecuados de color para crear webs accesibles

Los criterios WCAG de éxito 1.4.3 requieren que el texto tenga un contraste mínimo de 4.5 (3 para textos largos).

Color en hexadecimal, RGB o palabras clave de color CSS.
Por ejemplo: #FFFFFF, rgb(255,255,255) o white
El contraste de tus colores no es suficiente.
Ratio actual: 1.85

Anterior contraste

Contraste inválido
Primer plano Fondo Ejemplo Ratio Distancia
  • hsl(0, 0%, 100%)
  • rgb(255, 255, 255)
  • #FFFFFF
  • hsl(68, 92%, 41%)
  • rgb(175, 203, 8)
  • #AFCB08

Título grande con palabras en negrita

Este es un texto de ejemplo con palabras en negrita para ilustrar el contraste.

1.84718

Nuevo contraste : 21 resultados (3.659.369 colores testados)

Contrastes válidos
Primer plano Fondo Ejemplo Ratio Distancia
  • hsl(0, 0%, 100%)
  • rgb(255, 255, 255)
  • #FFFFFF
  • hsl(64, 35%, 35%)
  • rgb(118, 123, 59)
  • #767B3B

Título grande con palabras en negrita

Este es un texto de ejemplo con palabras en negrita para ilustrar el contraste.

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 con palabras en negrita

Este es un texto de ejemplo con palabras en negrita para ilustrar el contraste.

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 con palabras en negrita

Este es un texto de ejemplo con palabras en negrita para ilustrar el contraste.

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 con palabras en negrita

Este es un texto de ejemplo con palabras en negrita para ilustrar el contraste.

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 con palabras en negrita

Este es un texto de ejemplo con palabras en negrita para ilustrar el contraste.

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 con palabras en negrita

Este es un texto de ejemplo con palabras en negrita para ilustrar el contraste.

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 con palabras en negrita

Este es un texto de ejemplo con palabras en negrita para ilustrar el contraste.

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 con palabras en negrita

Este es un texto de ejemplo con palabras en negrita para ilustrar el contraste.

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 con palabras en negrita

Este es un texto de ejemplo con palabras en negrita para ilustrar el contraste.

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 con palabras en negrita

Este es un texto de ejemplo con palabras en negrita para ilustrar el contraste.

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 con palabras en negrita

Este es un texto de ejemplo con palabras en negrita para ilustrar el contraste.

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 con palabras en negrita

Este es un texto de ejemplo con palabras en negrita para ilustrar el contraste.

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 con palabras en negrita

Este es un texto de ejemplo con palabras en negrita para ilustrar el contraste.

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 con palabras en negrita

Este es un texto de ejemplo con palabras en negrita para ilustrar el contraste.

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 con palabras en negrita

Este es un texto de ejemplo con palabras en negrita para ilustrar el contraste.

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 con palabras en negrita

Este es un texto de ejemplo con palabras en negrita para ilustrar el contraste.

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 con palabras en negrita

Este es un texto de ejemplo con palabras en negrita para ilustrar el contraste.

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 con palabras en negrita

Este es un texto de ejemplo con palabras en negrita para ilustrar el contraste.

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 con palabras en negrita

Este es un texto de ejemplo con palabras en negrita para ilustrar el contraste.

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 con palabras en negrita

Este es un texto de ejemplo con palabras en negrita para ilustrar el contraste.

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 con palabras en negrita

Este es un texto de ejemplo con palabras en negrita para ilustrar el contraste.

4.50094 92.65
¿Insatisfecho?
Dame un rango de colores