Contrast Finder

Contrast-Finder finds correct color contrasts for web accessibility

WCAG success criteria 1.4.3 requires text to have a minimum contrast ratio of 4.5 (and 3 for large text).

Color in hexadecimal, RGB or with CSS color keywords.
Example: #FFFFFF, rgb(255,255,255) or white
The contrast of your colours is insufficient.
Current ratio: 2.6

Old contrast

Invalid contrast
Foreground Background Sample Ratio Distance
  • hsl(32, 30%, 60%)
  • rgb(184, 156, 122)
  • #B89C7A
  • hsl(0, 0%, 100%)
  • rgb(255, 255, 255)
  • #FFFFFF

Title big size with words in bold

Here is some text sample with some words in bold to illustrate the contrast.

2.60079

New contrast : 30 results (283 colors tested)

Valid contrasts
Foreground Background Sample Ratio Distance
  • hsl(32, 20%, 43%)
  • rgb(134, 113, 88)
  • #867158
  • hsl(0, 0%, 100%)
  • rgb(255, 255, 255)
  • #FFFFFF

Title big size with words in bold

Here is some text sample with some words in bold to illustrate the contrast.

4.64948 62.47
  • hsl(30, 13%, 37%)
  • rgb(109, 96, 83)
  • #6D6053
  • hsl(0, 0%, 100%)
  • rgb(255, 255, 255)
  • #FFFFFF

Title big size with words in bold

Here is some text sample with some words in bold to illustrate the contrast.

6.08996 88.67
  • hsl(28, 8%, 39%)
  • rgb(109, 100, 92)
  • #6D645C
  • hsl(0, 0%, 100%)
  • rgb(255, 255, 255)
  • #FFFFFF

Title big size with words in bold

Here is some text sample with some words in bold to illustrate the contrast.

5.78887 85.48
  • hsl(11, 2%, 41%)
  • rgb(109, 105, 104)
  • #6D6968
  • hsl(0, 0%, 100%)
  • rgb(255, 255, 255)
  • #FFFFFF

Title big size with words in bold

Here is some text sample with some words in bold to illustrate the contrast.

5.42528 82.44
  • hsl(32, 27%, 41%)
  • rgb(134, 107, 76)
  • #866B4C
  • hsl(0, 0%, 100%)
  • rgb(255, 255, 255)
  • #FFFFFF

Title big size with words in bold

Here is some text sample with some words in bold to illustrate the contrast.

4.975 69.79
  • hsl(33, 36%, 38%)
  • rgb(134, 102, 62)
  • #86663E
  • hsl(0, 0%, 100%)
  • rgb(255, 255, 255)
  • #FFFFFF

Title big size with words in bold

Here is some text sample with some words in bold to illustrate the contrast.

5.27138 79.29
  • hsl(32, 45%, 36%)
  • rgb(134, 96, 50)
  • #866032
  • hsl(0, 0%, 100%)
  • rgb(255, 255, 255)
  • #FFFFFF

Title big size with words in bold

Here is some text sample with some words in bold to illustrate the contrast.

5.62569 89.39
  • hsl(33, 57%, 39%)
  • rgb(159, 107, 43)
  • #9F6B2B
  • hsl(0, 0%, 100%)
  • rgb(255, 255, 255)
  • #FFFFFF

Title big size with words in bold

Here is some text sample with some words in bold to illustrate the contrast.

4.55319 85.56
  • hsl(32, 70%, 36%)
  • rgb(159, 100, 28)
  • #9F641C
  • hsl(0, 0%, 100%)
  • rgb(255, 255, 255)
  • #FFFFFF

Title big size with words in bold

Here is some text sample with some words in bold to illustrate the contrast.

4.86807 100.72
  • hsl(33, 85%, 33%)
  • rgb(159, 93, 12)
  • #9F5D0C
  • hsl(0, 0%, 100%)
  • rgb(255, 255, 255)
  • #FFFFFF

Title big size with words in bold

Here is some text sample with some words in bold to illustrate the contrast.

5.19129 116.88
  • hsl(69, 21%, 35%)
  • rgb(103, 109, 71)
  • #676D47
  • hsl(0, 0%, 100%)
  • rgb(255, 255, 255)
  • #FFFFFF

Title big size with words in bold

Here is some text sample with some words in bold to illustrate the contrast.

5.44725 91.57
  • hsl(71, 13%, 37%)
  • rgb(104, 109, 83)
  • #686D53
  • hsl(0, 0%, 100%)
  • rgb(255, 255, 255)
  • #FFFFFF

Title big size with words in bold

Here is some text sample with some words in bold to illustrate the contrast.

5.38327 87.73
  • hsl(70, 8%, 39%)
  • rgb(106, 109, 92)
  • #6A6D5C
  • hsl(0, 0%, 100%)
  • rgb(255, 255, 255)
  • #FFFFFF

Title big size with words in bold

Here is some text sample with some words in bold to illustrate the contrast.

5.30996 84.59
  • hsl(72, 2%, 41%)
  • rgb(108, 109, 104)
  • #6C6D68
  • hsl(0, 0%, 100%)
  • rgb(255, 255, 255)
  • #FFFFFF

Title big size with words in bold

Here is some text sample with some words in bold to illustrate the contrast.

5.21742 81.86
  • hsl(71, 27%, 33%)
  • rgb(100, 109, 62)
  • #646D3E
  • hsl(0, 0%, 100%)
  • rgb(255, 255, 255)
  • #FFFFFF

Title big size with words in bold

Here is some text sample with some words in bold to illustrate the contrast.

5.52794 96.99
  • hsl(69, 37%, 31%)
  • rgb(100, 109, 50)
  • #646D32
  • hsl(0, 0%, 100%)
  • rgb(255, 255, 255)
  • #FFFFFF

Title big size with words in bold

Here is some text sample with some words in bold to illustrate the contrast.

5.56236 102.27
  • hsl(70, 46%, 29%)
  • rgb(97, 109, 40)
  • #616D28
  • hsl(0, 0%, 100%)
  • rgb(255, 255, 255)
  • #FFFFFF

Title big size with words in bold

Here is some text sample with some words in bold to illustrate the contrast.

5.63551 109.52
  • hsl(69, 57%, 27%)
  • rgb(96, 109, 29)
  • #606D1D
  • hsl(0, 0%, 100%)
  • rgb(255, 255, 255)
  • #FFFFFF

Title big size with words in bold

Here is some text sample with some words in bold to illustrate the contrast.

5.67176 116.71
  • hsl(70, 70%, 25%)
  • rgb(94, 109, 19)
  • #5E6D13
  • hsl(0, 0%, 100%)
  • rgb(255, 255, 255)
  • #FFFFFF

Title big size with words in bold

Here is some text sample with some words in bold to illustrate the contrast.

5.71772 124.41
  • hsl(70, 86%, 22%)
  • rgb(91, 109, 8)
  • #5B6D08
  • hsl(0, 0%, 100%)
  • rgb(255, 255, 255)
  • #FFFFFF

Title big size with words in bold

Here is some text sample with some words in bold to illustrate the contrast.

5.77591 133.7
  • hsl(104, 21%, 35%)
  • rgb(81, 109, 71)
  • #516D47
  • hsl(0, 0%, 100%)
  • rgb(255, 255, 255)
  • #FFFFFF

Title big size with words in bold

Here is some text sample with some words in bold to illustrate the contrast.

5.78782 109.95
  • hsl(106, 13%, 37%)
  • rgb(89, 109, 83)
  • #596D53
  • hsl(0, 0%, 100%)
  • rgb(255, 255, 255)
  • #FFFFFF

Title big size with words in bold

Here is some text sample with some words in bold to illustrate the contrast.

5.61928 100.68
  • hsl(105, 8%, 39%)
  • rgb(96, 109, 92)
  • #606D5C
  • hsl(0, 0%, 100%)
  • rgb(255, 255, 255)
  • #FFFFFF

Title big size with words in bold

Here is some text sample with some words in bold to illustrate the contrast.

5.46967 93.3
  • hsl(120, 2%, 41%)
  • rgb(104, 109, 104)
  • #686D68
  • hsl(0, 0%, 100%)
  • rgb(255, 255, 255)
  • #FFFFFF

Title big size with words in bold

Here is some text sample with some words in bold to illustrate the contrast.

5.28174 85.35
  • hsl(105, 27%, 33%)
  • rgb(73, 109, 62)
  • #496D3E
  • hsl(0, 0%, 100%)
  • rgb(255, 255, 255)
  • #FFFFFF

Title big size with words in bold

Here is some text sample with some words in bold to illustrate the contrast.

5.93169 119.05
  • hsl(104, 37%, 31%)
  • rgb(65, 109, 50)
  • #416D32
  • hsl(0, 0%, 100%)
  • rgb(255, 255, 255)
  • #FFFFFF

Title big size with words in bold

Here is some text sample with some words in bold to illustrate the contrast.

6.07239 129.31
  • hsl(105, 46%, 29%)
  • rgb(57, 109, 40)
  • #396D28
  • hsl(0, 0%, 100%)
  • rgb(255, 255, 255)
  • #FFFFFF

Title big size with words in bold

Here is some text sample with some words in bold to illustrate the contrast.

6.19091 139.31
  • hsl(105, 57%, 33%)
  • rgb(60, 134, 36)
  • #3C8624
  • hsl(0, 0%, 100%)
  • rgb(255, 255, 255)
  • #FFFFFF

Title big size with words in bold

Here is some text sample with some words in bold to illustrate the contrast.

4.53794 136.68
  • hsl(105, 69%, 30%)
  • rgb(50, 134, 24)
  • #328618
  • hsl(0, 0%, 100%)
  • rgb(255, 255, 255)
  • #FFFFFF

Title big size with words in bold

Here is some text sample with some words in bold to illustrate the contrast.

4.60642 149.75
  • hsl(105, 86%, 28%)
  • rgb(39, 134, 10)
  • #27860A
  • hsl(0, 0%, 100%)
  • rgb(255, 255, 255)
  • #FFFFFF

Title big size with words in bold

Here is some text sample with some words in bold to illustrate the contrast.

4.66595 164.66
Not satisfied?
Gimme valid colors and very close to initial color