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(120, 99%, 99%)
  • rgb(254, 255, 254)
  • #FEFFFE
  • hsl(35, 100%, 50%)
  • rgb(255, 151, 0)
  • #FF9700

Title big size with words in bold

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

2.16449

New contrast : 34 results (2,671,872 colors tested)

Valid contrasts
Foreground Background Sample Ratio Distance
  • hsl(120, 99%, 99%)
  • rgb(254, 255, 254)
  • #FEFFFE
  • hsl(30, 90%, 37%)
  • rgb(180, 97, 9)
  • #B46109

Title big size with words in bold

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

4.50089 83.33
  • hsl(120, 99%, 99%)
  • rgb(254, 255, 254)
  • #FEFFFE
  • hsl(30, 89%, 37%)
  • rgb(180, 97, 10)
  • #B4610A

Title big size with words in bold

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

4.50047 83.32
  • hsl(120, 99%, 99%)
  • rgb(254, 255, 254)
  • #FEFFFE
  • hsl(30, 88%, 37%)
  • rgb(180, 97, 11)
  • #B4610B

Title big size with words in bold

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

4.50003 83.3
  • hsl(120, 99%, 99%)
  • rgb(254, 255, 254)
  • #FEFFFE
  • hsl(33, 98%, 34%)
  • rgb(177, 99, 1)
  • #B16301

Title big size with words in bold

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

4.50078 85.05
  • hsl(120, 99%, 99%)
  • rgb(254, 255, 254)
  • #FEFFFE
  • hsl(33, 97%, 35%)
  • rgb(177, 99, 2)
  • #B16302

Title big size with words in bold

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

4.50036 85.05
  • hsl(120, 99%, 99%)
  • rgb(254, 255, 254)
  • #FEFFFE
  • hsl(31, 81%, 37%)
  • rgb(175, 100, 18)
  • #AF6412

Title big size with words in bold

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

4.50098 86.12
  • hsl(120, 99%, 99%)
  • rgb(254, 255, 254)
  • #FEFFFE
  • hsl(31, 80%, 38%)
  • rgb(175, 100, 19)
  • #AF6413

Title big size with words in bold

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

4.50033 86.08
  • hsl(120, 99%, 99%)
  • rgb(254, 255, 254)
  • #FEFFFE
  • hsl(35, 100%, 33%)
  • rgb(172, 102, 0)
  • #AC6600

Title big size with words in bold

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

4.5007 88.34
  • hsl(120, 99%, 99%)
  • rgb(254, 255, 254)
  • #FEFFFE
  • hsl(35, 98%, 33%)
  • rgb(172, 102, 1)
  • #AC6601

Title big size with words in bold

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

4.50028 88.34
  • hsl(120, 99%, 99%)
  • rgb(254, 255, 254)
  • #FEFFFE
  • hsl(34, 86%, 35%)
  • rgb(170, 103, 12)
  • #AA670C

Title big size with words in bold

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

4.50076 89.75
  • hsl(120, 99%, 99%)
  • rgb(254, 255, 254)
  • #FEFFFE
  • hsl(34, 85%, 35%)
  • rgb(170, 103, 13)
  • #AA670D

Title big size with words in bold

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

4.50027 89.73
  • hsl(120, 99%, 99%)
  • rgb(254, 255, 254)
  • #FEFFFE
  • hsl(34, 79%, 36%)
  • rgb(168, 104, 19)
  • #A86813

Title big size with words in bold

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

4.50088 91.08
  • hsl(120, 99%, 99%)
  • rgb(254, 255, 254)
  • #FEFFFE
  • hsl(34, 78%, 36%)
  • rgb(168, 104, 20)
  • #A86814

Title big size with words in bold

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

4.5002 91.03
  • hsl(120, 99%, 99%)
  • rgb(254, 255, 254)
  • #FEFFFE
  • hsl(34, 75%, 37%)
  • rgb(166, 105, 23)
  • #A66917

Title big size with words in bold

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

4.50097 92.45
  • hsl(120, 99%, 99%)
  • rgb(254, 255, 254)
  • #FEFFFE
  • hsl(34, 74%, 37%)
  • rgb(166, 105, 24)
  • #A66918

Title big size with words in bold

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

4.50018 92.38
  • hsl(120, 99%, 99%)
  • rgb(254, 255, 254)
  • #FEFFFE
  • hsl(34, 72%, 37%)
  • rgb(164, 106, 26)
  • #A46A1A

Title big size with words in bold

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

4.50036 93.87
  • hsl(120, 99%, 99%)
  • rgb(254, 255, 254)
  • #FEFFFE
  • hsl(31, 57%, 40%)
  • rgb(163, 106, 44)
  • #A36A2C

Title big size with words in bold

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

4.50011 92.23
  • hsl(120, 99%, 99%)
  • rgb(254, 255, 254)
  • #FEFFFE
  • hsl(35, 71%, 37%)
  • rgb(162, 107, 27)
  • #A26B1B

Title big size with words in bold

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

4.50022 95.46
  • hsl(120, 99%, 99%)
  • rgb(254, 255, 254)
  • #FEFFFE
  • hsl(32, 57%, 40%)
  • rgb(161, 107, 44)
  • #A16B2C

Title big size with words in bold

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

4.50052 94.0
  • hsl(120, 99%, 99%)
  • rgb(254, 255, 254)
  • #FEFFFE
  • hsl(36, 72%, 36%)
  • rgb(160, 108, 26)
  • #A06C1A

Title big size with words in bold

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

4.50072 97.23
  • hsl(120, 99%, 99%)
  • rgb(254, 255, 254)
  • #FEFFFE
  • hsl(38, 73%, 35%)
  • rgb(158, 109, 24)
  • #9E6D18

Title big size with words in bold

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

4.50091 99.09
  • hsl(120, 99%, 99%)
  • rgb(254, 255, 254)
  • #FEFFFE
  • hsl(37, 72%, 35%)
  • rgb(158, 109, 25)
  • #9E6D19

Title big size with words in bold

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

4.50009 99.03
  • hsl(120, 99%, 99%)
  • rgb(254, 255, 254)
  • #FEFFFE
  • hsl(34, 57%, 39%)
  • rgb(157, 109, 42)
  • #9D6D2A

Title big size with words in bold

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

4.50087 98.0
  • hsl(120, 99%, 99%)
  • rgb(254, 255, 254)
  • #FEFFFE
  • hsl(39, 76%, 34%)
  • rgb(156, 110, 21)
  • #9C6E15

Title big size with words in bold

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

4.5006 100.99
  • hsl(120, 99%, 99%)
  • rgb(254, 255, 254)
  • #FEFFFE
  • hsl(36, 58%, 38%)
  • rgb(155, 110, 40)
  • #9B6E28

Title big size with words in bold

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

4.50066 100.16
  • hsl(120, 99%, 99%)
  • rgb(254, 255, 254)
  • #FEFFFE
  • hsl(38, 61%, 37%)
  • rgb(153, 111, 37)
  • #996F25

Title big size with words in bold

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

4.50044 102.43
  • hsl(120, 99%, 99%)
  • rgb(254, 255, 254)
  • #FEFFFE
  • hsl(31, 42%, 42%)
  • rgb(153, 110, 62)
  • #996E3E

Title big size with words in bold

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

4.50098 96.25
  • hsl(120, 99%, 99%)
  • rgb(254, 255, 254)
  • #FEFFFE
  • hsl(35, 50%, 39%)
  • rgb(152, 111, 50)
  • #986F32

Title big size with words in bold

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

4.50047 101.05
  • hsl(120, 99%, 99%)
  • rgb(254, 255, 254)
  • #FEFFFE
  • hsl(40, 65%, 35%)
  • rgb(151, 112, 32)
  • #977020

Title big size with words in bold

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

4.50098 104.81
  • hsl(120, 99%, 99%)
  • rgb(254, 255, 254)
  • #FEFFFE
  • hsl(33, 43%, 41%)
  • rgb(151, 111, 60)
  • #976F3C

Title big size with words in bold

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

4.5005 99.09
  • hsl(120, 99%, 99%)
  • rgb(254, 255, 254)
  • #FEFFFE
  • hsl(35, 44%, 40%)
  • rgb(149, 112, 57)
  • #957039

Title big size with words in bold

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

4.50072 102.13
  • hsl(120, 99%, 99%)
  • rgb(254, 255, 254)
  • #FEFFFE
  • hsl(40, 55%, 37%)
  • rgb(148, 113, 42)
  • #94712A

Title big size with words in bold

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

4.50072 106.44
  • hsl(120, 99%, 99%)
  • rgb(254, 255, 254)
  • #FEFFFE
  • hsl(31, 33%, 43%)
  • rgb(147, 112, 73)
  • #937049

Title big size with words in bold

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

4.50089 97.61
  • hsl(120, 99%, 99%)
  • rgb(254, 255, 254)
  • #FEFFFE
  • hsl(34, 34%, 42%)
  • rgb(145, 113, 70)
  • #917146

Title big size with words in bold

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

4.50093 101.41
Not satisfied ?
Gimme a range of colors