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 : 26 results (347 colors tested)

Valid contrasts
Foreground	Background	Sample	Ratio	Distance
hsl(13, 45%, 53%) rgb(191, 106, 82) #BF6A52	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.67879	27.87
hsl(13, 30%, 49%) rgb(165, 105, 87) #A56957	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.24227	18.46
hsl(12, 49%, 50%) rgb(191, 91, 64) #BF5B40	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.26109	25.83
hsl(12, 68%, 52%) rgb(217, 86, 50) #D95632	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.63027	50.8
hsl(13, 77%, 48%) rgb(217, 69, 28) #D9451C	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.28332	36.58
hsl(12, 93%, 43%) rgb(217, 52, 7) #D93407	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.02864	57.04
hsl(49, 39%, 46%) rgb(165, 148, 71) #A59447	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.	4.72006	56.0
hsl(84, 39%, 46%) rgb(126, 165, 71) #7EA547	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.	5.01535	69.08
hsl(120, 39%, 46%) rgb(71, 165, 72) #47A548	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.	4.59518	76.15
hsl(156, 39%, 46%) rgb(71, 165, 128) #47A580	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.	4.74382	63.53
hsl(192, 39%, 46%) rgb(71, 146, 165) #4792A5	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.	4.0359	54.0
hsl(227, 62%, 60%) rgb(93, 118, 217) #5D76D9	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.44713	140.21
hsl(227, 41%, 57%) rgb(100, 119, 191) #6477BF	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.36138	113.78
hsl(228, 25%, 52%) rgb(104, 116, 165) #6874A5	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.15503	85.15
hsl(228, 87%, 63%) rgb(82, 113, 243) #5271F3	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.41734	165.41
hsl(321, 91%, 52%) rgb(245, 25, 165) #F519A5	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.79201	101.38
hsl(263, 62%, 60%) rgb(142, 93, 217) #8E5DD9	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.21483	145.81
hsl(263, 41%, 57%) rgb(136, 100, 191) #8864BF	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.14954	119.44
hsl(263, 25%, 52%) rgb(128, 104, 165) #8068A5	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.02638	92.12
hsl(262, 87%, 63%) rgb(143, 82, 243) #8F52F3	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.18158	171.87
hsl(298, 45%, 53%) rgb(189, 82, 191) #BD52BF	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.49091	120.3
hsl(299, 30%, 49%) rgb(164, 87, 165) #A457A5	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.05623	94.0
hsl(299, 49%, 50%) rgb(189, 64, 191) #BD40BF	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.16822	119.81
hsl(298, 68%, 52%) rgb(214, 50, 217) #D632D9	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.62339	146.68
hsl(299, 77%, 48%) rgb(214, 28, 217) #D61CD9	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.42568	143.7
hsl(299, 93%, 43%) rgb(214, 7, 217) #D607D9	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.33321	137.78

Not satisfied ?

Gimme valid colors and very close to initial color

tanaguru contrast finder

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

Old contrast

New contrast : 26 results (347 colors tested)

Products

Follow us

Language: