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

Old contrast

Invalid contrast
Foreground Background Sample Ratio Distance
  • hsl(120, 32%, 40%)
  • rgb(70, 136, 71)
  • #468847
  • 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.

3.61029

New contrast : 40 results (374 colors tested)

Valid contrasts
Foreground Background Sample Ratio Distance
  • hsl(121, 32%, 32%)
  • rgb(57, 111, 58)
  • #396F3A
  • 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.01396 27.15
  • hsl(120, 24%, 35%)
  • rgb(68, 111, 68)
  • #446F44
  • 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.88288 25.02
  • hsl(120, 16%, 37%)
  • rgb(80, 111, 80)
  • #506F50
  • 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.71578 24.04
  • hsl(120, 9%, 39%)
  • rgb(91, 111, 91)
  • #5B6F5B
  • 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.54643 11.78
  • hsl(120, 4%, 32%)
  • rgb(79, 86, 79)
  • #4F564F
  • 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.33653 49.83
  • hsl(120, 41%, 30%)
  • rgb(46, 111, 47)
  • #2E6F2F
  • 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.12773 35.11
  • hsl(122, 53%, 28%)
  • rgb(34, 111, 37)
  • #226F25
  • 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.22285 46.66
  • hsl(122, 65%, 26%)
  • rgb(23, 111, 26)
  • #176F1A
  • 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.29099 59.49
  • hsl(122, 81%, 23%)
  • rgb(11, 111, 15)
  • #0B6F0F
  • 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.33952 73.47
  • hsl(122, 99%, 21%)
  • rgb(0, 111, 5)
  • #006F05
  • 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.37038 86.45
  • hsl(84, 32%, 32%)
  • rgb(89, 111, 57)
  • #596F39
  • 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.682 22.58
  • hsl(85, 24%, 35%)
  • rgb(93, 111, 68)
  • #5D6F44
  • 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.60232 15.16
  • hsl(85, 16%, 37%)
  • rgb(98, 111, 80)
  • #626F50
  • 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.50075 19.18
  • hsl(86, 10%, 30%)
  • rgb(79, 86, 70)
  • #4F5646
  • 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.39286 49.9
  • hsl(94, 4%, 32%)
  • rgb(82, 86, 79)
  • #52564F
  • 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.27704 49.7
  • hsl(84, 41%, 30%)
  • rgb(84, 111, 46)
  • #546F2E
  • 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.76756 30.55
  • hsl(84, 53%, 28%)
  • rgb(79, 111, 34)
  • #4F6F22
  • 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.84751 40.32
  • hsl(85, 65%, 26%)
  • rgb(74, 111, 23)
  • #4A6F17
  • 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.91799 50.15
  • hsl(85, 81%, 23%)
  • rgb(69, 111, 11)
  • #456F0B
  • 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.98158 61.41
  • hsl(85, 99%, 21%)
  • rgb(64, 111, 0)
  • #406F00
  • 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.03847 72.03
  • hsl(156, 32%, 32%)
  • rgb(57, 111, 90)
  • #396F5A
  • 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.89327 22.21
  • hsl(156, 24%, 35%)
  • rgb(68, 111, 94)
  • #446F5E
  • 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.77921 15.13
  • hsl(154, 16%, 37%)
  • rgb(80, 111, 98)
  • #506F62
  • 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.64049 17.17
  • hsl(153, 10%, 30%)
  • rgb(70, 86, 79)
  • #46564F
  • 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.50531 49.93
  • hsl(145, 4%, 32%)
  • rgb(79, 86, 82)
  • #4F5652
  • 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.3162 49.72
  • hsl(156, 41%, 30%)
  • rgb(46, 111, 86)
  • #2E6F56
  • 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.99194 29.65
  • hsl(157, 53%, 28%)
  • rgb(34, 111, 82)
  • #226F52
  • 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.07941 39.35
  • hsl(157, 65%, 26%)
  • rgb(23, 111, 78)
  • #176F4E
  • 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.14388 49.2
  • hsl(157, 81%, 23%)
  • rgb(11, 111, 74)
  • #0B6F4A
  • 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.1945 60.46
  • hsl(157, 99%, 21%)
  • rgb(0, 111, 70)
  • #006F46
  • 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.23262 71.05
  • hsl(194, 32%, 32%)
  • rgb(57, 98, 111)
  • #39626F
  • 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.58411 19.07
  • hsl(193, 24%, 35%)
  • rgb(68, 101, 111)
  • #44656F
  • 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.27248 27.64
  • hsl(195, 16%, 37%)
  • rgb(80, 103, 111)
  • #50676F
  • 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.01126 30.75
  • hsl(195, 9%, 39%)
  • rgb(91, 106, 111)
  • #5B6A6F
  • 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.70912 35.9
  • hsl(205, 4%, 32%)
  • rgb(79, 83, 86)
  • #4F5356
  • 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.50604 52.51
  • hsl(193, 41%, 30%)
  • rgb(46, 96, 111)
  • #2E606F
  • 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.82777 24.0
  • hsl(193, 52%, 34%)
  • rgb(42, 115, 136)
  • #2A7388
  • 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.50385 62.44
  • hsl(230, 32%, 40%)
  • rgb(70, 81, 136)
  • #465188
  • 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.29925 47.66
  • hsl(266, 32%, 40%)
  • rgb(99, 70, 136)
  • #634688
  • 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.36948 22.58
  • hsl(302, 32%, 40%)
  • rgb(136, 70, 133)
  • #884685
  • 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.39404 62.0
Not satisfied?
Gimme valid colors and very close to initial color