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(0, 0%, 100%) rgb(255, 255, 255) #FFF	hsl(33, 96%, 56%) rgb(251, 156, 38) #FB9C26	Title big size with words in bold Here is some text sample with some words in bold to illustrate the contrast.	2.12438

New contrast : 30 results (311 colors tested)

Valid contrasts
Foreground	Background	Sample	Ratio	Distance
hsl(0, 0%, 100%) rgb(255, 255, 255) #FFFFFF	hsl(32, 74%, 33%) rgb(151, 92, 22) #975C16	Title big size with words in bold Here is some text sample with some words in bold to illustrate the contrast.	5.4428	108.19
hsl(0, 0%, 100%) rgb(255, 255, 255) #FFFFFF	hsl(32, 59%, 37%) rgb(151, 99, 38) #976326	Title big size with words in bold Here is some text sample with some words in bold to illustrate the contrast.	5.08649	105.83
hsl(0, 0%, 100%) rgb(255, 255, 255) #FFFFFF	hsl(32, 48%, 39%) rgb(151, 106, 52) #976A34	Title big size with words in bold Here is some text sample with some words in bold to illustrate the contrast.	4.74355	103.92
hsl(0, 0%, 100%) rgb(255, 255, 255) #FFFFFF	hsl(32, 37%, 35%) rgb(126, 94, 57) #7E5E39	Title big size with words in bold Here is some text sample with some words in bold to illustrate the contrast.	5.92002	129.75
hsl(0, 0%, 100%) rgb(255, 255, 255) #FFFFFF	hsl(33, 29%, 38%) rgb(126, 100, 68) #7E6444	Title big size with words in bold Here is some text sample with some words in bold to illustrate the contrast.	5.53584	128.09
hsl(0, 0%, 100%) rgb(255, 255, 255) #FFFFFF	hsl(33, 21%, 40%) rgb(126, 106, 81) #7E6A51	Title big size with words in bold Here is some text sample with some words in bold to illustrate the contrast.	5.16281	125.96
hsl(0, 0%, 100%) rgb(255, 255, 255) #FFFFFF	hsl(32, 15%, 42%) rgb(126, 111, 93) #7E6F5D	Title big size with words in bold Here is some text sample with some words in bold to illustrate the contrast.	4.86228	123.37
hsl(0, 0%, 100%) rgb(255, 255, 255) #FFFFFF	hsl(30, 8%, 45%) rgb(126, 116, 106) #7E746A	Title big size with words in bold Here is some text sample with some words in bold to illustrate the contrast.	4.57177	119.41
hsl(0, 0%, 100%) rgb(255, 255, 255) #FFFFFF	hsl(25, 3%, 38%) rgb(101, 97, 94) #65615E	Title big size with words in bold Here is some text sample with some words in bold to illustrate the contrast.	6.13166	150.44
hsl(0, 0%, 100%) rgb(255, 255, 255) #FFFFFF	hsl(32, 88%, 31%) rgb(151, 86, 9) #975609	Title big size with words in bold Here is some text sample with some words in bold to illustrate the contrast.	5.75197	110.99
hsl(0, 0%, 100%) rgb(255, 255, 255) #FFFFFF	hsl(70, 75%, 28%) rgb(108, 126, 18) #6C7E12	Title big size with words in bold Here is some text sample with some words in bold to illustrate the contrast.	4.53495	143.57
hsl(0, 0%, 100%) rgb(255, 255, 255) #FFFFFF	hsl(69, 59%, 24%) rgb(89, 101, 26) #59651A	Title big size with words in bold Here is some text sample with some words in bold to illustrate the contrast.	6.3614	164.11
hsl(0, 0%, 100%) rgb(255, 255, 255) #FFFFFF	hsl(70, 49%, 26%) rgb(89, 101, 34) #596522	Title big size with words in bold Here is some text sample with some words in bold to illustrate the contrast.	6.34568	164.09
hsl(0, 0%, 100%) rgb(255, 255, 255) #FFFFFF	hsl(69, 38%, 28%) rgb(92, 101, 45) #5C652D	Title big size with words in bold Here is some text sample with some words in bold to illustrate the contrast.	6.26038	161.16
hsl(0, 0%, 100%) rgb(255, 255, 255) #FFFFFF	hsl(70, 30%, 30%) rgb(93, 101, 54) #5D6536	Title big size with words in bold Here is some text sample with some words in bold to illustrate the contrast.	6.2127	160.14
hsl(0, 0%, 100%) rgb(255, 255, 255) #FFFFFF	hsl(71, 21%, 32%) rgb(94, 101, 65) #5E6541	Title big size with words in bold Here is some text sample with some words in bold to illustrate the contrast.	6.15161	158.96
hsl(0, 0%, 100%) rgb(255, 255, 255) #FFFFFF	hsl(68, 15%, 34%) rgb(97, 101, 74) #61654A	Title big size with words in bold Here is some text sample with some words in bold to illustrate the contrast.	6.05426	155.66
hsl(0, 0%, 100%) rgb(255, 255, 255) #FFFFFF	hsl(75, 8%, 36%) rgb(97, 101, 85) #616555	Title big size with words in bold Here is some text sample with some words in bold to illustrate the contrast.	5.99841	154.87
hsl(0, 0%, 100%) rgb(255, 255, 255) #FFFFFF	hsl(77, 3%, 38%) rgb(99, 101, 94) #63655E	Title big size with words in bold Here is some text sample with some words in bold to illustrate the contrast.	5.90945	151.87
hsl(0, 0%, 100%) rgb(255, 255, 255) #FFFFFF	hsl(70, 89%, 26%) rgb(106, 126, 7) #6A7E07	Title big size with words in bold Here is some text sample with some words in bold to illustrate the contrast.	4.56498	145.89
hsl(0, 0%, 100%) rgb(255, 255, 255) #FFFFFF	hsl(105, 75%, 28%) rgb(45, 126, 18) #2D7E12	Title big size with words in bold Here is some text sample with some words in bold to illustrate the contrast.	5.11614	206.27
hsl(0, 0%, 100%) rgb(255, 255, 255) #FFFFFF	hsl(105, 59%, 30%) rgb(54, 126, 32) #367E20	Title big size with words in bold Here is some text sample with some words in bold to illustrate the contrast.	5.04559	197.23
hsl(0, 0%, 100%) rgb(255, 255, 255) #FFFFFF	hsl(105, 49%, 33%) rgb(63, 126, 43) #3F7E2B	Title big size with words in bold Here is some text sample with some words in bold to illustrate the contrast.	4.96386	188.25
hsl(0, 0%, 100%) rgb(255, 255, 255) #FFFFFF	hsl(106, 37%, 35%) rgb(72, 126, 57) #487E39	Title big size with words in bold Here is some text sample with some words in bold to illustrate the contrast.	4.86227	179.21
hsl(0, 0%, 100%) rgb(255, 255, 255) #FFFFFF	hsl(106, 29%, 38%) rgb(81, 126, 68) #517E44	Title big size with words in bold Here is some text sample with some words in bold to illustrate the contrast.	4.75363	170.0
hsl(0, 0%, 100%) rgb(255, 255, 255) #FFFFFF	hsl(106, 21%, 40%) rgb(91, 126, 81) #5B7E51	Title big size with words in bold Here is some text sample with some words in bold to illustrate the contrast.	4.61743	159.31
hsl(0, 0%, 100%) rgb(255, 255, 255) #FFFFFF	hsl(104, 15%, 34%) rgb(81, 101, 74) #51654A	Title big size with words in bold Here is some text sample with some words in bold to illustrate the contrast.	6.34399	171.37
hsl(0, 0%, 100%) rgb(255, 255, 255) #FFFFFF	hsl(105, 8%, 36%) rgb(89, 101, 85) #596555	Title big size with words in bold Here is some text sample with some words in bold to illustrate the contrast.	6.14499	162.79
hsl(0, 0%, 100%) rgb(255, 255, 255) #FFFFFF	hsl(94, 3%, 38%) rgb(97, 101, 94) #61655E	Title big size with words in bold Here is some text sample with some words in bold to illustrate the contrast.	5.94668	153.87
hsl(0, 0%, 100%) rgb(255, 255, 255) #FFFFFF	hsl(105, 89%, 26%) rgb(36, 126, 7) #247E07	Title big size with words in bold Here is some text sample with some words in bold to illustrate the contrast.	5.16933	215.41

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 : 30 results (311 colors tested)

Products

Follow us

Language: