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: 1.98

Old contrast

Invalid contrast
Foreground Background Sample Ratio Distance
  • hsl(28, 49%, 63%)
  • rgb(208, 159, 116)
  • #D09F74
  • hsl(102, 44%, 89%)
  • rgb(223, 240, 216)
  • #DFF0D8

Title big size with words in bold

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

1.97823

New contrast : 30 results (296 colors tested)

Valid contrasts
Foreground Background Sample Ratio Distance
  • hsl(27, 28%, 32%)
  • rgb(108, 82, 60)
  • #6C523C
  • hsl(102, 44%, 89%)
  • rgb(223, 240, 216)
  • #DFF0D8

Title big size with words in bold

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

6.0462 117.74
  • hsl(25, 21%, 34%)
  • rgb(108, 86, 70)
  • #6C5646
  • hsl(102, 44%, 89%)
  • rgb(223, 240, 216)
  • #DFF0D8

Title big size with words in bold

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

5.75471 114.12
  • hsl(25, 13%, 37%)
  • rgb(108, 93, 82)
  • #6C5D52
  • hsl(102, 44%, 89%)
  • rgb(223, 240, 216)
  • #DFF0D8

Title big size with words in bold

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

5.29086 109.88
  • hsl(28, 8%, 39%)
  • rgb(108, 99, 91)
  • #6C635B
  • hsl(102, 44%, 89%)
  • rgb(223, 240, 216)
  • #DFF0D8

Title big size with words in bold

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

4.92334 107.19
  • hsl(0, 2%, 41%)
  • rgb(108, 103, 103)
  • #6C6767
  • hsl(102, 44%, 89%)
  • rgb(223, 240, 216)
  • #DFF0D8

Title big size with words in bold

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

4.6622 105.61
  • hsl(27, 37%, 37%)
  • rgb(133, 94, 60)
  • #855E3C
  • hsl(102, 44%, 89%)
  • rgb(223, 240, 216)
  • #DFF0D8

Title big size with words in bold

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

4.80211 95.54
  • hsl(27, 47%, 35%)
  • rgb(133, 86, 47)
  • #85562F
  • hsl(102, 44%, 89%)
  • rgb(223, 240, 216)
  • #DFF0D8

Title big size with words in bold

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

5.22135 104.45
  • hsl(28, 59%, 32%)
  • rgb(133, 81, 34)
  • #855122
  • hsl(102, 44%, 89%)
  • rgb(223, 240, 216)
  • #DFF0D8

Title big size with words in bold

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

5.50238 113.13
  • hsl(28, 73%, 35%)
  • rgb(158, 87, 24)
  • #9E5718
  • hsl(102, 44%, 89%)
  • rgb(223, 240, 216)
  • #DFF0D8

Title big size with words in bold

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

4.59318 108.49
  • hsl(27, 89%, 32%)
  • rgb(158, 78, 9)
  • #9E4E09
  • hsl(102, 44%, 89%)
  • rgb(223, 240, 216)
  • #DFF0D8

Title big size with words in bold

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

4.9593 123.45
  • hsl(66, 28%, 32%)
  • rgb(103, 108, 60)
  • #676C3C
  • hsl(102, 44%, 89%)
  • rgb(223, 240, 216)
  • #DFF0D8

Title big size with words in bold

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

4.6457 113.6
  • hsl(67, 21%, 34%)
  • rgb(103, 108, 70)
  • #676C46
  • hsl(102, 44%, 89%)
  • rgb(223, 240, 216)
  • #DFF0D8

Title big size with words in bold

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

4.61742 111.54
  • hsl(69, 13%, 37%)
  • rgb(104, 108, 82)
  • #686C52
  • hsl(102, 44%, 89%)
  • rgb(223, 240, 216)
  • #DFF0D8

Title big size with words in bold

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

4.56317 109.05
  • hsl(67, 8%, 39%)
  • rgb(106, 108, 91)
  • #6A6C5B
  • hsl(102, 44%, 89%)
  • rgb(223, 240, 216)
  • #DFF0D8

Title big size with words in bold

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

4.50078 106.55
  • hsl(75, 2%, 31%)
  • rgb(82, 83, 79)
  • #52534F
  • hsl(102, 44%, 89%)
  • rgb(223, 240, 216)
  • #DFF0D8

Title big size with words in bold

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

6.49442 135.54
  • hsl(64, 38%, 30%)
  • rgb(103, 108, 48)
  • #676C30
  • hsl(102, 44%, 89%)
  • rgb(223, 240, 216)
  • #DFF0D8

Title big size with words in bold

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

4.67355 117.08
  • hsl(64, 47%, 28%)
  • rgb(103, 108, 38)
  • #676C26
  • hsl(102, 44%, 89%)
  • rgb(223, 240, 216)
  • #DFF0D8

Title big size with words in bold

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

4.69186 120.85
  • hsl(63, 60%, 26%)
  • rgb(103, 108, 27)
  • #676C1B
  • hsl(102, 44%, 89%)
  • rgb(223, 240, 216)
  • #DFF0D8

Title big size with words in bold

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

4.70713 125.89
  • hsl(63, 74%, 24%)
  • rgb(102, 108, 16)
  • #666C10
  • hsl(102, 44%, 89%)
  • rgb(223, 240, 216)
  • #DFF0D8

Title big size with words in bold

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

4.73258 132.45
  • hsl(64, 89%, 22%)
  • rgb(101, 108, 6)
  • #656C06
  • hsl(102, 44%, 89%)
  • rgb(223, 240, 216)
  • #DFF0D8

Title big size with words in bold

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

4.75364 139.05
  • hsl(101, 28%, 32%)
  • rgb(75, 108, 60)
  • #4B6C3C
  • hsl(102, 44%, 89%)
  • rgb(223, 240, 216)
  • #DFF0D8

Title big size with words in bold

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

5.0131 138.57
  • hsl(101, 21%, 34%)
  • rgb(82, 108, 70)
  • #526C46
  • hsl(102, 44%, 89%)
  • rgb(223, 240, 216)
  • #DFF0D8

Title big size with words in bold

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

4.89757 130.65
  • hsl(99, 13%, 37%)
  • rgb(91, 108, 82)
  • #5B6C52
  • hsl(102, 44%, 89%)
  • rgb(223, 240, 216)
  • #DFF0D8

Title big size with words in bold

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

4.73994 121.05
  • hsl(98, 8%, 39%)
  • rgb(97, 108, 91)
  • #616C5B
  • hsl(102, 44%, 89%)
  • rgb(223, 240, 216)
  • #DFF0D8

Title big size with words in bold

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

4.62447 114.87
  • hsl(120, 2%, 31%)
  • rgb(79, 83, 79)
  • #4F534F
  • hsl(102, 44%, 89%)
  • rgb(223, 240, 216)
  • #DFF0D8

Title big size with words in bold

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

6.55812 138.14
  • hsl(99, 38%, 30%)
  • rgb(69, 108, 48)
  • #456C30
  • hsl(102, 44%, 89%)
  • rgb(223, 240, 216)
  • #DFF0D8

Title big size with words in bold

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

5.11319 146.32
  • hsl(100, 47%, 28%)
  • rgb(61, 108, 38)
  • #3D6C26
  • hsl(102, 44%, 89%)
  • rgb(223, 240, 216)
  • #DFF0D8

Title big size with words in bold

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

5.21832 155.83
  • hsl(100, 60%, 26%)
  • rgb(53, 108, 27)
  • #356C1B
  • hsl(102, 44%, 89%)
  • rgb(223, 240, 216)
  • #DFF0D8

Title big size with words in bold

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

5.31159 165.85
  • hsl(99, 74%, 24%)
  • rgb(47, 108, 16)
  • #2F6C10
  • hsl(102, 44%, 89%)
  • rgb(223, 240, 216)
  • #DFF0D8

Title big size with words in bold

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

5.37464 174.42
  • hsl(100, 89%, 22%)
  • rgb(40, 108, 6)
  • #286C06
  • hsl(102, 44%, 89%)
  • rgb(223, 240, 216)
  • #DFF0D8

Title big size with words in bold

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

5.43356 183.76
Not satisfied?
Gimme valid colors and very close to initial color