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(102, 44%, 89%)
  • rgb(223, 240, 216)
  • #DFF0D8

Title big size with words in bold

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

1.89691

New contrast : 22 results (3,409,728 colors tested)

Valid contrasts
Foreground Background Sample Ratio Distance
  • hsl(180, 95%, 23%)
  • rgb(3, 119, 119)
  • #037777
  • hsl(102, 44%, 89%)
  • rgb(223, 240, 216)
  • #DFF0D8

Title big size with words in bold

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

4.50071 90.12
  • hsl(179, 88%, 24%)
  • rgb(7, 119, 118)
  • #077776
  • hsl(102, 44%, 89%)
  • rgb(223, 240, 216)
  • #DFF0D8

Title big size with words in bold

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

4.50027 90.72
  • hsl(178, 78%, 26%)
  • rgb(14, 119, 116)
  • #0E7774
  • hsl(102, 44%, 89%)
  • rgb(223, 240, 216)
  • #DFF0D8

Title big size with words in bold

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

4.50001 91.87
  • hsl(183, 77%, 27%)
  • rgb(16, 118, 125)
  • #10767D
  • hsl(102, 44%, 89%)
  • rgb(223, 240, 216)
  • #DFF0D8

Title big size with words in bold

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

4.50007 87.21
  • hsl(177, 72%, 27%)
  • rgb(19, 119, 114)
  • #137772
  • hsl(102, 44%, 89%)
  • rgb(223, 240, 216)
  • #DFF0D8

Title big size with words in bold

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

4.50023 92.99
  • hsl(176, 70%, 27%)
  • rgb(21, 119, 113)
  • #157771
  • hsl(102, 44%, 89%)
  • rgb(223, 240, 216)
  • #DFF0D8

Title big size with words in bold

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

4.50061 93.55
  • hsl(182, 70%, 28%)
  • rgb(21, 118, 123)
  • #15767B
  • hsl(102, 44%, 89%)
  • rgb(223, 240, 216)
  • #DFF0D8

Title big size with words in bold

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

4.50038 88.09
  • hsl(175, 67%, 27%)
  • rgb(23, 119, 112)
  • #177770
  • hsl(102, 44%, 89%)
  • rgb(223, 240, 216)
  • #DFF0D8

Title big size with words in bold

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

4.50054 94.11
  • hsl(182, 68%, 28%)
  • rgb(23, 118, 122)
  • #17767A
  • hsl(102, 44%, 89%)
  • rgb(223, 240, 216)
  • #DFF0D8

Title big size with words in bold

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

4.50088 88.53
  • hsl(181, 65%, 28%)
  • rgb(25, 118, 121)
  • #197679
  • hsl(102, 44%, 89%)
  • rgb(223, 240, 216)
  • #DFF0D8

Title big size with words in bold

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

4.50092 88.96
  • hsl(181, 63%, 28%)
  • rgb(27, 118, 120)
  • #1B7678
  • hsl(102, 44%, 89%)
  • rgb(223, 240, 216)
  • #DFF0D8

Title big size with words in bold

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

4.50047 89.38
  • hsl(177, 53%, 30%)
  • rgb(36, 118, 114)
  • #247672
  • hsl(102, 44%, 89%)
  • rgb(223, 240, 216)
  • #DFF0D8

Title big size with words in bold

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

4.50027 92.07
  • hsl(181, 47%, 31%)
  • rgb(42, 117, 119)
  • #2A7577
  • hsl(102, 44%, 89%)
  • rgb(223, 240, 216)
  • #DFF0D8

Title big size with words in bold

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

4.50029 88.4
  • hsl(180, 46%, 31%)
  • rgb(43, 117, 118)
  • #2B7576
  • hsl(102, 44%, 89%)
  • rgb(223, 240, 216)
  • #DFF0D8

Title big size with words in bold

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

4.50088 88.8
  • hsl(175, 40%, 32%)
  • rgb(49, 117, 112)
  • #317570
  • hsl(102, 44%, 89%)
  • rgb(223, 240, 216)
  • #DFF0D8

Title big size with words in bold

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

4.5006 91.29
  • hsl(178, 34%, 33%)
  • rgb(56, 116, 114)
  • #387472
  • hsl(102, 44%, 89%)
  • rgb(223, 240, 216)
  • #DFF0D8

Title big size with words in bold

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

4.50036 88.16
  • hsl(181, 30%, 34%)
  • rgb(62, 115, 116)
  • #3E7374
  • hsl(102, 44%, 89%)
  • rgb(223, 240, 216)
  • #DFF0D8

Title big size with words in bold

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

4.50033 84.68
  • hsl(177, 28%, 35%)
  • rgb(64, 115, 113)
  • #407371
  • hsl(102, 44%, 89%)
  • rgb(223, 240, 216)
  • #DFF0D8

Title big size with words in bold

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

4.50099 85.88
  • hsl(183, 26%, 36%)
  • rgb(68, 114, 117)
  • #447275
  • hsl(102, 44%, 89%)
  • rgb(223, 240, 216)
  • #DFF0D8

Title big size with words in bold

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

4.50002 81.1
  • hsl(177, 23%, 36%)
  • rgb(71, 114, 112)
  • #477270
  • hsl(102, 44%, 89%)
  • rgb(223, 240, 216)
  • #DFF0D8

Title big size with words in bold

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

4.50091 83.07
  • hsl(183, 21%, 37%)
  • rgb(75, 113, 115)
  • #4B7173
  • hsl(102, 44%, 89%)
  • rgb(223, 240, 216)
  • #DFF0D8

Title big size with words in bold

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

4.50094 78.1
  • hsl(174, 11%, 39%)
  • rgb(88, 111, 109)
  • #586F6D
  • hsl(102, 44%, 89%)
  • rgb(223, 240, 216)
  • #DFF0D8

Title big size with words in bold

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

4.50007 71.27
Not satisfied ?
Gimme a range of colors