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.39

Anterior contraste

Contraste inválido
Primer plano Fondo Ejemplo Ratio Distancia
  • hsl(0, 0%, 100%)
  • rgb(255, 255, 255)
  • #FFFFFF
  • hsl(180, 51%, 78%)
  • rgb(173, 229, 229)
  • #ADE5E5

Título grande con palabras en negrita

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

1.38926

Nuevo contraste : 45 resultados (413 colores testados)

Contrastes válidos
Primer plano Fondo Ejemplo Ratio Distancia
  • hsl(0, 0%, 100%)
  • rgb(255, 255, 255)
  • #FFFFFF
  • hsl(180, 14%, 35%)
  • rgb(78, 104, 104)
  • #4E6868

Título grande con palabras en negrita

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

5.99322 168.26
  • hsl(0, 0%, 100%)
  • rgb(255, 255, 255)
  • #FFFFFF
  • hsl(180, 8%, 37%)
  • rgb(87, 104, 104)
  • #576868

Título grande con palabras en negrita

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

5.8573 165.61
  • hsl(0, 0%, 100%)
  • rgb(255, 255, 255)
  • #FFFFFF
  • hsl(180, 2%, 39%)
  • rgb(99, 104, 104)
  • #636868

Título grande con palabras en negrita

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

5.65954 162.76
  • hsl(0, 0%, 100%)
  • rgb(255, 255, 255)
  • #FFFFFF
  • hsl(180, 21%, 33%)
  • rgb(67, 104, 104)
  • #436868

Título grande con palabras en negrita

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

6.14272 172.1
  • hsl(0, 0%, 100%)
  • rgb(255, 255, 255)
  • #FFFFFF
  • hsl(180, 29%, 31%)
  • rgb(57, 104, 104)
  • #396868

Título grande con palabras en negrita

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

6.26119 176.17
  • hsl(0, 0%, 100%)
  • rgb(255, 255, 255)
  • #FFFFFF
  • hsl(180, 37%, 36%)
  • rgb(58, 129, 129)
  • #3A8181

Título grande con palabras en negrita

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

4.52878 152.13
  • hsl(0, 0%, 100%)
  • rgb(255, 255, 255)
  • #FFFFFF
  • hsl(180, 48%, 34%)
  • rgb(45, 129, 129)
  • #2D8181

Título grande con palabras en negrita

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

4.59652 160.01
  • hsl(0, 0%, 100%)
  • rgb(255, 255, 255)
  • #FFFFFF
  • hsl(180, 59%, 31%)
  • rgb(33, 129, 129)
  • #218181

Título grande con palabras en negrita

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

4.6442 168.03
  • hsl(0, 0%, 100%)
  • rgb(255, 255, 255)
  • #FFFFFF
  • hsl(180, 74%, 29%)
  • rgb(19, 129, 129)
  • #138181

Título grande con palabras en negrita

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

4.6825 178.13
  • hsl(0, 0%, 100%)
  • rgb(255, 255, 255)
  • #FFFFFF
  • hsl(180, 88%, 26%)
  • rgb(8, 129, 129)
  • #088181

Título grande con palabras en negrita

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

4.7007 186.55
  • hsl(0, 0%, 100%)
  • rgb(255, 255, 255)
  • #FFFFFF
  • hsl(140, 14%, 35%)
  • rgb(78, 104, 87)
  • #4E6857

Título grande con palabras en negrita

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

6.10165 178.36
  • hsl(0, 0%, 100%)
  • rgb(255, 255, 255)
  • #FFFFFF
  • hsl(144, 8%, 37%)
  • rgb(87, 104, 94)
  • #57685E

Título grande con palabras en negrita

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

5.92049 171.56
  • hsl(0, 0%, 100%)
  • rgb(255, 255, 255)
  • #FFFFFF
  • hsl(120, 2%, 39%)
  • rgb(99, 104, 99)
  • #636863

Título grande con palabras en negrita

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

5.68978 165.77
  • hsl(0, 0%, 100%)
  • rgb(255, 255, 255)
  • #FFFFFF
  • hsl(142, 21%, 33%)
  • rgb(67, 104, 81)
  • #436851

Título grande con palabras en negrita

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

6.29195 185.53
  • hsl(0, 0%, 100%)
  • rgb(255, 255, 255)
  • #FFFFFF
  • hsl(142, 29%, 39%)
  • rgb(71, 129, 93)
  • #47815D

Título grande con palabras en negrita

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

4.59913 166.03
  • hsl(0, 0%, 100%)
  • rgb(255, 255, 255)
  • #FFFFFF
  • hsl(142, 37%, 36%)
  • rgb(58, 129, 85)
  • #3A8155

Título grande con palabras en negrita

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

4.71784 176.59
  • hsl(0, 0%, 100%)
  • rgb(255, 255, 255)
  • #FFFFFF
  • hsl(143, 48%, 34%)
  • rgb(45, 129, 78)
  • #2D814E

Título grande con palabras en negrita

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

4.81465 187.01
  • hsl(0, 0%, 100%)
  • rgb(255, 255, 255)
  • #FFFFFF
  • hsl(142, 59%, 31%)
  • rgb(33, 129, 69)
  • #218145

Título grande con palabras en negrita

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

4.8943 198.66
  • hsl(0, 0%, 100%)
  • rgb(255, 255, 255)
  • #FFFFFF
  • hsl(144, 74%, 29%)
  • rgb(19, 129, 63)
  • #13813F

Título grande con palabras en negrita

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

4.95333 209.74
  • hsl(0, 0%, 100%)
  • rgb(255, 255, 255)
  • #FFFFFF
  • hsl(142, 88%, 26%)
  • rgb(8, 129, 53)
  • #088135

Título grande con palabras en negrita

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

4.99782 222.02
  • hsl(0, 0%, 100%)
  • rgb(255, 255, 255)
  • #FFFFFF
  • hsl(219, 14%, 44%)
  • rgb(97, 108, 129)
  • #616C81

Título grande con palabras en negrita

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

5.28928 147.52
  • hsl(0, 0%, 100%)
  • rgb(255, 255, 255)
  • #FFFFFF
  • hsl(214, 8%, 46%)
  • rgb(108, 117, 129)
  • #6C7581

Título grande con palabras en negrita

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

4.66756 138.9
  • hsl(0, 0%, 100%)
  • rgb(255, 255, 255)
  • #FFFFFF
  • hsl(240, 2%, 39%)
  • rgb(99, 99, 104)
  • #636368

Título grande con palabras en negrita

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

5.97412 165.77
  • hsl(0, 0%, 100%)
  • rgb(255, 255, 255)
  • #FFFFFF
  • hsl(216, 21%, 41%)
  • rgb(83, 101, 129)
  • #536581

Título grande con palabras en negrita

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

5.92172 156.41
  • hsl(0, 0%, 100%)
  • rgb(255, 255, 255)
  • #FFFFFF
  • hsl(217, 28%, 46%)
  • rgb(85, 111, 154)
  • #556F9A

Título grande con palabras en negrita

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

5.08887 140.04
  • hsl(0, 0%, 100%)
  • rgb(255, 255, 255)
  • #FFFFFF
  • hsl(216, 39%, 50%)
  • rgb(80, 119, 179)
  • #5077B3

Título grande con palabras en negrita

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

4.53489 131.24
  • hsl(0, 0%, 100%)
  • rgb(255, 255, 255)
  • #FFFFFF
  • hsl(216, 47%, 47%)
  • rgb(63, 109, 179)
  • #3F6DB3

Título grande con palabras en negrita

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

5.18551 147.12
  • hsl(0, 0%, 100%)
  • rgb(255, 255, 255)
  • #FFFFFF
  • hsl(216, 59%, 50%)
  • rgb(52, 111, 204)
  • #346FCC

Título grande con palabras en negrita

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

4.89315 150.81
  • hsl(0, 0%, 100%)
  • rgb(255, 255, 255)
  • #FFFFFF
  • hsl(216, 78%, 51%)
  • rgb(35, 111, 229)
  • #236FE5

Título grande con palabras en negrita

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

4.69099 162.25
  • hsl(0, 0%, 100%)
  • rgb(255, 255, 255)
  • #FFFFFF
  • hsl(251, 14%, 44%)
  • rgb(103, 97, 129)
  • #676181

Título grande con palabras en negrita

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

5.82753 153.87
  • hsl(0, 0%, 100%)
  • rgb(255, 255, 255)
  • #FFFFFF
  • hsl(254, 8%, 46%)
  • rgb(113, 108, 129)
  • #716C81

Título grande con palabras en negrita

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

5.04303 144.03
  • hsl(0, 0%, 100%)
  • rgb(255, 255, 255)
  • #FFFFFF
  • hsl(253, 21%, 49%)
  • rgb(111, 99, 154)
  • #6F639A

Título grande con palabras en negrita

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

5.34724 141.9
  • hsl(0, 0%, 100%)
  • rgb(255, 255, 255)
  • #FFFFFF
  • hsl(252, 34%, 54%)
  • rgb(116, 99, 179)
  • #7463B3

Título grande con palabras en negrita

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

5.026 135.85
  • hsl(0, 0%, 100%)
  • rgb(255, 255, 255)
  • #FFFFFF
  • hsl(252, 52%, 58%)
  • rgb(116, 92, 204)
  • #745CCC

Título grande con palabras en negrita

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

5.06587 140.48
  • hsl(0, 0%, 100%)
  • rgb(255, 255, 255)
  • #FFFFFF
  • hsl(252, 74%, 60%)
  • rgb(113, 81, 229)
  • #7151E5

Título grande con palabras en negrita

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

5.2362 151.22
  • hsl(0, 0%, 100%)
  • rgb(255, 255, 255)
  • #FFFFFF
  • hsl(288, 14%, 44%)
  • rgb(123, 97, 129)
  • #7B6181

Título grande con palabras en negrita

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

5.42767 150.74
  • hsl(0, 0%, 100%)
  • rgb(255, 255, 255)
  • #FFFFFF
  • hsl(282, 8%, 46%)
  • rgb(123, 108, 129)
  • #7B6C81

Título grande con palabras en negrita

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

4.87894 142.55
  • hsl(0, 0%, 100%)
  • rgb(255, 255, 255)
  • #FFFFFF
  • hsl(276, 2%, 39%)
  • rgb(102, 99, 104)
  • #666368

Título grande con palabras en negrita

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

5.91618 165.19
  • hsl(0, 0%, 100%)
  • rgb(255, 255, 255)
  • #FFFFFF
  • hsl(288, 21%, 49%)
  • rgb(143, 99, 154)
  • #8F639A

Título grande con palabras en negrita

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

4.7519 138.31
  • hsl(0, 0%, 100%)
  • rgb(255, 255, 255)
  • #FFFFFF
  • hsl(288, 28%, 46%)
  • rgb(141, 85, 154)
  • #8D559A

Título grande con palabras en negrita

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

5.3866 150.97
  • hsl(0, 0%, 100%)
  • rgb(255, 255, 255)
  • #FFFFFF
  • hsl(289, 39%, 50%)
  • rgb(161, 80, 179)
  • #A150B3

Título grande con palabras en negrita

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

4.86808 150.88
  • hsl(0, 0%, 100%)
  • rgb(255, 255, 255)
  • #FFFFFF
  • hsl(289, 47%, 47%)
  • rgb(158, 63, 179)
  • #9E3FB3

Título grande con palabras en negrita

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

5.50349 167.54
  • hsl(0, 0%, 100%)
  • rgb(255, 255, 255)
  • #FFFFFF
  • hsl(289, 59%, 50%)
  • rgb(177, 52, 204)
  • #B134CC

Título grande con palabras en negrita

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

4.96155 177.17
  • hsl(0, 0%, 100%)
  • rgb(255, 255, 255)
  • #FFFFFF
  • hsl(289, 73%, 46%)
  • rgb(173, 31, 204)
  • #AD1FCC

Título grande con palabras en negrita

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

5.46197 198.13
  • hsl(0, 0%, 100%)
  • rgb(255, 255, 255)
  • #FFFFFF
  • hsl(289, 90%, 47%)
  • rgb(191, 12, 229)
  • #BF0CE5

Título grande con palabras en negrita

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

4.7735 216.96
¿Insatisfecho?
Dame colores válidos y muy cercanos al color inicial