Fork me on GitHub

Find me the good constrasts, for web accessibility, between these two colors:

Foreground Color : invalid color For each color (red, green and blue), enter a number between 0 et 255. The color should be between #000000 and #FFFFFF
Background Color : invalid color For each color (red, green and blue), enter a number between 0 et 255. The color should be between #000000 and #FFFFFF

In the international reglementation etablished by the WCAG, the success criteria 1.4.3 requires a minimum contrast ratio of 4.5:1 (and 3:1 for enlarged text).

This minimum contrast ratio is also required by the French regulation, established by the RGAA 3.0 2016, in the criteria 3.3 et 3.4.

Component to edit :
Gimme :

Old contrast

Invalid contrast
Foreground Background Sample Ratio Distance
  • hsl(120, 32%, 40%)
  • rgb(70, 136, 71)
  • #468847
  • hsl(169, 82%, 66%)
  • rgb(100, 240, 216)
  • #64F0D8

Title big size with words in bold

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

3.07762

New contrast : 41 results (427 colors tested)

Valid contrasts
Foreground Background Sample Ratio Distance
  • hsl(121, 32%, 25%)
  • rgb(44, 86, 45)
  • #2C562D
  • hsl(169, 82%, 66%)
  • rgb(100, 240, 216)
  • #64F0D8

Title big size with words in bold

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

6.05689 54.31
  • hsl(120, 24%, 27%)
  • rgb(52, 86, 52)
  • #345634
  • hsl(169, 82%, 66%)
  • rgb(100, 240, 216)
  • #64F0D8

Title big size with words in bold

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

5.93556 51.64
  • hsl(120, 16%, 29%)
  • rgb(62, 86, 62)
  • #3E563E
  • hsl(169, 82%, 66%)
  • rgb(100, 240, 216)
  • #64F0D8

Title big size with words in bold

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

5.75608 50.16
  • hsl(120, 10%, 30%)
  • rgb(70, 86, 70)
  • #465646
  • hsl(169, 82%, 66%)
  • rgb(100, 240, 216)
  • #64F0D8

Title big size with words in bold

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

5.59613 50.0
  • hsl(120, 4%, 32%)
  • rgb(79, 86, 79)
  • #4F564F
  • hsl(169, 82%, 66%)
  • rgb(100, 240, 216)
  • #64F0D8

Title big size with words in bold

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

5.40163 49.83
  • hsl(121, 42%, 23%)
  • rgb(35, 86, 36)
  • #235624
  • hsl(169, 82%, 66%)
  • rgb(100, 240, 216)
  • #64F0D8

Title big size with words in bold

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

6.17674 59.51
  • hsl(122, 53%, 21%)
  • rgb(26, 86, 28)
  • #1A561C
  • hsl(169, 82%, 66%)
  • rgb(100, 240, 216)
  • #64F0D8

Title big size with words in bold

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

6.27036 66.17
  • hsl(122, 65%, 26%)
  • rgb(23, 111, 26)
  • #176F1A
  • hsl(169, 82%, 66%)
  • rgb(100, 240, 216)
  • #64F0D8

Title big size with words in bold

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

4.51035 59.49
  • hsl(122, 81%, 23%)
  • rgb(11, 111, 15)
  • #0B6F0F
  • hsl(169, 82%, 66%)
  • rgb(100, 240, 216)
  • #64F0D8

Title big size with words in bold

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

4.55172 73.47
  • hsl(122, 99%, 21%)
  • rgb(0, 111, 5)
  • #006F05
  • hsl(169, 82%, 66%)
  • rgb(100, 240, 216)
  • #64F0D8

Title big size with words in bold

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

4.57803 86.45
  • hsl(84, 32%, 25%)
  • rgb(69, 86, 44)
  • #45562C
  • hsl(169, 82%, 66%)
  • rgb(100, 240, 216)
  • #64F0D8

Title big size with words in bold

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

5.72308 52.5
  • hsl(84, 24%, 27%)
  • rgb(72, 86, 52)
  • #485634
  • hsl(169, 82%, 66%)
  • rgb(100, 240, 216)
  • #64F0D8

Title big size with words in bold

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

5.64612 50.9
  • hsl(87, 16%, 29%)
  • rgb(75, 86, 62)
  • #4B563E
  • hsl(169, 82%, 66%)
  • rgb(100, 240, 216)
  • #64F0D8

Title big size with words in bold

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

5.55494 50.08
  • hsl(86, 10%, 30%)
  • rgb(79, 86, 70)
  • #4F5646
  • hsl(169, 82%, 66%)
  • rgb(100, 240, 216)
  • #64F0D8

Title big size with words in bold

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

5.44965 49.9
  • hsl(94, 4%, 32%)
  • rgb(82, 86, 79)
  • #52564F
  • hsl(169, 82%, 66%)
  • rgb(100, 240, 216)
  • #64F0D8

Title big size with words in bold

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

5.35092 49.7
  • hsl(84, 42%, 23%)
  • rgb(65, 86, 35)
  • #415623
  • hsl(169, 82%, 66%)
  • rgb(100, 240, 216)
  • #64F0D8

Title big size with words in bold

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

5.81264 55.59
  • hsl(85, 53%, 21%)
  • rgb(61, 86, 26)
  • #3D561A
  • hsl(169, 82%, 66%)
  • rgb(100, 240, 216)
  • #64F0D8

Title big size with words in bold

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

5.89419 60.08
  • hsl(85, 65%, 20%)
  • rgb(57, 86, 18)
  • #395612
  • hsl(169, 82%, 66%)
  • rgb(100, 240, 216)
  • #64F0D8

Title big size with words in bold

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

5.96601 65.11
  • hsl(85, 82%, 18%)
  • rgb(53, 86, 8)
  • #355608
  • hsl(169, 82%, 66%)
  • rgb(100, 240, 216)
  • #64F0D8

Title big size with words in bold

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

6.03278 72.43
  • hsl(85, 100%, 16%)
  • rgb(49, 86, 0)
  • #315600
  • hsl(169, 82%, 66%)
  • rgb(100, 240, 216)
  • #64F0D8

Title big size with words in bold

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

6.0923 78.95
  • hsl(155, 32%, 25%)
  • rgb(44, 86, 69)
  • #2C5645
  • hsl(169, 82%, 66%)
  • rgb(100, 240, 216)
  • #64F0D8

Title big size with words in bold

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

5.94161 52.24
  • hsl(155, 24%, 27%)
  • rgb(52, 86, 72)
  • #345648
  • hsl(169, 82%, 66%)
  • rgb(100, 240, 216)
  • #64F0D8

Title big size with words in bold

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

5.83399 50.77
  • hsl(152, 16%, 29%)
  • rgb(62, 86, 75)
  • #3E564B
  • hsl(169, 82%, 66%)
  • rgb(100, 240, 216)
  • #64F0D8

Title big size with words in bold

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

5.68616 50.06
  • hsl(153, 10%, 30%)
  • rgb(70, 86, 79)
  • #46564F
  • hsl(169, 82%, 66%)
  • rgb(100, 240, 216)
  • #64F0D8

Title big size with words in bold

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

5.54551 49.93
  • hsl(145, 4%, 32%)
  • rgb(79, 86, 82)
  • #4F5652
  • hsl(169, 82%, 66%)
  • rgb(100, 240, 216)
  • #64F0D8

Title big size with words in bold

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

5.3843 49.72
  • hsl(156, 42%, 23%)
  • rgb(35, 86, 66)
  • #235642
  • hsl(169, 82%, 66%)
  • rgb(100, 240, 216)
  • #64F0D8

Title big size with words in bold

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

6.04432 55.18
  • hsl(157, 53%, 21%)
  • rgb(26, 86, 63)
  • #1A563F
  • hsl(169, 82%, 66%)
  • rgb(100, 240, 216)
  • #64F0D8

Title big size with words in bold

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

6.12939 59.5
  • hsl(157, 65%, 20%)
  • rgb(18, 86, 60)
  • #12563C
  • hsl(169, 82%, 66%)
  • rgb(100, 240, 216)
  • #64F0D8

Title big size with words in bold

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

6.19197 64.39
  • hsl(157, 82%, 18%)
  • rgb(8, 86, 57)
  • #085639
  • hsl(169, 82%, 66%)
  • rgb(100, 240, 216)
  • #64F0D8

Title big size with words in bold

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

6.24759 71.54
  • hsl(157, 100%, 16%)
  • rgb(0, 86, 54)
  • #005636
  • hsl(169, 82%, 66%)
  • rgb(100, 240, 216)
  • #64F0D8

Title big size with words in bold

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

6.28987 77.91
  • hsl(194, 32%, 32%)
  • rgb(57, 98, 111)
  • #39626F
  • hsl(169, 82%, 66%)
  • rgb(100, 240, 216)
  • #64F0D8

Title big size with words in bold

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

4.76022 19.07
  • hsl(194, 24%, 27%)
  • rgb(52, 78, 86)
  • #344E56
  • hsl(169, 82%, 66%)
  • rgb(100, 240, 216)
  • #64F0D8

Title big size with words in bold

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

6.32766 58.24
  • hsl(197, 16%, 29%)
  • rgb(62, 79, 86)
  • #3E4F56
  • hsl(169, 82%, 66%)
  • rgb(100, 240, 216)
  • #64F0D8

Title big size with words in bold

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

6.1025 56.7
  • hsl(195, 10%, 30%)
  • rgb(70, 82, 86)
  • #465256
  • hsl(169, 82%, 66%)
  • rgb(100, 240, 216)
  • #64F0D8

Title big size with words in bold

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

5.76446 53.61
  • hsl(205, 4%, 32%)
  • rgb(79, 83, 86)
  • #4F5356
  • hsl(169, 82%, 66%)
  • rgb(100, 240, 216)
  • #64F0D8

Title big size with words in bold

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

5.54613 52.51
  • hsl(193, 41%, 30%)
  • rgb(46, 96, 111)
  • #2E606F
  • hsl(169, 82%, 66%)
  • rgb(100, 240, 216)
  • #64F0D8

Title big size with words in bold

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

4.96793 24.0
  • hsl(194, 53%, 28%)
  • rgb(34, 93, 111)
  • #225D6F
  • hsl(169, 82%, 66%)
  • rgb(100, 240, 216)
  • #64F0D8

Title big size with words in bold

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

5.23784 39.61
  • hsl(193, 65%, 26%)
  • rgb(23, 91, 111)
  • #175B6F
  • hsl(169, 82%, 66%)
  • rgb(100, 240, 216)
  • #64F0D8

Title big size with words in bold

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

5.42914 50.78
  • hsl(193, 81%, 23%)
  • rgb(11, 89, 111)
  • #0B596F
  • hsl(169, 82%, 66%)
  • rgb(100, 240, 216)
  • #64F0D8

Title big size with words in bold

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

5.61131 62.59
  • hsl(193, 99%, 21%)
  • rgb(0, 86, 111)
  • #00566F
  • hsl(169, 82%, 66%)
  • rgb(100, 240, 216)
  • #64F0D8

Title big size with words in bold

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

5.85689 73.93
  • hsl(230, 32%, 40%)
  • rgb(70, 81, 136)
  • #465188
  • hsl(169, 82%, 66%)
  • rgb(100, 240, 216)
  • #64F0D8

Title big size with words in bold

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

5.36985 47.66
Not satisfied ?