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, 53%, 43%)
  • rgb(170, 51, 51)
  • #AA3333
  • hsl(0, 100%, 10%)
  • rgb(51, 0, 0)
  • #330000

Title big size with words in bold

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

2.83192

New contrast : 51 results (2,779,920 colors tested)

Valid contrasts
Foreground Background Sample Ratio Distance
  • hsl(1, 26%, 54%)
  • rgb(169, 110, 108)
  • #A96E6C
  • hsl(0, 100%, 10%)
  • rgb(51, 0, 0)
  • #330000

Title big size with words in bold

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

4.50043 73.1
  • hsl(4, 24%, 53%)
  • rgb(165, 112, 108)
  • #A5706C
  • hsl(0, 100%, 10%)
  • rgb(51, 0, 0)
  • #330000

Title big size with words in bold

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

4.50057 74.41
  • hsl(0, 17%, 53%)
  • rgb(157, 115, 115)
  • #9D7373
  • hsl(0, 100%, 10%)
  • rgb(51, 0, 0)
  • #330000

Title big size with words in bold

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

4.50004 80.52
  • hsl(4, 10%, 51%)
  • rgb(144, 120, 118)
  • #907876
  • hsl(0, 100%, 10%)
  • rgb(51, 0, 0)
  • #330000

Title big size with words in bold

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

4.50054 84.89
  • hsl(0, 28%, 54%)
  • rgb(173, 108, 107)
  • #AD6C6B
  • hsl(0, 100%, 10%)
  • rgb(51, 0, 0)
  • #330000

Title big size with words in bold

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

4.50066 71.19
  • hsl(0, 30%, 55%)
  • rgb(175, 107, 106)
  • #AF6B6A
  • hsl(0, 100%, 10%)
  • rgb(51, 0, 0)
  • #330000

Title big size with words in bold

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

4.5005 69.94
  • hsl(2, 36%, 55%)
  • rgb(183, 103, 99)
  • #B76763
  • hsl(0, 100%, 10%)
  • rgb(51, 0, 0)
  • #330000

Title big size with words in bold

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

4.50026 63.28
  • hsl(1, 40%, 55%)
  • rgb(188, 100, 97)
  • #BC6461
  • hsl(0, 100%, 10%)
  • rgb(51, 0, 0)
  • #330000

Title big size with words in bold

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

4.50029 60.44
  • hsl(4, 47%, 55%)
  • rgb(195, 96, 88)
  • #C36058
  • hsl(0, 100%, 10%)
  • rgb(51, 0, 0)
  • #330000

Title big size with words in bold

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

4.50093 53.99
  • hsl(1, 50%, 56%)
  • rgb(200, 92, 90)
  • #C85C5A
  • hsl(0, 100%, 10%)
  • rgb(51, 0, 0)
  • #330000

Title big size with words in bold

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

4.50082 53.74
  • hsl(1, 53%, 57%)
  • rgb(204, 89, 87)
  • #CC5957
  • hsl(0, 100%, 10%)
  • rgb(51, 0, 0)
  • #330000

Title big size with words in bold

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

4.50055 52.03
  • hsl(4, 61%, 55%)
  • rgb(211, 84, 73)
  • #D35449
  • hsl(0, 100%, 10%)
  • rgb(51, 0, 0)
  • #330000

Title big size with words in bold

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

4.5006 48.7
  • hsl(2, 64%, 56%)
  • rgb(216, 79, 73)
  • #D84F49
  • hsl(0, 100%, 10%)
  • rgb(51, 0, 0)
  • #330000

Title big size with words in bold

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

4.50084 50.65
  • hsl(2, 65%, 56%)
  • rgb(217, 78, 72)
  • #D94E48
  • hsl(0, 100%, 10%)
  • rgb(51, 0, 0)
  • #330000

Title big size with words in bold

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

4.50022 51.01
  • hsl(2, 66%, 56%)
  • rgb(218, 77, 71)
  • #DA4D47
  • hsl(0, 100%, 10%)
  • rgb(51, 0, 0)
  • #330000

Title big size with words in bold

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

4.50017 51.45
  • hsl(2, 67%, 56%)
  • rgb(219, 76, 70)
  • #DB4C46
  • hsl(0, 100%, 10%)
  • rgb(51, 0, 0)
  • #330000

Title big size with words in bold

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

4.5007 51.94
  • hsl(3, 71%, 55%)
  • rgb(223, 72, 62)
  • #DF483E
  • hsl(0, 100%, 10%)
  • rgb(51, 0, 0)
  • #330000

Title big size with words in bold

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

4.50059 54.23
  • hsl(0, 71%, 57%)
  • rgb(224, 70, 70)
  • #E04646
  • hsl(0, 100%, 10%)
  • rgb(51, 0, 0)
  • #330000

Title big size with words in bold

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

4.50047 55.52
  • hsl(4, 72%, 55%)
  • rgb(224, 71, 59)
  • #E0473B
  • hsl(0, 100%, 10%)
  • rgb(51, 0, 0)
  • #330000

Title big size with words in bold

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

4.50042 54.96
  • hsl(0, 72%, 57%)
  • rgb(225, 69, 67)
  • #E14543
  • hsl(0, 100%, 10%)
  • rgb(51, 0, 0)
  • #330000

Title big size with words in bold

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

4.50033 56.07
  • hsl(2, 74%, 56%)
  • rgb(227, 67, 60)
  • #E3433C
  • hsl(0, 100%, 10%)
  • rgb(51, 0, 0)
  • #330000

Title big size with words in bold

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

4.50076 57.49
  • hsl(0, 76%, 57%)
  • rgb(229, 64, 62)
  • #E5403E
  • hsl(0, 100%, 10%)
  • rgb(51, 0, 0)
  • #330000

Title big size with words in bold

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

4.50096 59.34
  • hsl(0, 81%, 56%)
  • rgb(235, 55, 55)
  • #EB3737
  • hsl(0, 100%, 10%)
  • rgb(51, 0, 0)
  • #330000

Title big size with words in bold

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

4.50057 65.01
  • hsl(3, 82%, 54%)
  • rgb(235, 56, 44)
  • #EB382C
  • hsl(0, 100%, 10%)
  • rgb(51, 0, 0)
  • #330000

Title big size with words in bold

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

4.50092 64.98
  • hsl(2, 83%, 55%)
  • rgb(236, 54, 46)
  • #EC362E
  • hsl(0, 100%, 10%)
  • rgb(51, 0, 0)
  • #330000

Title big size with words in bold

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

4.50023 65.99
  • hsl(0, 84%, 56%)
  • rgb(238, 50, 48)
  • #EE3230
  • hsl(0, 100%, 10%)
  • rgb(51, 0, 0)
  • #330000

Title big size with words in bold

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

4.50081 68.0
  • hsl(4, 86%, 53%)
  • rgb(239, 49, 35)
  • #EF3123
  • hsl(0, 100%, 10%)
  • rgb(51, 0, 0)
  • #330000

Title big size with words in bold

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

4.50027 68.71
  • hsl(0, 85%, 56%)
  • rgb(239, 48, 47)
  • #EF302F
  • hsl(0, 100%, 10%)
  • rgb(51, 0, 0)
  • #330000

Title big size with words in bold

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

4.50048 68.99
  • hsl(4, 87%, 53%)
  • rgb(240, 47, 33)
  • #F02F21
  • hsl(0, 100%, 10%)
  • rgb(51, 0, 0)
  • #330000

Title big size with words in bold

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

4.50017 69.6
  • hsl(0, 86%, 55%)
  • rgb(240, 46, 45)
  • #F02E2D
  • hsl(0, 100%, 10%)
  • rgb(51, 0, 0)
  • #330000

Title big size with words in bold

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

4.50028 69.98
  • hsl(4, 88%, 53%)
  • rgb(241, 45, 30)
  • #F12D1E
  • hsl(0, 100%, 10%)
  • rgb(51, 0, 0)
  • #330000

Title big size with words in bold

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

4.50073 70.37
  • hsl(0, 87%, 55%)
  • rgb(241, 44, 42)
  • #F12C2A
  • hsl(0, 100%, 10%)
  • rgb(51, 0, 0)
  • #330000

Title big size with words in bold

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

4.50038 70.93
  • hsl(2, 89%, 53%)
  • rgb(243, 40, 31)
  • #F3281F
  • hsl(0, 100%, 10%)
  • rgb(51, 0, 0)
  • #330000

Title big size with words in bold

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

4.50071 72.41
  • hsl(4, 91%, 51%)
  • rgb(244, 38, 20)
  • #F42614
  • hsl(0, 100%, 10%)
  • rgb(51, 0, 0)
  • #330000

Title big size with words in bold

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

4.50047 72.0
  • hsl(0, 90%, 54%)
  • rgb(244, 37, 34)
  • #F42522
  • hsl(0, 100%, 10%)
  • rgb(51, 0, 0)
  • #330000

Title big size with words in bold

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

4.50081 73.53
  • hsl(3, 91%, 52%)
  • rgb(245, 35, 22)
  • #F52316
  • hsl(0, 100%, 10%)
  • rgb(51, 0, 0)
  • #330000

Title big size with words in bold

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

4.50094 73.27
  • hsl(3, 91%, 52%)
  • rgb(245, 35, 21)
  • #F52315
  • hsl(0, 100%, 10%)
  • rgb(51, 0, 0)
  • #330000

Title big size with words in bold

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

4.50027 73.11
  • hsl(0, 91%, 54%)
  • rgb(245, 34, 34)
  • #F52222
  • hsl(0, 100%, 10%)
  • rgb(51, 0, 0)
  • #330000

Title big size with words in bold

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

4.50086 74.41
  • hsl(3, 92%, 51%)
  • rgb(246, 32, 18)
  • #F62012
  • hsl(0, 100%, 10%)
  • rgb(51, 0, 0)
  • #330000

Title big size with words in bold

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

4.50042 73.45
  • hsl(0, 92%, 54%)
  • rgb(246, 31, 31)
  • #F61F1F
  • hsl(0, 100%, 10%)
  • rgb(51, 0, 0)
  • #330000

Title big size with words in bold

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

4.50081 75.07
  • hsl(1, 93%, 53%)
  • rgb(247, 28, 24)
  • #F71C18
  • hsl(0, 100%, 10%)
  • rgb(51, 0, 0)
  • #330000

Title big size with words in bold

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

4.50061 75.17
  • hsl(4, 94%, 50%)
  • rgb(248, 25, 9)
  • #F81909
  • hsl(0, 100%, 10%)
  • rgb(51, 0, 0)
  • #330000

Title big size with words in bold

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

4.50076 72.61
  • hsl(4, 94%, 50%)
  • rgb(248, 25, 8)
  • #F81908
  • hsl(0, 100%, 10%)
  • rgb(51, 0, 0)
  • #330000

Title big size with words in bold

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

4.50037 72.27
  • hsl(0, 94%, 53%)
  • rgb(248, 24, 23)
  • #F81817
  • hsl(0, 100%, 10%)
  • rgb(51, 0, 0)
  • #330000

Title big size with words in bold

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

4.50078 75.65
  • hsl(0, 94%, 52%)
  • rgb(248, 24, 22)
  • #F81816
  • hsl(0, 100%, 10%)
  • rgb(51, 0, 0)
  • #330000

Title big size with words in bold

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

4.50009 75.51
  • hsl(1, 95%, 51%)
  • rgb(249, 20, 14)
  • #F9140E
  • hsl(0, 100%, 10%)
  • rgb(51, 0, 0)
  • #330000

Title big size with words in bold

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

4.50081 74.45
  • hsl(1, 95%, 51%)
  • rgb(249, 20, 13)
  • #F9140D
  • hsl(0, 100%, 10%)
  • rgb(51, 0, 0)
  • #330000

Title big size with words in bold

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

4.50035 74.19
  • hsl(2, 97%, 49%)
  • rgb(250, 15, 3)
  • #FA0F03
  • hsl(0, 100%, 10%)
  • rgb(51, 0, 0)
  • #330000

Title big size with words in bold

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

4.50089 70.79
  • hsl(3, 98%, 49%)
  • rgb(250, 15, 2)
  • #FA0F02
  • hsl(0, 100%, 10%)
  • rgb(51, 0, 0)
  • #330000

Title big size with words in bold

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

4.50051 70.32
  • hsl(3, 99%, 49%)
  • rgb(250, 15, 1)
  • #FA0F01
  • hsl(0, 100%, 10%)
  • rgb(51, 0, 0)
  • #330000

Title big size with words in bold

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

4.50012 69.82
  • hsl(0, 95%, 51%)
  • rgb(250, 14, 14)
  • #FA0E0E
  • hsl(0, 100%, 10%)
  • rgb(51, 0, 0)
  • #330000

Title big size with words in bold

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

4.50046 74.33
Not satisfied ?
Gimme a range of colors