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(176, 79%, 29%)
  • rgb(15, 133, 127)
  • #0F857F
  • hsl(0, 0%, 100%)
  • rgb(255, 255, 255)
  • #FFF

Title big size with words in bold

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

4.48547

New contrast : 12 results (1,112,640 colors tested)

Valid contrasts
Foreground Background Sample Ratio Distance
  • hsl(181, 83%, 28%)
  • rgb(12, 132, 135)
  • #0C8487
  • 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.50065 7.85
  • hsl(181, 88%, 28%)
  • rgb(8, 132, 136)
  • #088488
  • 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.50031 7.27
  • hsl(177, 94%, 26%)
  • rgb(4, 133, 127)
  • #04857F
  • 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.50003 11.0
  • hsl(176, 60%, 32%)
  • rgb(33, 132, 126)
  • #21847E
  • 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 18.0
  • hsl(175, 57%, 32%)
  • rgb(36, 132, 124)
  • #24847C
  • 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.5001 20.98
  • hsl(181, 57%, 33%)
  • rgb(36, 131, 134)
  • #248386
  • 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 21.25
  • hsl(180, 54%, 33%)
  • rgb(39, 131, 132)
  • #278384
  • 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.50067 24.07
  • hsl(172, 52%, 33%)
  • rgb(41, 132, 120)
  • #298478
  • 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 25.83
  • hsl(178, 50%, 34%)
  • rgb(43, 131, 129)
  • #2B8381
  • 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.50042 28.0
  • hsl(173, 36%, 37%)
  • rgb(60, 130, 122)
  • #3C827A
  • 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.50044 44.97
  • hsl(181, 36%, 37%)
  • rgb(61, 129, 131)
  • #3D8183
  • 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.50039 46.0
  • hsl(177, 32%, 38%)
  • rgb(65, 129, 126)
  • #41817E
  • 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 49.99
Not satisfied ?
Gimme a range of colors