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(26, 97%, 43%)
  • rgb(218, 99, 3)
  • #DA6303
  • 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.64132

New contrast : 37 results (752,640 colors tested)

Valid contrasts
Foreground Background Sample Ratio Distance
  • hsl(21, 88%, 41%)
  • rgb(201, 81, 12)
  • #C9510C
  • 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.50085 21.56
  • hsl(23, 93%, 40%)
  • rgb(200, 82, 7)
  • #C85207
  • 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.50078 22.02
  • hsl(23, 92%, 40%)
  • rgb(200, 82, 8)
  • #C85208
  • 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.50036 21.98
  • hsl(24, 98%, 39%)
  • rgb(199, 83, 2)
  • #C75302
  • 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.50006 22.21
  • hsl(24, 98%, 39%)
  • rgb(199, 83, 1)
  • #C75301
  • 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.50049 22.21
  • hsl(23, 83%, 41%)
  • rgb(194, 87, 18)
  • #C25712
  • 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.50076 23.01
  • hsl(23, 82%, 41%)
  • rgb(194, 87, 19)
  • #C25713
  • 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.50011 22.54
  • hsl(26, 93%, 39%)
  • rgb(193, 88, 6)
  • #C15806
  • 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.50063 25.68
  • hsl(26, 93%, 39%)
  • rgb(193, 88, 7)
  • #C15807
  • 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.50021 25.66
  • hsl(23, 76%, 42%)
  • rgb(190, 90, 25)
  • #BE5A19
  • 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.50071 22.92
  • hsl(26, 87%, 39%)
  • rgb(189, 91, 13)
  • #BD5B0D
  • 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.50063 28.81
  • hsl(26, 86%, 39%)
  • rgb(189, 91, 14)
  • #BD5B0E
  • 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.50012 28.67
  • hsl(22, 70%, 43%)
  • rgb(187, 92, 33)
  • #BB5C21
  • 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.50086 14.63
  • hsl(25, 77%, 40%)
  • rgb(186, 93, 23)
  • #BA5D17
  • 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.50071 29.23
  • hsl(29, 95%, 37%)
  • rgb(185, 94, 4)
  • #B95E04
  • 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.50094 33.04
  • hsl(29, 94%, 37%)
  • rgb(185, 94, 5)
  • #B95E05
  • 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.50052 33.04
  • hsl(29, 93%, 37%)
  • rgb(185, 94, 6)
  • #B95E06
  • 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.50009 33.03
  • hsl(23, 66%, 43%)
  • rgb(184, 94, 37)
  • #B85E25
  • 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.50077 5.0
  • hsl(26, 74%, 41%)
  • rgb(183, 95, 27)
  • #B75F1B
  • 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.50048 30.76
  • hsl(30, 91%, 37%)
  • rgb(182, 96, 8)
  • #B66008
  • 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.50096 35.97
  • hsl(30, 90%, 37%)
  • rgb(182, 96, 9)
  • #B66009
  • 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.50054 35.95
  • hsl(30, 89%, 37%)
  • rgb(182, 96, 10)
  • #B6600A
  • 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.50011 35.92
  • hsl(24, 65%, 42%)
  • rgb(181, 96, 38)
  • #B56026
  • 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.50075 19.84
  • hsl(27, 73%, 40%)
  • rgb(180, 97, 27)
  • #B4611B
  • 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.50029 34.5
  • hsl(23, 59%, 44%)
  • rgb(179, 97, 46)
  • #B3612E
  • 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.50058 27.23
  • hsl(22, 54%, 44%)
  • rgb(177, 98, 52)
  • #B16234
  • 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.50056 36.52
  • hsl(28, 69%, 40%)
  • rgb(175, 100, 32)
  • #AF6420
  • 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.50014 38.06
  • hsl(27, 63%, 41%)
  • rgb(173, 101, 38)
  • #AD6526
  • 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.50035 36.4
  • hsl(31, 71%, 38%)
  • rgb(170, 103, 28)
  • #AA671C
  • 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.50057 45.61
  • hsl(27, 57%, 42%)
  • rgb(169, 103, 46)
  • #A9672E
  • 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.50011 33.64
  • hsl(24, 48%, 44%)
  • rgb(168, 103, 58)
  • #A8673A
  • 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.50049 34.6
  • hsl(31, 68%, 39%)
  • rgb(168, 104, 32)
  • #A86820
  • 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.50069 46.49
  • hsl(28, 55%, 42%)
  • rgb(167, 104, 48)
  • #A76830
  • 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.50074 34.59
  • hsl(28, 53%, 42%)
  • rgb(165, 105, 50)
  • #A56932
  • 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.50011 35.53
  • hsl(25, 45%, 44%)
  • rgb(164, 105, 61)
  • #A4693D
  • 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.50014 33.58
  • hsl(30, 51%, 41%)
  • rgb(161, 107, 51)
  • #A16B33
  • 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.50036 42.0
  • hsl(29, 44%, 42%)
  • rgb(158, 108, 61)
  • #9E6C3D
  • 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.50042 27.22
Not satisfied ?
Gimme a range of colors