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(0, 0%, 100%)
  • rgb(255, 255, 255)
  • #FFF
  • hsl(136, 24%, 60%)
  • rgb(131, 179, 144)
  • #83B390

Title big size with words in bold

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

2.38208

New contrast : 21 results (9,117,540 colors tested)

Valid contrasts
Foreground Background Sample Ratio Distance
  • hsl(0, 0%, 100%)
  • rgb(255, 255, 255)
  • #FFFFFF
  • hsl(141, 17%, 42%)
  • rgb(90, 127, 103)
  • #5A7F67

Title big size with words in bold

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

4.50032 65.3
  • hsl(0, 0%, 100%)
  • rgb(255, 255, 255)
  • #FFFFFF
  • hsl(133, 21%, 41%)
  • rgb(83, 129, 93)
  • #53815D

Title big size with words in bold

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

4.50068 71.68
  • hsl(0, 0%, 100%)
  • rgb(255, 255, 255)
  • #FFFFFF
  • hsl(137, 29%, 39%)
  • rgb(72, 131, 89)
  • #488359

Title big size with words in bold

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

4.50034 78.42
  • hsl(0, 0%, 100%)
  • rgb(255, 255, 255)
  • #FFFFFF
  • hsl(138, 33%, 38%)
  • rgb(66, 132, 86)
  • #428456

Title big size with words in bold

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

4.50013 83.09
  • hsl(0, 0%, 100%)
  • rgb(255, 255, 255)
  • #FFFFFF
  • hsl(140, 34%, 38%)
  • rgb(65, 132, 88)
  • #418458

Title big size with words in bold

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

4.50046 82.76
  • hsl(0, 0%, 100%)
  • rgb(255, 255, 255)
  • #FFFFFF
  • hsl(135, 37%, 38%)
  • rgb(61, 133, 79)
  • #3D854F

Title big size with words in bold

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

4.50032 89.42
  • hsl(0, 0%, 100%)
  • rgb(255, 255, 255)
  • #FFFFFF
  • hsl(137, 37%, 37%)
  • rgb(60, 133, 81)
  • #3C8551

Title big size with words in bold

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

4.50068 89.01
  • hsl(0, 0%, 100%)
  • rgb(255, 255, 255)
  • #FFFFFF
  • hsl(139, 38%, 37%)
  • rgb(59, 133, 83)
  • #3B8553

Title big size with words in bold

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

4.50076 88.69
  • hsl(0, 0%, 100%)
  • rgb(255, 255, 255)
  • #FFFFFF
  • hsl(132, 41%, 37%)
  • rgb(55, 134, 72)
  • #378648

Title big size with words in bold

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

4.50059 96.67
  • hsl(0, 0%, 100%)
  • rgb(255, 255, 255)
  • #FFFFFF
  • hsl(135, 42%, 36%)
  • rgb(54, 134, 74)
  • #36864A

Title big size with words in bold

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

4.50086 96.21
  • hsl(0, 0%, 100%)
  • rgb(255, 255, 255)
  • #FFFFFF
  • hsl(137, 43%, 36%)
  • rgb(53, 134, 76)
  • #35864C

Title big size with words in bold

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

4.50086 95.83
  • hsl(0, 0%, 100%)
  • rgb(255, 255, 255)
  • #FFFFFF
  • hsl(139, 44%, 36%)
  • rgb(52, 134, 78)
  • #34864E

Title big size with words in bold

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

4.50058 95.52
  • hsl(0, 0%, 100%)
  • rgb(255, 255, 255)
  • #FFFFFF
  • hsl(140, 44%, 36%)
  • rgb(51, 134, 80)
  • #338650

Title big size with words in bold

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

4.50003 95.29
  • hsl(0, 0%, 100%)
  • rgb(255, 255, 255)
  • #FFFFFF
  • hsl(138, 50%, 35%)
  • rgb(44, 135, 72)
  • #2C8748

Title big size with words in bold

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

4.50039 103.76
  • hsl(0, 0%, 100%)
  • rgb(255, 255, 255)
  • #FFFFFF
  • hsl(135, 58%, 33%)
  • rgb(36, 136, 62)
  • #24883E

Title big size with words in bold

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

4.50041 114.17
  • hsl(0, 0%, 100%)
  • rgb(255, 255, 255)
  • #FFFFFF
  • hsl(138, 60%, 33%)
  • rgb(34, 136, 65)
  • #228841

Title big size with words in bold

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

4.50063 114.09
  • hsl(0, 0%, 100%)
  • rgb(255, 255, 255)
  • #FFFFFF
  • hsl(140, 61%, 32%)
  • rgb(32, 136, 68)
  • #208844

Title big size with words in bold

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

4.50011 114.19
  • hsl(0, 0%, 100%)
  • rgb(255, 255, 255)
  • #FFFFFF
  • hsl(132, 68%, 31%)
  • rgb(26, 137, 49)
  • #1A8931

Title big size with words in bold

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

4.50013 127.84
  • hsl(0, 0%, 100%)
  • rgb(255, 255, 255)
  • #FFFFFF
  • hsl(133, 69%, 31%)
  • rgb(25, 137, 50)
  • #198932

Title big size with words in bold

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

4.50097 127.97
  • hsl(0, 0%, 100%)
  • rgb(255, 255, 255)
  • #FFFFFF
  • hsl(135, 71%, 31%)
  • rgb(23, 137, 53)
  • #178935

Title big size with words in bold

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

4.50054 127.8
  • hsl(0, 0%, 100%)
  • rgb(255, 255, 255)
  • #FFFFFF
  • hsl(136, 72%, 31%)
  • rgb(22, 137, 54)
  • #168936

Title big size with words in bold

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

4.50098 128.02
Not satisfied ?