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(179, 37%, 58%)
  • rgb(109, 189, 188)
  • #6DBDBC
  • 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.17494

New contrast : 41 results (362 colors tested)

Valid contrasts
Foreground Background Sample Ratio Distance
  • hsl(178, 27%, 35%)
  • rgb(65, 114, 113)
  • #417271
  • 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.42616 97.57
  • hsl(178, 19%, 37%)
  • rgb(77, 114, 113)
  • #4D7271
  • 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.30178 95.7
  • hsl(177, 13%, 39%)
  • rgb(87, 114, 113)
  • #577271
  • 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.18439 94.89
  • hsl(175, 6%, 41%)
  • rgb(100, 114, 113)
  • #647271
  • 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.01524 94.52
  • hsl(180, 1%, 43%)
  • rgb(110, 114, 114)
  • #6E7272
  • 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.86911 93.87
  • hsl(179, 35%, 32%)
  • rgb(54, 114, 113)
  • #367271
  • 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.52307 100.34
  • hsl(179, 46%, 30%)
  • rgb(42, 114, 113)
  • #2A7271
  • 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.60924 104.6
  • hsl(179, 57%, 28%)
  • rgb(31, 114, 113)
  • #1F7271
  • 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.6701 109.65
  • hsl(179, 70%, 26%)
  • rgb(20, 114, 113)
  • #147271
  • 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.7141 115.7
  • hsl(179, 86%, 23%)
  • rgb(8, 114, 113)
  • #087271
  • 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.74445 123.29
  • hsl(142, 27%, 35%)
  • rgb(65, 114, 83)
  • #417253
  • 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.59017 118.52
  • hsl(142, 19%, 37%)
  • rgb(77, 114, 91)
  • #4D725B
  • 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.42139 110.99
  • hsl(142, 13%, 39%)
  • rgb(87, 114, 97)
  • #577261
  • 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.27004 105.85
  • hsl(141, 6%, 41%)
  • rgb(100, 114, 105)
  • #647269
  • 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.05686 99.81
  • hsl(150, 1%, 43%)
  • rgb(110, 114, 112)
  • #6E7270
  • 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.8793 95.13
  • hsl(142, 35%, 32%)
  • rgb(54, 114, 77)
  • #36724D
  • 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.7206 125.06
  • hsl(142, 46%, 30%)
  • rgb(42, 114, 69)
  • #2A7245
  • 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.84745 134.03
  • hsl(142, 57%, 28%)
  • rgb(31, 114, 62)
  • #1F723E
  • 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.94102 142.55
  • hsl(142, 70%, 26%)
  • rgb(20, 114, 56)
  • #147238
  • 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.01069 150.76
  • hsl(142, 86%, 23%)
  • rgb(8, 114, 47)
  • #08722F
  • 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.07235 162.05
  • hsl(215, 27%, 42%)
  • rgb(79, 104, 139)
  • #4F688B
  • 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.69817 91.21
  • hsl(217, 19%, 45%)
  • rgb(94, 111, 139)
  • #5E6F8B
  • 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.09396 84.14
  • hsl(215, 13%, 39%)
  • rgb(87, 98, 114)
  • #576272
  • 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.18502 105.36
  • hsl(218, 6%, 41%)
  • rgb(100, 105, 114)
  • #646972
  • 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.51836 99.96
  • hsl(210, 1%, 43%)
  • rgb(110, 112, 114)
  • #6E7072
  • 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.972 95.16
  • hsl(215, 35%, 47%)
  • rgb(78, 113, 164)
  • #4E71A4
  • 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.97388 78.44
  • hsl(214, 45%, 44%)
  • rgb(61, 104, 164)
  • #3D68A4
  • 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.65335 90.39
  • hsl(215, 56%, 47%)
  • rgb(52, 109, 189)
  • #346DBD
  • 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.16187 88.67
  • hsl(251, 27%, 50%)
  • rgb(107, 94, 164)
  • #6B5EA4
  • 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.58168 95.51
  • hsl(250, 22%, 53%)
  • rgb(120, 111, 164)
  • #786FA4
  • 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.55684 78.68
  • hsl(249, 13%, 48%)
  • rgb(112, 107, 139)
  • #706B8B
  • 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.04221 87.46
  • hsl(244, 6%, 41%)
  • rgb(101, 100, 114)
  • #656472
  • 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.8024 103.56
  • hsl(255, 1%, 43%)
  • rgb(111, 110, 114)
  • #6F6E72
  • 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.06115 96.49
  • hsl(251, 42%, 54%)
  • rgb(109, 90, 189)
  • #6D5ABD
  • 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.45804 99.0
  • hsl(287, 27%, 50%)
  • rgb(149, 94, 164)
  • #955EA4
  • 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.75645 93.11
  • hsl(285, 19%, 45%)
  • rgb(128, 94, 139)
  • #805E8B
  • 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.39605 98.93
  • hsl(286, 13%, 48%)
  • rgb(132, 107, 139)
  • #846B8B
  • 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.71169 86.93
  • hsl(278, 6%, 41%)
  • rgb(109, 100, 114)
  • #6D6472
  • 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.6511 103.55
  • hsl(285, 1%, 43%)
  • rgb(113, 110, 114)
  • #716E72
  • 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.02934 96.48
  • hsl(286, 35%, 47%)
  • rgb(145, 78, 164)
  • #914EA4
  • 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.48336 110.1
  • hsl(287, 47%, 50%)
  • rgb(164, 71, 189)
  • #A447BD
  • 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.98265 113.87
Not satisfied ?