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(76, 73%, 43%)
  • rgb(149, 193, 30)
  • #95C11E
  • 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.11594

New contrast : 23 results (5,232,087 colors tested)

Valid contrasts
Foreground Background Sample Ratio Distance
  • hsl(71, 29%, 37%)
  • rgb(113, 124, 67)
  • #717C43
  • 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.5004 68.72
  • hsl(75, 18%, 40%)
  • rgb(113, 123, 85)
  • #717B55
  • 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.50016 60.67
  • hsl(79, 16%, 41%)
  • rgb(112, 123, 89)
  • #707B59
  • 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.50027 57.31
  • hsl(72, 38%, 35%)
  • rgb(111, 125, 56)
  • #6F7D38
  • 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.50021 70.59
  • hsl(76, 23%, 39%)
  • rgb(111, 124, 77)
  • #6F7C4D
  • 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.50052 65.39
  • hsl(74, 33%, 36%)
  • rgb(110, 125, 62)
  • #6E7D3E
  • 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.50064 69.86
  • hsl(72, 50%, 32%)
  • rgb(109, 126, 41)
  • #6D7E29
  • 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.50006 71.36
  • hsl(74, 44%, 34%)
  • rgb(108, 126, 49)
  • #6C7E31
  • 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.50033 71.32
  • hsl(76, 38%, 35%)
  • rgb(107, 126, 56)
  • #6B7E38
  • 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.50006 70.96
  • hsl(72, 62%, 30%)
  • rgb(106, 127, 29)
  • #6A7F1D
  • 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.50033 71.6
  • hsl(75, 53%, 32%)
  • rgb(105, 127, 39)
  • #697F27
  • 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.50094 71.92
  • hsl(72, 92%, 26%)
  • rgb(103, 128, 5)
  • #678005
  • 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.50009 72.91
  • hsl(72, 93%, 25%)
  • rgb(103, 128, 4)
  • #678004
  • 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.50051 73.03
  • hsl(72, 95%, 25%)
  • rgb(103, 128, 3)
  • #678003
  • 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.50094 73.16
  • hsl(79, 40%, 35%)
  • rgb(103, 127, 54)
  • #677F36
  • 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.5009 71.86
  • hsl(75, 68%, 29%)
  • rgb(102, 128, 24)
  • #668018
  • 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.50082 72.35
  • hsl(77, 56%, 32%)
  • rgb(101, 128, 36)
  • #658024
  • 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.50018 72.75
  • hsl(79, 48%, 33%)
  • rgb(100, 128, 44)
  • #64802C
  • 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.50074 73.03
  • hsl(76, 79%, 28%)
  • rgb(98, 129, 15)
  • #62810F
  • 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.50032 73.57
  • hsl(76, 80%, 28%)
  • rgb(98, 129, 14)
  • #62810E
  • 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.50086 73.61
  • hsl(79, 63%, 30%)
  • rgb(97, 129, 29)
  • #61811D
  • 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.50053 73.85
  • hsl(79, 76%, 28%)
  • rgb(93, 130, 17)
  • #5D8211
  • 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.50009 75.35
  • hsl(79, 78%, 28%)
  • rgb(93, 130, 16)
  • #5D8210
  • 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.50068 75.39
Not satisfied ?