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, 100%, 37%)
  • rgb(0, 192, 189)
  • #00C0BD
  • 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.26423

New contrast : 30 results (294 colors tested)

Valid contrasts
Foreground Background Sample Ratio Distance
  • hsl(178, 100%, 22%)
  • rgb(0, 117, 114)
  • #007572
  • 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.54456 94.49
  • hsl(178, 82%, 25%)
  • rgb(11, 117, 114)
  • #0B7572
  • 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.52381 94.44
  • hsl(178, 67%, 27%)
  • rgb(23, 117, 114)
  • #177572
  • 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.49173 94.04
  • hsl(177, 54%, 29%)
  • rgb(34, 117, 114)
  • #227572
  • 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.44675 93.0
  • hsl(177, 43%, 31%)
  • rgb(46, 117, 114)
  • #2E7572
  • 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.37956 90.71
  • hsl(177, 34%, 34%)
  • rgb(57, 117, 114)
  • #397572
  • 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.30106 87.0
  • hsl(177, 25%, 36%)
  • rgb(69, 117, 115)
  • #457573
  • 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.19144 79.3
  • hsl(176, 18%, 38%)
  • rgb(80, 117, 115)
  • #507573
  • 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.08084 68.05
  • hsl(177, 11%, 40%)
  • rgb(92, 117, 116)
  • #5C7574
  • 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.93912 31.82
  • hsl(175, 6%, 43%)
  • rgb(103, 117, 116)
  • #677574
  • 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.80173 65.56
  • hsl(180, 0%, 45%)
  • rgb(115, 117, 117)
  • #737575
  • 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.6354 89.87
  • hsl(142, 100%, 22%)
  • rgb(0, 117, 44)
  • #00752C
  • 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.86447 151.4
  • hsl(143, 82%, 25%)
  • rgb(11, 117, 53)
  • #0B7535
  • 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.81693 143.19
  • hsl(142, 67%, 27%)
  • rgb(23, 117, 59)
  • #17753B
  • 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.76274 137.63
  • hsl(143, 54%, 29%)
  • rgb(34, 117, 66)
  • #227542
  • 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.6892 130.91
  • hsl(143, 43%, 31%)
  • rgb(46, 117, 74)
  • #2E754A
  • 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.58575 122.66
  • hsl(142, 34%, 34%)
  • rgb(57, 117, 80)
  • #397550
  • 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.47684 115.27
  • hsl(143, 25%, 36%)
  • rgb(69, 117, 88)
  • #457558
  • 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.33201 103.96
  • hsl(142, 18%, 38%)
  • rgb(80, 117, 94)
  • #50755E
  • 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.18872 91.55
  • hsl(144, 11%, 40%)
  • rgb(92, 117, 102)
  • #5C7566
  • 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.01021 67.07
  • hsl(141, 6%, 43%)
  • rgb(103, 117, 108)
  • #67756C
  • 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.8412 51.85
  • hsl(150, 0%, 45%)
  • rgb(115, 117, 116)
  • #737574
  • 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.64019 89.21
  • hsl(214, 100%, 42%)
  • rgb(0, 91, 218)
  • #005BDA
  • 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.98491 100.2
  • hsl(215, 81%, 41%)
  • rgb(19, 91, 192)
  • #135BC0
  • 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.39215 100.77
  • hsl(251, 89%, 57%)
  • rgb(85, 48, 244)
  • #5530F4
  • 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.74077 130.17
  • hsl(251, 67%, 55%)
  • rgb(94, 65, 218)
  • #5E41DA
  • 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.4726 106.07
  • hsl(251, 47%, 52%)
  • rgb(99, 76, 192)
  • #634CC0
  • 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.31491 83.9
  • hsl(286, 100%, 37%)
  • rgb(150, 0, 192)
  • #9600C0
  • 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.86732 154.71
  • hsl(322, 100%, 37%)
  • rgb(192, 0, 119)
  • #C00077
  • 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.98687 70.0
  • hsl(358, 100%, 37%)
  • rgb(192, 0, 4)
  • #C00004
  • 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.47539 185.0
Not satisfied ?