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(0, 100%, 34%)
  • rgb(174, 0, 0)
  • #AE0000
  • hsl(0, 0%, 12%)
  • rgb(33, 33, 33)
  • #212121

Title big size with words in bold

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

2.14676

New contrast : 30 results (2,365,440 colors tested)

Valid contrasts
Foreground Background Sample Ratio Distance
  • hsl(3, 51%, 60%)
  • rgb(206, 106, 100)
  • #CE6A64
  • hsl(0, 0%, 12%)
  • rgb(33, 33, 33)
  • #212121

Title big size with words in bold

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

4.50094 130.53
  • hsl(1, 52%, 60%)
  • rgb(207, 105, 103)
  • #CF6967
  • hsl(0, 0%, 12%)
  • rgb(33, 33, 33)
  • #212121

Title big size with words in bold

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

4.50061 131.74
  • hsl(3, 57%, 60%)
  • rgb(212, 102, 96)
  • #D46660
  • hsl(0, 0%, 12%)
  • rgb(33, 33, 33)
  • #212121

Title big size with words in bold

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

4.50007 126.01
  • hsl(1, 60%, 60%)
  • rgb(216, 99, 95)
  • #D8635F
  • hsl(0, 0%, 12%)
  • rgb(33, 33, 33)
  • #212121

Title big size with words in bold

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

4.50077 123.89
  • hsl(0, 61%, 61%)
  • rgb(217, 98, 97)
  • #D96261
  • hsl(0, 0%, 12%)
  • rgb(33, 33, 33)
  • #212121

Title big size with words in bold

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

4.50097 124.58
  • hsl(4, 63%, 60%)
  • rgb(218, 98, 88)
  • #DA6258
  • hsl(0, 0%, 12%)
  • rgb(33, 33, 33)
  • #212121

Title big size with words in bold

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

4.50024 119.53
  • hsl(3, 64%, 60%)
  • rgb(219, 97, 90)
  • #DB615A
  • hsl(0, 0%, 12%)
  • rgb(33, 33, 33)
  • #212121

Title big size with words in bold

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

4.50058 120.11
  • hsl(0, 65%, 61%)
  • rgb(221, 95, 93)
  • #DD5F5D
  • hsl(0, 0%, 12%)
  • rgb(33, 33, 33)
  • #212121

Title big size with words in bold

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

4.50047 120.86
  • hsl(3, 68%, 60%)
  • rgb(223, 94, 85)
  • #DF5E55
  • hsl(0, 0%, 12%)
  • rgb(33, 33, 33)
  • #212121

Title big size with words in bold

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

4.50083 116.04
  • hsl(3, 69%, 60%)
  • rgb(224, 93, 86)
  • #E05D56
  • hsl(0, 0%, 12%)
  • rgb(33, 33, 33)
  • #212121

Title big size with words in bold

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

4.50062 116.11
  • hsl(2, 69%, 61%)
  • rgb(225, 92, 87)
  • #E15C57
  • hsl(0, 0%, 12%)
  • rgb(33, 33, 33)
  • #212121

Title big size with words in bold

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

4.50094 116.22
  • hsl(0, 71%, 61%)
  • rgb(227, 90, 88)
  • #E35A58
  • hsl(0, 0%, 12%)
  • rgb(33, 33, 33)
  • #212121

Title big size with words in bold

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

4.50061 115.96
  • hsl(3, 77%, 60%)
  • rgb(232, 86, 77)
  • #E8564D
  • hsl(0, 0%, 12%)
  • rgb(33, 33, 33)
  • #212121

Title big size with words in bold

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

4.50052 108.79
  • hsl(3, 81%, 60%)
  • rgb(236, 82, 73)
  • #EC5249
  • hsl(0, 0%, 12%)
  • rgb(33, 33, 33)
  • #212121

Title big size with words in bold

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

4.50071 105.63
  • hsl(3, 82%, 60%)
  • rgb(237, 81, 71)
  • #ED5147
  • hsl(0, 0%, 12%)
  • rgb(33, 33, 33)
  • #212121

Title big size with words in bold

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

4.50007 104.45
  • hsl(3, 83%, 60%)
  • rgb(238, 80, 69)
  • #EE5045
  • hsl(0, 0%, 12%)
  • rgb(33, 33, 33)
  • #212121

Title big size with words in bold

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

4.50005 103.31
  • hsl(0, 83%, 62%)
  • rgb(239, 78, 78)
  • #EF4E4E
  • hsl(0, 0%, 12%)
  • rgb(33, 33, 33)
  • #212121

Title big size with words in bold

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

4.50088 106.96
  • hsl(4, 84%, 60%)
  • rgb(239, 79, 67)
  • #EF4F43
  • hsl(0, 0%, 12%)
  • rgb(33, 33, 33)
  • #212121

Title big size with words in bold

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

4.50063 102.23
  • hsl(4, 85%, 59%)
  • rgb(240, 78, 64)
  • #F04E40
  • hsl(0, 0%, 12%)
  • rgb(33, 33, 33)
  • #212121

Title big size with words in bold

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

4.50006 100.8
  • hsl(2, 88%, 60%)
  • rgb(243, 74, 66)
  • #F34A42
  • hsl(0, 0%, 12%)
  • rgb(33, 33, 33)
  • #212121

Title big size with words in bold

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

4.50027 100.7
  • hsl(3, 89%, 60%)
  • rgb(244, 73, 62)
  • #F4493E
  • hsl(0, 0%, 12%)
  • rgb(33, 33, 33)
  • #212121

Title big size with words in bold

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

4.50033 99.0
  • hsl(0, 89%, 61%)
  • rgb(245, 71, 69)
  • #F54745
  • hsl(0, 0%, 12%)
  • rgb(33, 33, 33)
  • #212121

Title big size with words in bold

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

4.50074 101.46
  • hsl(3, 92%, 60%)
  • rgb(247, 69, 59)
  • #F7453B
  • hsl(0, 0%, 12%)
  • rgb(33, 33, 33)
  • #212121

Title big size with words in bold

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

4.50036 97.36
  • hsl(4, 93%, 59%)
  • rgb(248, 68, 53)
  • #F84435
  • hsl(0, 0%, 12%)
  • rgb(33, 33, 33)
  • #212121

Title big size with words in bold

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

4.5006 95.41
  • hsl(0, 94%, 61%)
  • rgb(250, 64, 63)
  • #FA403F
  • hsl(0, 0%, 12%)
  • rgb(33, 33, 33)
  • #212121

Title big size with words in bold

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

4.50089 98.34
  • hsl(2, 96%, 60%)
  • rgb(251, 63, 56)
  • #FB3F38
  • hsl(0, 0%, 12%)
  • rgb(33, 33, 33)
  • #212121

Title big size with words in bold

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

4.50091 95.91
  • hsl(0, 96%, 60%)
  • rgb(252, 61, 59)
  • #FC3D3B
  • hsl(0, 0%, 12%)
  • rgb(33, 33, 33)
  • #212121

Title big size with words in bold

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

4.50075 96.8
  • hsl(4, 97%, 58%)
  • rgb(252, 62, 47)
  • #FC3E2F
  • hsl(0, 0%, 12%)
  • rgb(33, 33, 33)
  • #212121

Title big size with words in bold

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

4.50032 93.47
  • hsl(2, 98%, 59%)
  • rgb(253, 60, 50)
  • #FD3C32
  • hsl(0, 0%, 12%)
  • rgb(33, 33, 33)
  • #212121

Title big size with words in bold

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

4.50013 94.13
  • hsl(1, 99%, 60%)
  • rgb(254, 58, 52)
  • #FE3A34
  • hsl(0, 0%, 12%)
  • rgb(33, 33, 33)
  • #212121

Title big size with words in bold

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

4.50016 94.64
Not satisfied ?