Tanaguru Contrast-Finder

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. Red : Green : Blue : The color should be between #000000 and #FFFFFF Hexadecimal :

Background Color : invalid color For each color (red, green and blue), enter a number between 0 et 255. Red : Green : Blue : The color should be between #000000 and #FFFFFF Hexadecimal :

Minimum ratio :

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 :

Edit the foreground color Edit the background color

Gimme :

valid colors and very close to initial color a range of valid colors

Old contrast

Invalid contrast
Foreground	Background	Sample	Ratio	Distance
hsl(13, 39%, 46%) rgb(165, 92, 71) #A55C47	hsl(240, 3%, 17%) rgb(42, 42, 45) #2A2A2D	Title big size with words in bold Here is some text sample with some words in bold to illustrate the contrast.	2.87675

New contrast : 87 results (1,786,080 colors tested)

Valid contrasts
Foreground	Background	Sample	Ratio	Distance
hsl(16, 39%, 46%) rgb(165, 97, 72) #A56148	hsl(240, 3%, 17%) rgb(42, 42, 45) #2A2A2D	Title big size with words in bold Here is some text sample with some words in bold to illustrate the contrast.	3.00051	5.01
hsl(16, 37%, 46%) rgb(163, 98, 74) #A3624A	hsl(240, 3%, 17%) rgb(42, 42, 45) #2A2A2D	Title big size with words in bold Here is some text sample with some words in bold to illustrate the contrast.	3.00047	6.17
hsl(8, 28%, 48%) rgb(159, 99, 89) #9F6359	hsl(240, 3%, 17%) rgb(42, 42, 45) #2A2A2D	Title big size with words in bold Here is some text sample with some words in bold to illustrate the contrast.	3.00041	18.13
hsl(14, 30%, 47%) rgb(156, 101, 84) #9C6554	hsl(240, 3%, 17%) rgb(42, 42, 45) #2A2A2D	Title big size with words in bold Here is some text sample with some words in bold to illustrate the contrast.	3.00034	13.0
hsl(10, 26%, 48%) rgb(155, 101, 90) #9B655A	hsl(240, 3%, 17%) rgb(42, 42, 45) #2A2A2D	Title big size with words in bold Here is some text sample with some words in bold to illustrate the contrast.	3.00017	18.75
hsl(11, 25%, 47%) rgb(153, 102, 90) #99665A	hsl(240, 3%, 17%) rgb(42, 42, 45) #2A2A2D	Title big size with words in bold Here is some text sample with some words in bold to illustrate the contrast.	3.00005	18.3
hsl(16, 28%, 46%) rgb(152, 103, 84) #986754	hsl(240, 3%, 17%) rgb(42, 42, 45) #2A2A2D	Title big size with words in bold Here is some text sample with some words in bold to illustrate the contrast.	3.00042	11.0
hsl(12, 25%, 47%) rgb(151, 103, 90) #97675A	hsl(240, 3%, 17%) rgb(42, 42, 45) #2A2A2D	Title big size with words in bold Here is some text sample with some words in bold to illustrate the contrast.	3.00069	17.59
hsl(15, 12%, 45%) rgb(132, 110, 102) #846E66	hsl(240, 3%, 17%) rgb(42, 42, 45) #2A2A2D	Title big size with words in bold Here is some text sample with some words in bold to illustrate the contrast.	3.00052	6.8
hsl(9, 10%, 46%) rgb(131, 110, 106) #836E6A	hsl(240, 3%, 17%) rgb(42, 42, 45) #2A2A2D	Title big size with words in bold Here is some text sample with some words in bold to illustrate the contrast.	3.00066	21.11
hsl(11, 8%, 46%) rgb(128, 111, 107) #806F6B	hsl(240, 3%, 17%) rgb(42, 42, 45) #2A2A2D	Title big size with words in bold Here is some text sample with some words in bold to illustrate the contrast.	3.00092	14.2
hsl(12, 38%, 47%) rgb(168, 95, 75) #A85F4B	hsl(240, 3%, 17%) rgb(42, 42, 45) #2A2A2D	Title big size with words in bold Here is some text sample with some words in bold to illustrate the contrast.	3.00059	4.9
hsl(9, 35%, 48%) rgb(169, 94, 80) #A95E50	hsl(240, 3%, 17%) rgb(42, 42, 45) #2A2A2D	Title big size with words in bold Here is some text sample with some words in bold to illustrate the contrast.	3.00092	9.29
hsl(13, 40%, 47%) rgb(170, 94, 72) #AA5E48	hsl(240, 3%, 17%) rgb(42, 42, 45) #2A2A2D	Title big size with words in bold Here is some text sample with some words in bold to illustrate the contrast.	3.00088	5.12
hsl(14, 43%, 47%) rgb(172, 93, 68) #AC5D44	hsl(240, 3%, 17%) rgb(42, 42, 45) #2A2A2D	Title big size with words in bold Here is some text sample with some words in bold to illustrate the contrast.	3.00052	6.82
hsl(18, 49%, 45%) rgb(173, 93, 58) #AD5D3A	hsl(240, 3%, 17%) rgb(42, 42, 45) #2A2A2D	Title big size with words in bold Here is some text sample with some words in bold to illustrate the contrast.	3.00075	11.9
hsl(8, 38%, 49%) rgb(174, 91, 77) #AE5B4D	hsl(240, 3%, 17%) rgb(42, 42, 45) #2A2A2D	Title big size with words in bold Here is some text sample with some words in bold to illustrate the contrast.	3.00051	9.81
hsl(12, 44%, 47%) rgb(175, 91, 68) #AF5B44	hsl(240, 3%, 17%) rgb(42, 42, 45) #2A2A2D	Title big size with words in bold Here is some text sample with some words in bold to illustrate the contrast.	3.00008	9.91
hsl(16, 50%, 45%) rgb(176, 91, 58) #B05B3A	hsl(240, 3%, 17%) rgb(42, 42, 45) #2A2A2D	Title big size with words in bold Here is some text sample with some words in bold to illustrate the contrast.	3.00066	9.54
hsl(14, 47%, 47%) rgb(177, 90, 63) #B15A3F	hsl(240, 3%, 17%) rgb(42, 42, 45) #2A2A2D	Title big size with words in bold Here is some text sample with some words in bold to illustrate the contrast.	3.00074	10.65
hsl(11, 45%, 48%) rgb(178, 89, 67) #B25943	hsl(240, 3%, 17%) rgb(42, 42, 45) #2A2A2D	Title big size with words in bold Here is some text sample with some words in bold to illustrate the contrast.	3.00028	12.82
hsl(16, 52%, 46%) rgb(179, 89, 56) #B35938	hsl(240, 3%, 17%) rgb(42, 42, 45) #2A2A2D	Title big size with words in bold Here is some text sample with some words in bold to illustrate the contrast.	3.00015	8.7
hsl(9, 43%, 49%) rgb(179, 88, 71) #B35847	hsl(240, 3%, 17%) rgb(42, 42, 45) #2A2A2D	Title big size with words in bold Here is some text sample with some words in bold to illustrate the contrast.	3.00071	13.89
hsl(13, 49%, 47%) rgb(180, 88, 61) #B4583D	hsl(240, 3%, 17%) rgb(42, 42, 45) #2A2A2D	Title big size with words in bold Here is some text sample with some words in bold to illustrate the contrast.	3.00092	13.22
hsl(18, 58%, 44%) rgb(181, 88, 48) #B55830	hsl(240, 3%, 17%) rgb(42, 42, 45) #2A2A2D	Title big size with words in bold Here is some text sample with some words in bold to illustrate the contrast.	3.00051	20.11
hsl(15, 54%, 46%) rgb(182, 87, 53) #B65735	hsl(240, 3%, 17%) rgb(42, 42, 45) #2A2A2D	Title big size with words in bold Here is some text sample with some words in bold to illustrate the contrast.	3.00077	10.14
hsl(9, 45%, 49%) rgb(182, 86, 68) #B65644	hsl(240, 3%, 17%) rgb(42, 42, 45) #2A2A2D	Title big size with words in bold Here is some text sample with some words in bold to illustrate the contrast.	3.0007	16.71
hsl(13, 52%, 47%) rgb(183, 86, 57) #B75639	hsl(240, 3%, 17%) rgb(42, 42, 45) #2A2A2D	Title big size with words in bold Here is some text sample with some words in bold to illustrate the contrast.	3.00073	14.21
hsl(12, 50%, 47%) rgb(184, 85, 60) #B8553C	hsl(240, 3%, 17%) rgb(42, 42, 45) #2A2A2D	Title big size with words in bold Here is some text sample with some words in bold to illustrate the contrast.	3.0001	17.31
hsl(16, 59%, 45%) rgb(185, 85, 47) #B9552F	hsl(240, 3%, 17%) rgb(42, 42, 45) #2A2A2D	Title big size with words in bold Here is some text sample with some words in bold to illustrate the contrast.	3.00049	18.34
hsl(10, 49%, 48%) rgb(185, 84, 63) #B9543F	hsl(240, 3%, 17%) rgb(42, 42, 45) #2A2A2D	Title big size with words in bold Here is some text sample with some words in bold to illustrate the contrast.	3.00013	19.11
hsl(14, 56%, 46%) rgb(186, 84, 51) #BA5433	hsl(240, 3%, 17%) rgb(42, 42, 45) #2A2A2D	Title big size with words in bold Here is some text sample with some words in bold to illustrate the contrast.	3.0008	9.08
hsl(8, 47%, 49%) rgb(186, 83, 66) #BA5342	hsl(240, 3%, 17%) rgb(42, 42, 45) #2A2A2D	Title big size with words in bold Here is some text sample with some words in bold to illustrate the contrast.	3.00083	20.33
hsl(13, 55%, 47%) rgb(187, 83, 54) #BB5336	hsl(240, 3%, 17%) rgb(42, 42, 45) #2A2A2D	Title big size with words in bold Here is some text sample with some words in bold to illustrate the contrast.	3.00065	17.11
hsl(18, 66%, 44%) rgb(188, 83, 38) #BC5326	hsl(240, 3%, 17%) rgb(42, 42, 45) #2A2A2D	Title big size with words in bold Here is some text sample with some words in bold to illustrate the contrast.	3.00067	29.04
hsl(16, 64%, 45%) rgb(189, 82, 41) #BD5229	hsl(240, 3%, 17%) rgb(42, 42, 45) #2A2A2D	Title big size with words in bold Here is some text sample with some words in bold to illustrate the contrast.	3.00008	24.2
hsl(10, 52%, 48%) rgb(189, 81, 59) #BD513B	hsl(240, 3%, 17%) rgb(42, 42, 45) #2A2A2D	Title big size with words in bold Here is some text sample with some words in bold to illustrate the contrast.	3.00089	22.08
hsl(15, 62%, 45%) rgb(190, 81, 44) #BE512C	hsl(240, 3%, 17%) rgb(42, 42, 45) #2A2A2D	Title big size with words in bold Here is some text sample with some words in bold to illustrate the contrast.	3.00013	17.53
hsl(13, 60%, 46%) rgb(191, 80, 47) #BF502F	hsl(240, 3%, 17%) rgb(42, 42, 45) #2A2A2D	Title big size with words in bold Here is some text sample with some words in bold to illustrate the contrast.	3.00082	12.65
hsl(12, 59%, 47%) rgb(192, 79, 49) #C04F31	hsl(240, 3%, 17%) rgb(42, 42, 45) #2A2A2D	Title big size with words in bold Here is some text sample with some words in bold to illustrate the contrast.	3.00099	18.98
hsl(18, 73%, 43%) rgb(193, 79, 29) #C14F1D	hsl(240, 3%, 17%) rgb(42, 42, 45) #2A2A2D	Title big size with words in bold Here is some text sample with some words in bold to illustrate the contrast.	3.00071	37.88
hsl(11, 58%, 47%) rgb(193, 78, 50) #C14E32	hsl(240, 3%, 17%) rgb(42, 42, 45) #2A2A2D	Title big size with words in bold Here is some text sample with some words in bold to illustrate the contrast.	3.00049	21.51
hsl(17, 72%, 44%) rgb(194, 78, 31) #C24E1F	hsl(240, 3%, 17%) rgb(42, 42, 45) #2A2A2D	Title big size with words in bold Here is some text sample with some words in bold to illustrate the contrast.	3.00057	34.86
hsl(10, 58%, 48%) rgb(194, 77, 51) #C24D33	hsl(240, 3%, 17%) rgb(42, 42, 45) #2A2A2D	Title big size with words in bold Here is some text sample with some words in bold to illustrate the contrast.	3.00044	23.52
hsl(16, 71%, 44%) rgb(195, 77, 33) #C34D21	hsl(240, 3%, 17%) rgb(42, 42, 45) #2A2A2D	Title big size with words in bold Here is some text sample with some words in bold to illustrate the contrast.	3.00092	31.5
hsl(16, 71%, 44%) rgb(195, 77, 32) #C34D20	hsl(240, 3%, 17%) rgb(42, 42, 45) #2A2A2D	Title big size with words in bold Here is some text sample with some words in bold to illustrate the contrast.	3.00017	32.93
hsl(10, 57%, 48%) rgb(195, 76, 52) #C34C34	hsl(240, 3%, 17%) rgb(42, 42, 45) #2A2A2D	Title big size with words in bold Here is some text sample with some words in bold to illustrate the contrast.	3.00082	25.22
hsl(15, 70%, 45%) rgb(196, 76, 34) #C44C22	hsl(240, 3%, 17%) rgb(42, 42, 45) #2A2A2D	Title big size with words in bold Here is some text sample with some words in bold to illustrate the contrast.	3.00099	29.22
hsl(15, 71%, 44%) rgb(196, 76, 33) #C44C21	hsl(240, 3%, 17%) rgb(42, 42, 45) #2A2A2D	Title big size with words in bold Here is some text sample with some words in bold to illustrate the contrast.	3.00021	30.79
hsl(9, 58%, 48%) rgb(196, 75, 52) #C44B34	hsl(240, 3%, 17%) rgb(42, 42, 45) #2A2A2D	Title big size with words in bold Here is some text sample with some words in bold to illustrate the contrast.	3.0004	26.22
hsl(15, 70%, 45%) rgb(197, 75, 34) #C54B22	hsl(240, 3%, 17%) rgb(42, 42, 45) #2A2A2D	Title big size with words in bold Here is some text sample with some words in bold to illustrate the contrast.	3.00069	28.36
hsl(9, 58%, 48%) rgb(197, 74, 52) #C54A34	hsl(240, 3%, 17%) rgb(42, 42, 45) #2A2A2D	Title big size with words in bold Here is some text sample with some words in bold to illustrate the contrast.	3.0004	27.18
hsl(14, 70%, 45%) rgb(198, 74, 34) #C64A22	hsl(240, 3%, 17%) rgb(42, 42, 45) #2A2A2D	Title big size with words in bold Here is some text sample with some words in bold to illustrate the contrast.	3.00081	27.39
hsl(14, 71%, 45%) rgb(198, 74, 33) #C64A21	hsl(240, 3%, 17%) rgb(42, 42, 45) #2A2A2D	Title big size with words in bold Here is some text sample with some words in bold to illustrate the contrast.	3.00003	29.15
hsl(8, 58%, 49%) rgb(198, 73, 52) #C64934	hsl(240, 3%, 17%) rgb(42, 42, 45) #2A2A2D	Title big size with words in bold Here is some text sample with some words in bold to illustrate the contrast.	3.0008	28.11
hsl(14, 71%, 45%) rgb(199, 73, 33) #C74921	hsl(240, 3%, 17%) rgb(42, 42, 45) #2A2A2D	Title big size with words in bold Here is some text sample with some words in bold to illustrate the contrast.	3.00056	28.2
hsl(8, 59%, 49%) rgb(199, 72, 51) #C74833	hsl(240, 3%, 17%) rgb(42, 42, 45) #2A2A2D	Title big size with words in bold Here is some text sample with some words in bold to illustrate the contrast.	3.0004	28.56
hsl(14, 72%, 45%) rgb(200, 72, 32) #C84820	hsl(240, 3%, 17%) rgb(42, 42, 45) #2A2A2D	Title big size with words in bold Here is some text sample with some words in bold to illustrate the contrast.	3.00075	29.02
hsl(14, 73%, 45%) rgb(200, 72, 31) #C8481F	hsl(240, 3%, 17%) rgb(42, 42, 45) #2A2A2D	Title big size with words in bold Here is some text sample with some words in bold to illustrate the contrast.	3.00002	30.77
hsl(14, 74%, 45%) rgb(201, 71, 30) #C9471E	hsl(240, 3%, 17%) rgb(42, 42, 45) #2A2A2D	Title big size with words in bold Here is some text sample with some words in bold to illustrate the contrast.	3.00066	31.59
hsl(14, 76%, 44%) rgb(202, 70, 27) #CA461B	hsl(240, 3%, 17%) rgb(42, 42, 45) #2A2A2D	Title big size with words in bold Here is some text sample with some words in bold to illustrate the contrast.	3.00042	35.62
hsl(8, 62%, 48%) rgb(202, 69, 47) #CA452F	hsl(240, 3%, 17%) rgb(42, 42, 45) #2A2A2D	Title big size with words in bold Here is some text sample with some words in bold to illustrate the contrast.	3.0007	29.11
hsl(15, 78%, 44%) rgb(203, 69, 24) #CB4518	hsl(240, 3%, 17%) rgb(42, 42, 45) #2A2A2D	Title big size with words in bold Here is some text sample with some words in bold to illustrate the contrast.	3.00079	39.39
hsl(15, 79%, 44%) rgb(203, 69, 23) #CB4517	hsl(240, 3%, 17%) rgb(42, 42, 45) #2A2A2D	Title big size with words in bold Here is some text sample with some words in bold to illustrate the contrast.	3.00023	40.79
hsl(15, 82%, 43%) rgb(204, 68, 19) #CC4413	hsl(240, 3%, 17%) rgb(42, 42, 45) #2A2A2D	Title big size with words in bold Here is some text sample with some words in bold to illustrate the contrast.	3.00078	45.65
hsl(16, 83%, 43%) rgb(204, 68, 18) #CC4412	hsl(240, 3%, 17%) rgb(42, 42, 45) #2A2A2D	Title big size with words in bold Here is some text sample with some words in bold to illustrate the contrast.	3.00033	46.93
hsl(9, 65%, 48%) rgb(204, 67, 42) #CC432A	hsl(240, 3%, 17%) rgb(42, 42, 45) #2A2A2D	Title big size with words in bold Here is some text sample with some words in bold to illustrate the contrast.	3.00081	26.83
hsl(17, 88%, 42%) rgb(205, 67, 12) #CD430C	hsl(240, 3%, 17%) rgb(42, 42, 45) #2A2A2D	Title big size with words in bold Here is some text sample with some words in bold to illustrate the contrast.	3.00097	53.95
hsl(17, 89%, 42%) rgb(205, 67, 11) #CD430B	hsl(240, 3%, 17%) rgb(42, 42, 45) #2A2A2D	Title big size with words in bold Here is some text sample with some words in bold to illustrate the contrast.	3.00064	55.14
hsl(10, 68%, 47%) rgb(205, 66, 38) #CD4226	hsl(240, 3%, 17%) rgb(42, 42, 45) #2A2A2D	Title big size with words in bold Here is some text sample with some words in bold to illustrate the contrast.	3.00036	21.89
hsl(10, 71%, 47%) rgb(206, 65, 34) #CE4122	hsl(240, 3%, 17%) rgb(42, 42, 45) #2A2A2D	Title big size with words in bold Here is some text sample with some words in bold to illustrate the contrast.	3.00068	11.23
hsl(12, 76%, 46%) rgb(207, 64, 28) #CF401C	hsl(240, 3%, 17%) rgb(42, 42, 45) #2A2A2D	Title big size with words in bold Here is some text sample with some words in bold to illustrate the contrast.	3.00043	30.14
hsl(13, 81%, 44%) rgb(208, 63, 21) #D03F15	hsl(240, 3%, 17%) rgb(42, 42, 45) #2A2A2D	Title big size with words in bold Here is some text sample with some words in bold to illustrate the contrast.	3.00084	41.19
hsl(13, 82%, 44%) rgb(208, 63, 20) #D03F14	hsl(240, 3%, 17%) rgb(42, 42, 45) #2A2A2D	Title big size with words in bold Here is some text sample with some words in bold to illustrate the contrast.	3.00034	42.64
hsl(8, 70%, 48%) rgb(209, 61, 36) #D13D24	hsl(240, 3%, 17%) rgb(42, 42, 45) #2A2A2D	Title big size with words in bold Here is some text sample with some words in bold to illustrate the contrast.	3.00099	23.22
hsl(8, 71%, 47%) rgb(209, 61, 35) #D13D23	hsl(240, 3%, 17%) rgb(42, 42, 45) #2A2A2D	Title big size with words in bold Here is some text sample with some words in bold to illustrate the contrast.	3.00017	20.6
hsl(10, 76%, 46%) rgb(210, 60, 28) #D23C1C	hsl(240, 3%, 17%) rgb(42, 42, 45) #2A2A2D	Title big size with words in bold Here is some text sample with some words in bold to illustrate the contrast.	3.00059	27.65
hsl(12, 85%, 44%) rgb(211, 59, 17) #D33B11	hsl(240, 3%, 17%) rgb(42, 42, 45) #2A2A2D	Title big size with words in bold Here is some text sample with some words in bold to illustrate the contrast.	3.0006	45.8
hsl(13, 85%, 44%) rgb(211, 59, 16) #D33B10	hsl(240, 3%, 17%) rgb(42, 42, 45) #2A2A2D	Title big size with words in bold Here is some text sample with some words in bold to illustrate the contrast.	3.00018	47.17
hsl(8, 75%, 47%) rgb(212, 57, 30) #D4391E	hsl(240, 3%, 17%) rgb(42, 42, 45) #2A2A2D	Title big size with words in bold Here is some text sample with some words in bold to illustrate the contrast.	3.00057	19.98
hsl(11, 84%, 45%) rgb(213, 56, 18) #D53812	hsl(240, 3%, 17%) rgb(42, 42, 45) #2A2A2D	Title big size with words in bold Here is some text sample with some words in bold to illustrate the contrast.	3.00072	43.96
hsl(11, 85%, 45%) rgb(213, 56, 17) #D53811	hsl(240, 3%, 17%) rgb(42, 42, 45) #2A2A2D	Title big size with words in bold Here is some text sample with some words in bold to illustrate the contrast.	3.00028	45.39
hsl(8, 77%, 47%) rgb(214, 54, 27) #D6361B	hsl(240, 3%, 17%) rgb(42, 42, 45) #2A2A2D	Title big size with words in bold Here is some text sample with some words in bold to illustrate the contrast.	3.0001	28.19
hsl(12, 89%, 44%) rgb(215, 53, 12) #D7350C	hsl(240, 3%, 17%) rgb(42, 42, 45) #2A2A2D	Title big size with words in bold Here is some text sample with some words in bold to illustrate the contrast.	3.00094	51.89
hsl(12, 90%, 44%) rgb(215, 53, 11) #D7350B	hsl(240, 3%, 17%) rgb(42, 42, 45) #2A2A2D	Title big size with words in bold Here is some text sample with some words in bold to illustrate the contrast.	3.00062	53.17
hsl(9, 83%, 46%) rgb(216, 51, 20) #D83314	hsl(240, 3%, 17%) rgb(42, 42, 45) #2A2A2D	Title big size with words in bold Here is some text sample with some words in bold to illustrate the contrast.	3.00057	41.0
hsl(9, 83%, 46%) rgb(216, 51, 19) #D83313	hsl(240, 3%, 17%) rgb(42, 42, 45) #2A2A2D	Title big size with words in bold Here is some text sample with some words in bold to illustrate the contrast.	3.0001	42.52

Not satisfied ?

Gimme a range of colors

tanaguru contrast finder

Find me the good constrasts, for web accessibility, between these two colors:

Old contrast

New contrast : 87 results (1,786,080 colors tested)

Products

Follow us

Language: