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(151, 50%, 31%)
  • rgb(39, 120, 82)
  • #277852
  • hsl(240, 3%, 17%)
  • rgb(42, 42, 45)
  • #2A2A2D

Title big size with words in bold

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

2.65392

New contrast : 33 results (1,464,000 colors tested)

Valid contrasts
Foreground Background Sample Ratio Distance
  • hsl(150, 54%, 32%)
  • rgb(38, 130, 84)
  • #268254
  • hsl(240, 3%, 17%)
  • rgb(42, 42, 45)
  • #2A2A2D

Title big size with words in bold

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

3.00062 10.02
  • hsl(150, 55%, 32%)
  • rgb(37, 130, 85)
  • #258255
  • hsl(240, 3%, 17%)
  • rgb(42, 42, 45)
  • #2A2A2D

Title big size with words in bold

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

3.00021 10.06
  • hsl(147, 63%, 31%)
  • rgb(29, 131, 76)
  • #1D834C
  • hsl(240, 3%, 17%)
  • rgb(42, 42, 45)
  • #2A2A2D

Title big size with words in bold

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

3.00037 4.86
  • hsl(148, 64%, 31%)
  • rgb(28, 131, 77)
  • #1C834D
  • hsl(240, 3%, 17%)
  • rgb(42, 42, 45)
  • #2A2A2D

Title big size with words in bold

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

3.00033 5.0
  • hsl(149, 65%, 30%)
  • rgb(27, 131, 78)
  • #1B834E
  • hsl(240, 3%, 17%)
  • rgb(42, 42, 45)
  • #2A2A2D

Title big size with words in bold

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

3.00038 7.73
  • hsl(150, 66%, 30%)
  • rgb(26, 131, 79)
  • #1A834F
  • hsl(240, 3%, 17%)
  • rgb(42, 42, 45)
  • #2A2A2D

Title big size with words in bold

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

3.00052 9.63
  • hsl(151, 67%, 30%)
  • rgb(25, 131, 80)
  • #198350
  • hsl(240, 3%, 17%)
  • rgb(42, 42, 45)
  • #2A2A2D

Title big size with words in bold

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

3.00076 11.24
  • hsl(153, 72%, 29%)
  • rgb(21, 131, 83)
  • #158353
  • hsl(240, 3%, 17%)
  • rgb(42, 42, 45)
  • #2A2A2D

Title big size with words in bold

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

3.0005 16.51
  • hsl(155, 75%, 29%)
  • rgb(18, 131, 85)
  • #128355
  • hsl(240, 3%, 17%)
  • rgb(42, 42, 45)
  • #2A2A2D

Title big size with words in bold

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

3.00057 19.92
  • hsl(156, 78%, 28%)
  • rgb(16, 131, 86)
  • #108356
  • hsl(240, 3%, 17%)
  • rgb(42, 42, 45)
  • #2A2A2D

Title big size with words in bold

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

3.00024 22.09
  • hsl(147, 80%, 28%)
  • rgb(14, 132, 68)
  • #0E8444
  • hsl(240, 3%, 17%)
  • rgb(42, 42, 45)
  • #2A2A2D

Title big size with words in bold

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

3.00005 25.53
  • hsl(148, 82%, 28%)
  • rgb(13, 132, 69)
  • #0D8445
  • hsl(240, 3%, 17%)
  • rgb(42, 42, 45)
  • #2A2A2D

Title big size with words in bold

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

3.00066 26.23
  • hsl(149, 84%, 28%)
  • rgb(11, 132, 70)
  • #0B8446
  • hsl(240, 3%, 17%)
  • rgb(42, 42, 45)
  • #2A2A2D

Title big size with words in bold

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

3.00041 28.0
  • hsl(150, 87%, 27%)
  • rgb(9, 132, 71)
  • #098447
  • hsl(240, 3%, 17%)
  • rgb(42, 42, 45)
  • #2A2A2D

Title big size with words in bold

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

3.00036 29.85
  • hsl(151, 89%, 27%)
  • rgb(7, 132, 72)
  • #078448
  • hsl(240, 3%, 17%)
  • rgb(42, 42, 45)
  • #2A2A2D

Title big size with words in bold

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

3.00037 31.76
  • hsl(152, 92%, 26%)
  • rgb(5, 132, 73)
  • #058449
  • hsl(240, 3%, 17%)
  • rgb(42, 42, 45)
  • #2A2A2D

Title big size with words in bold

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

3.0004 33.71
  • hsl(153, 95%, 26%)
  • rgb(3, 132, 74)
  • #03844A
  • hsl(240, 3%, 17%)
  • rgb(42, 42, 45)
  • #2A2A2D

Title big size with words in bold

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

3.00046 35.68
  • hsl(153, 98%, 26%)
  • rgb(1, 132, 75)
  • #01844B
  • hsl(240, 3%, 17%)
  • rgb(42, 42, 45)
  • #2A2A2D

Title big size with words in bold

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

3.00056 37.68
  • hsl(156, 50%, 33%)
  • rgb(42, 129, 95)
  • #2A815F
  • hsl(240, 3%, 17%)
  • rgb(42, 42, 45)
  • #2A2A2D

Title big size with words in bold

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

3.00083 14.35
  • hsl(152, 48%, 34%)
  • rgb(45, 129, 91)
  • #2D815B
  • hsl(240, 3%, 17%)
  • rgb(42, 42, 45)
  • #2A2A2D

Title big size with words in bold

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

3.00011 11.87
  • hsl(151, 47%, 34%)
  • rgb(46, 129, 90)
  • #2E815A
  • hsl(240, 3%, 17%)
  • rgb(42, 42, 45)
  • #2A2A2D

Title big size with words in bold

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

3.00091 11.66
  • hsl(148, 45%, 34%)
  • rgb(48, 129, 87)
  • #308157
  • hsl(240, 3%, 17%)
  • rgb(42, 42, 45)
  • #2A2A2D

Title big size with words in bold

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

3.00056 11.65
  • hsl(154, 42%, 35%)
  • rgb(52, 128, 96)
  • #348060
  • hsl(240, 3%, 17%)
  • rgb(42, 42, 45)
  • #2A2A2D

Title big size with words in bold

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

3.00001 17.6
  • hsl(148, 39%, 36%)
  • rgb(56, 128, 90)
  • #38805A
  • hsl(240, 3%, 17%)
  • rgb(42, 42, 45)
  • #2A2A2D

Title big size with words in bold

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

3.0006 18.11
  • hsl(151, 35%, 36%)
  • rgb(61, 127, 96)
  • #3D7F60
  • hsl(240, 3%, 17%)
  • rgb(42, 42, 45)
  • #2A2A2D

Title big size with words in bold

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

3.00034 23.95
  • hsl(155, 31%, 37%)
  • rgb(66, 126, 101)
  • #427E65
  • hsl(240, 3%, 17%)
  • rgb(42, 42, 45)
  • #2A2A2D

Title big size with words in bold

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

3.00091 29.91
  • hsl(152, 30%, 37%)
  • rgb(67, 126, 99)
  • #437E63
  • hsl(240, 3%, 17%)
  • rgb(42, 42, 45)
  • #2A2A2D

Title big size with words in bold

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

3.0004 30.03
  • hsl(150, 29%, 38%)
  • rgb(68, 126, 97)
  • #447E61
  • hsl(240, 3%, 17%)
  • rgb(42, 42, 45)
  • #2A2A2D

Title big size with words in bold

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

3.00011 30.36
  • hsl(147, 29%, 38%)
  • rgb(69, 126, 95)
  • #457E5F
  • hsl(240, 3%, 17%)
  • rgb(42, 42, 45)
  • #2A2A2D

Title big size with words in bold

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

3.00003 30.87
  • hsl(155, 23%, 39%)
  • rgb(77, 124, 105)
  • #4D7C69
  • hsl(240, 3%, 17%)
  • rgb(42, 42, 45)
  • #2A2A2D

Title big size with words in bold

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

3.00002 40.64
  • hsl(152, 22%, 39%)
  • rgb(78, 124, 103)
  • #4E7C67
  • hsl(240, 3%, 17%)
  • rgb(42, 42, 45)
  • #2A2A2D

Title big size with words in bold

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

3.00019 40.94
  • hsl(149, 22%, 39%)
  • rgb(79, 124, 101)
  • #4F7C65
  • hsl(240, 3%, 17%)
  • rgb(42, 42, 45)
  • #2A2A2D

Title big size with words in bold

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

3.00058 41.39
  • hsl(150, 16%, 41%)
  • rgb(88, 122, 105)
  • #587A69
  • hsl(240, 3%, 17%)
  • rgb(42, 42, 45)
  • #2A2A2D

Title big size with words in bold

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

3.00011 50.64
Not satisfied ?