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(19, 83%, 53%) rgb(235, 102, 38) #EB6626	hsl(0, 0%, 96%) rgb(245, 245, 245) #F5F5F5	Title big size with words in bold Here is some text sample with some words in bold to illustrate the contrast.	2.98128

New contrast : 59 results (1,923,040 colors tested)

Valid contrasts
Foreground	Background	Sample	Ratio	Distance
hsl(14, 98%, 41%) rgb(211, 53, 2) #D33502	hsl(0, 0%, 96%) rgb(245, 245, 245) #F5F5F5	Title big size with words in bold Here is some text sample with some words in bold to illustrate the contrast.	4.50057	56.27
hsl(14, 93%, 42%) rgb(209, 56, 7) #D13807	hsl(0, 0%, 96%) rgb(245, 245, 245) #F5F5F5	Title big size with words in bold Here is some text sample with some words in bold to illustrate the contrast.	4.50067	52.5
hsl(16, 96%, 41%) rgb(207, 59, 4) #CF3B04	hsl(0, 0%, 96%) rgb(245, 245, 245) #F5F5F5	Title big size with words in bold Here is some text sample with some words in bold to illustrate the contrast.	4.50002	52.02
hsl(16, 97%, 41%) rgb(207, 59, 3) #CF3B03	hsl(0, 0%, 96%) rgb(245, 245, 245) #F5F5F5	Title big size with words in bold Here is some text sample with some words in bold to illustrate the contrast.	4.50048	52.46
hsl(16, 98%, 40%) rgb(207, 59, 2) #CF3B02	hsl(0, 0%, 96%) rgb(245, 245, 245) #F5F5F5	Title big size with words in bold Here is some text sample with some words in bold to illustrate the contrast.	4.50094	52.91
hsl(17, 96%, 40%) rgb(204, 63, 4) #CC3F04	hsl(0, 0%, 96%) rgb(245, 245, 245) #F5F5F5	Title big size with words in bold Here is some text sample with some words in bold to illustrate the contrast.	4.50022	50.45
hsl(17, 97%, 40%) rgb(204, 63, 3) #CC3F03	hsl(0, 0%, 96%) rgb(245, 245, 245) #F5F5F5	Title big size with words in bold Here is some text sample with some words in bold to illustrate the contrast.	4.50068	50.91
hsl(15, 85%, 42%) rgb(203, 64, 16) #CB4010	hsl(0, 0%, 96%) rgb(245, 245, 245) #F5F5F5	Title big size with words in bold Here is some text sample with some words in bold to illustrate the contrast.	4.50031	46.15
hsl(15, 86%, 42%) rgb(203, 64, 15) #CB400F	hsl(0, 0%, 96%) rgb(245, 245, 245) #F5F5F5	Title big size with words in bold Here is some text sample with some words in bold to illustrate the contrast.	4.50093	46.39
hsl(20, 98%, 39%) rgb(199, 69, 1) #C74501	hsl(0, 0%, 96%) rgb(245, 245, 245) #F5F5F5	Title big size with words in bold Here is some text sample with some words in bold to illustrate the contrast.	4.50035	51.08
hsl(19, 93%, 40%) rgb(198, 70, 7) #C64607	hsl(0, 0%, 96%) rgb(245, 245, 245) #F5F5F5	Title big size with words in bold Here is some text sample with some words in bold to illustrate the contrast.	4.50016	48.38
hsl(19, 94%, 39%) rgb(198, 70, 6) #C64606	hsl(0, 0%, 96%) rgb(245, 245, 245) #F5F5F5	Title big size with words in bold Here is some text sample with some words in bold to illustrate the contrast.	4.50062	48.8
hsl(19, 89%, 40%) rgb(197, 71, 11) #C5470B	hsl(0, 0%, 96%) rgb(245, 245, 245) #F5F5F5	Title big size with words in bold Here is some text sample with some words in bold to illustrate the contrast.	4.50026	47.08
hsl(19, 90%, 40%) rgb(197, 71, 10) #C5470A	hsl(0, 0%, 96%) rgb(245, 245, 245) #F5F5F5	Title big size with words in bold Here is some text sample with some words in bold to illustrate the contrast.	4.50073	47.42
hsl(19, 87%, 40%) rgb(196, 72, 13) #C4480D	hsl(0, 0%, 96%) rgb(245, 245, 245) #F5F5F5	Title big size with words in bold Here is some text sample with some words in bold to illustrate the contrast.	4.50056	46.71
hsl(19, 85%, 41%) rgb(195, 73, 15) #C3490F	hsl(0, 0%, 96%) rgb(245, 245, 245) #F5F5F5	Title big size with words in bold Here is some text sample with some words in bold to illustrate the contrast.	4.50011	46.5
hsl(19, 86%, 40%) rgb(195, 73, 14) #C3490E	hsl(0, 0%, 96%) rgb(245, 245, 245) #F5F5F5	Title big size with words in bold Here is some text sample with some words in bold to illustrate the contrast.	4.50069	46.76
hsl(19, 85%, 40%) rgb(194, 74, 15) #C24A0F	hsl(0, 0%, 96%) rgb(245, 245, 245) #F5F5F5	Title big size with words in bold Here is some text sample with some words in bold to illustrate the contrast.	4.50017	46.88
hsl(19, 86%, 40%) rgb(194, 74, 14) #C24A0E	hsl(0, 0%, 96%) rgb(245, 245, 245) #F5F5F5	Title big size with words in bold Here is some text sample with some words in bold to illustrate the contrast.	4.50076	47.13
hsl(20, 86%, 40%) rgb(193, 75, 14) #C14B0E	hsl(0, 0%, 96%) rgb(245, 245, 245) #F5F5F5	Title big size with words in bold Here is some text sample with some words in bold to illustrate the contrast.	4.50018	47.56
hsl(20, 87%, 40%) rgb(193, 75, 13) #C14B0D	hsl(0, 0%, 96%) rgb(245, 245, 245) #F5F5F5	Title big size with words in bold Here is some text sample with some words in bold to illustrate the contrast.	4.50074	47.83
hsl(21, 88%, 40%) rgb(192, 76, 12) #C04C0C	hsl(0, 0%, 96%) rgb(245, 245, 245) #F5F5F5	Title big size with words in bold Here is some text sample with some words in bold to illustrate the contrast.	4.50006	48.58
hsl(21, 89%, 39%) rgb(192, 76, 11) #C04C0B	hsl(0, 0%, 96%) rgb(245, 245, 245) #F5F5F5	Title big size with words in bold Here is some text sample with some words in bold to illustrate the contrast.	4.50056	48.88
hsl(22, 91%, 39%) rgb(191, 77, 8) #BF4D08	hsl(0, 0%, 96%) rgb(245, 245, 245) #F5F5F5	Title big size with words in bold Here is some text sample with some words in bold to illustrate the contrast.	4.50011	50.37
hsl(22, 92%, 38%) rgb(191, 77, 7) #BF4D07	hsl(0, 0%, 96%) rgb(245, 245, 245) #F5F5F5	Title big size with words in bold Here is some text sample with some words in bold to illustrate the contrast.	4.50057	50.74
hsl(24, 97%, 37%) rgb(190, 78, 2) #BE4E02	hsl(0, 0%, 96%) rgb(245, 245, 245) #F5F5F5	Title big size with words in bold Here is some text sample with some words in bold to illustrate the contrast.	4.5004	53.32
hsl(24, 98%, 37%) rgb(190, 78, 1) #BE4E01	hsl(0, 0%, 96%) rgb(245, 245, 245) #F5F5F5	Title big size with words in bold Here is some text sample with some words in bold to illustrate the contrast.	4.50086	53.79
hsl(15, 65%, 44%) rgb(190, 77, 39) #BE4D27	hsl(0, 0%, 96%) rgb(245, 245, 245) #F5F5F5	Title big size with words in bold Here is some text sample with some words in bold to illustrate the contrast.	4.50017	47.44
hsl(16, 67%, 44%) rgb(189, 78, 37) #BD4E25	hsl(0, 0%, 96%) rgb(245, 245, 245) #F5F5F5	Title big size with words in bold Here is some text sample with some words in bold to illustrate the contrast.	4.50022	48.08
hsl(17, 69%, 43%) rgb(188, 79, 34) #BC4F22	hsl(0, 0%, 96%) rgb(245, 245, 245) #F5F5F5	Title big size with words in bold Here is some text sample with some words in bold to illustrate the contrast.	4.50071	48.78
hsl(18, 71%, 42%) rgb(187, 80, 31) #BB501F	hsl(0, 0%, 96%) rgb(245, 245, 245) #F5F5F5	Title big size with words in bold Here is some text sample with some words in bold to illustrate the contrast.	4.50024	49.54
hsl(20, 75%, 41%) rgb(186, 81, 26) #BA511A	hsl(0, 0%, 96%) rgb(245, 245, 245) #F5F5F5	Title big size with words in bold Here is some text sample with some words in bold to illustrate the contrast.	4.50077	50.48
hsl(22, 80%, 40%) rgb(185, 82, 20) #B95214	hsl(0, 0%, 96%) rgb(245, 245, 245) #F5F5F5	Title big size with words in bold Here is some text sample with some words in bold to illustrate the contrast.	4.50059	51.78
hsl(16, 62%, 44%) rgb(184, 82, 43) #B8522B	hsl(0, 0%, 96%) rgb(245, 245, 245) #F5F5F5	Title big size with words in bold Here is some text sample with some words in bold to illustrate the contrast.	4.5006	51.99
hsl(18, 64%, 43%) rgb(183, 83, 39) #B75327	hsl(0, 0%, 96%) rgb(245, 245, 245) #F5F5F5	Title big size with words in bold Here is some text sample with some words in bold to illustrate the contrast.	4.5004	52.83
hsl(20, 68%, 42%) rgb(182, 84, 34) #B65422	hsl(0, 0%, 96%) rgb(245, 245, 245) #F5F5F5	Title big size with words in bold Here is some text sample with some words in bold to illustrate the contrast.	4.5002	53.69
hsl(22, 74%, 40%) rgb(181, 85, 27) #B5551B	hsl(0, 0%, 96%) rgb(245, 245, 245) #F5F5F5	Title big size with words in bold Here is some text sample with some words in bold to illustrate the contrast.	4.50048	54.7
hsl(17, 59%, 44%) rgb(180, 85, 46) #B4552E	hsl(0, 0%, 96%) rgb(245, 245, 245) #F5F5F5	Title big size with words in bold Here is some text sample with some words in bold to illustrate the contrast.	4.50098	55.48
hsl(19, 62%, 43%) rgb(179, 86, 41) #B35629	hsl(0, 0%, 96%) rgb(245, 245, 245) #F5F5F5	Title big size with words in bold Here is some text sample with some words in bold to illustrate the contrast.	4.50059	56.43
hsl(19, 59%, 43%) rgb(176, 88, 45) #B0582D	hsl(0, 0%, 96%) rgb(245, 245, 245) #F5F5F5	Title big size with words in bold Here is some text sample with some words in bold to illustrate the contrast.	4.50067	59.23
hsl(22, 64%, 41%) rgb(175, 89, 38) #AF5926	hsl(0, 0%, 96%) rgb(245, 245, 245) #F5F5F5	Title big size with words in bold Here is some text sample with some words in bold to illustrate the contrast.	4.50074	60.2
hsl(15, 50%, 45%) rgb(175, 88, 58) #AF583A	hsl(0, 0%, 96%) rgb(245, 245, 245) #F5F5F5	Title big size with words in bold Here is some text sample with some words in bold to illustrate the contrast.	4.50069	59.51
hsl(17, 53%, 44%) rgb(174, 89, 53) #AE5935	hsl(0, 0%, 96%) rgb(245, 245, 245) #F5F5F5	Title big size with words in bold Here is some text sample with some words in bold to illustrate the contrast.	4.50036	60.89
hsl(20, 57%, 43%) rgb(173, 90, 47) #AD5A2F	hsl(0, 0%, 96%) rgb(245, 245, 245) #F5F5F5	Title big size with words in bold Here is some text sample with some words in bold to illustrate the contrast.	4.50008	62.09
hsl(23, 63%, 41%) rgb(172, 91, 39) #AC5B27	hsl(0, 0%, 96%) rgb(245, 245, 245) #F5F5F5	Title big size with words in bold Here is some text sample with some words in bold to illustrate the contrast.	4.50061	63.11
hsl(16, 48%, 45%) rgb(172, 90, 59) #AC5A3B	hsl(0, 0%, 96%) rgb(245, 245, 245) #F5F5F5	Title big size with words in bold Here is some text sample with some words in bold to illustrate the contrast.	4.50072	62.36
hsl(22, 57%, 42%) rgb(170, 92, 46) #AA5C2E	hsl(0, 0%, 96%) rgb(245, 245, 245) #F5F5F5	Title big size with words in bold Here is some text sample with some words in bold to illustrate the contrast.	4.50097	65.04
hsl(15, 45%, 45%) rgb(170, 91, 64) #AA5B40	hsl(0, 0%, 96%) rgb(245, 245, 245) #F5F5F5	Title big size with words in bold Here is some text sample with some words in bold to illustrate the contrast.	4.5008	63.69
hsl(21, 52%, 43%) rgb(168, 93, 52) #A85D34	hsl(0, 0%, 96%) rgb(245, 245, 245) #F5F5F5	Title big size with words in bold Here is some text sample with some words in bold to illustrate the contrast.	4.50015	66.85
hsl(20, 49%, 43%) rgb(166, 94, 56) #A65E38	hsl(0, 0%, 96%) rgb(245, 245, 245) #F5F5F5	Title big size with words in bold Here is some text sample with some words in bold to illustrate the contrast.	4.5009	68.63
hsl(16, 42%, 45%) rgb(165, 94, 66) #A55E42	hsl(0, 0%, 96%) rgb(245, 245, 245) #F5F5F5	Title big size with words in bold Here is some text sample with some words in bold to illustrate the contrast.	4.50086	68.51
hsl(23, 51%, 42%) rgb(163, 96, 52) #A36034	hsl(0, 0%, 96%) rgb(245, 245, 245) #F5F5F5	Title big size with words in bold Here is some text sample with some words in bold to illustrate the contrast.	4.50042	71.84
hsl(16, 40%, 45%) rgb(163, 95, 69) #A35F45	hsl(0, 0%, 96%) rgb(245, 245, 245) #F5F5F5	Title big size with words in bold Here is some text sample with some words in bold to illustrate the contrast.	4.50033	70.05
hsl(16, 38%, 45%) rgb(161, 96, 71) #A16047	hsl(0, 0%, 96%) rgb(245, 245, 245) #F5F5F5	Title big size with words in bold Here is some text sample with some words in bold to illustrate the contrast.	4.50094	71.76
hsl(24, 47%, 42%) rgb(159, 98, 57) #9F6239	hsl(0, 0%, 96%) rgb(245, 245, 245) #F5F5F5	Title big size with words in bold Here is some text sample with some words in bold to illustrate the contrast.	4.5001	75.61
hsl(16, 37%, 45%) rgb(159, 97, 73) #9F6149	hsl(0, 0%, 96%) rgb(245, 245, 245) #F5F5F5	Title big size with words in bold Here is some text sample with some words in bold to illustrate the contrast.	4.50018	73.45
hsl(20, 41%, 43%) rgb(158, 98, 66) #9E6242	hsl(0, 0%, 96%) rgb(245, 245, 245) #F5F5F5	Title big size with words in bold Here is some text sample with some words in bold to illustrate the contrast.	4.50092	75.75
hsl(17, 35%, 45%) rgb(157, 98, 74) #9D624A	hsl(0, 0%, 96%) rgb(245, 245, 245) #F5F5F5	Title big size with words in bold Here is some text sample with some words in bold to illustrate the contrast.	4.50091	75.36
hsl(18, 34%, 45%) rgb(155, 99, 75) #9B634B	hsl(0, 0%, 96%) rgb(245, 245, 245) #F5F5F5	Title big size with words in bold Here is some text sample with some words in bold to illustrate the contrast.	4.50041	77.27

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 : 59 results (1,923,040 colors tested)

Products

Follow us

Language: