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(199, 100%, 40%)
  • rgb(0, 140, 205)
  • #008CCD
  • 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.

3.72817

New contrast : 25 results (237 colors tested)

Valid contrasts
Foreground Background Sample Ratio Distance
  • hsl(199, 100%, 35%)
  • rgb(0, 123, 180)
  • #007BB4
  • 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.67473 27.39
  • hsl(199, 82%, 33%)
  • rgb(15, 110, 155)
  • #0F6E9B
  • 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.6391 52.97
  • hsl(199, 65%, 36%)
  • rgb(32, 115, 155)
  • #20739B
  • 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.26709 47.6
  • hsl(199, 53%, 39%)
  • rgb(47, 120, 155)
  • #2F789B
  • 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.90566 30.79
  • hsl(200, 41%, 42%)
  • rgb(64, 124, 155)
  • #407C9B
  • 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.5908 51.05
  • hsl(199, 32%, 38%)
  • rgb(66, 109, 130)
  • #426D82
  • 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.6128 54.76
  • hsl(198, 24%, 40%)
  • rgb(79, 114, 130)
  • #4F7282
  • 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.17022 37.7
  • hsl(201, 16%, 43%)
  • rgb(93, 117, 130)
  • #5D7582
  • 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.84732 71.81
  • hsl(201, 10%, 46%)
  • rgb(105, 121, 130)
  • #697982
  • 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.50843 90.0
  • hsl(213, 4%, 39%)
  • rgb(96, 100, 105)
  • #606469
  • 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.95878 56.39
  • hsl(162, 100%, 25%)
  • rgb(0, 130, 93)
  • #00825D
  • 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.82635 112.03
  • hsl(162, 81%, 28%)
  • rgb(13, 130, 96)
  • #0D8260
  • 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.79554 108.97
  • hsl(161, 65%, 30%)
  • rgb(27, 130, 99)
  • #1B8263
  • 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.75132 105.44
  • hsl(162, 53%, 33%)
  • rgb(39, 130, 104)
  • #278268
  • 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.68832 99.06
  • hsl(162, 42%, 35%)
  • rgb(53, 130, 108)
  • #35826C
  • 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.60428 91.45
  • hsl(162, 32%, 38%)
  • rgb(66, 130, 111)
  • #42826F
  • 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.51201 81.64
  • hsl(160, 24%, 33%)
  • rgb(64, 105, 92)
  • #40695C
  • 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.1889 106.96
  • hsl(162, 16%, 35%)
  • rgb(75, 105, 96)
  • #4B6960
  • 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.01942 97.12
  • hsl(162, 11%, 37%)
  • rgb(84, 105, 99)
  • #546963
  • 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.86959 86.23
  • hsl(153, 4%, 39%)
  • rgb(96, 105, 101)
  • #606965
  • 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.66663 65.65
  • hsl(235, 58%, 52%)
  • rgb(63, 74, 205)
  • #3F4ACD
  • 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.835 33.46
  • hsl(270, 81%, 50%)
  • rgb(130, 24, 231)
  • #8218E7
  • 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.49406 86.79
  • hsl(270, 65%, 48%)
  • rgb(126, 42, 205)
  • #7E2ACD
  • 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.77449 101.94
  • hsl(307, 100%, 40%)
  • rgb(205, 0, 181)
  • #CD00B5
  • 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.92603 180.26
  • hsl(343, 100%, 40%)
  • rgb(205, 0, 58)
  • #CD003A
  • 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.74253 139.15
Not satisfied ?
Gimme valid colors and very close to initial color