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(64, 83%, 37%) rgb(165, 176, 16) #A5B010	hsl(0, 0%, 97%) rgb(249, 249, 249) #F9F9F9	Title big size with words in bold Here is some text sample with some words in bold to illustrate the contrast.	2.26211

New contrast : 34 results (1,127,280 colors tested)

Valid contrasts
Foreground	Background	Sample	Ratio	Distance
hsl(59, 47%, 39%) rgb(150, 149, 53) #969535	hsl(0, 0%, 97%) rgb(249, 249, 249) #F9F9F9	Title big size with words in bold Here is some text sample with some words in bold to illustrate the contrast.	3.00068	30.22
hsl(60, 80%, 32%) rgb(149, 150, 16) #959610	hsl(0, 0%, 97%) rgb(249, 249, 249) #F9F9F9	Title big size with words in bold Here is some text sample with some words in bold to illustrate the contrast.	3.00035	27.88
hsl(60, 81%, 32%) rgb(149, 150, 15) #95960F	hsl(0, 0%, 97%) rgb(249, 249, 249) #F9F9F9	Title big size with words in bold Here is some text sample with some words in bold to illustrate the contrast.	3.00061	27.88
hsl(60, 82%, 32%) rgb(149, 150, 14) #95960E	hsl(0, 0%, 97%) rgb(249, 249, 249) #F9F9F9	Title big size with words in bold Here is some text sample with some words in bold to illustrate the contrast.	3.00087	27.88
hsl(60, 79%, 32%) rgb(149, 150, 17) #959611	hsl(0, 0%, 97%) rgb(249, 249, 249) #F9F9F9	Title big size with words in bold Here is some text sample with some words in bold to illustrate the contrast.	3.00007	27.88
hsl(60, 40%, 41%) rgb(149, 149, 63) #95953F	hsl(0, 0%, 97%) rgb(249, 249, 249) #F9F9F9	Title big size with words in bold Here is some text sample with some words in bold to illustrate the contrast.	3.00002	43.1
hsl(61, 61%, 36%) rgb(148, 150, 36) #949624	hsl(0, 0%, 97%) rgb(249, 249, 249) #F9F9F9	Title big size with words in bold Here is some text sample with some words in bold to illustrate the contrast.	3.00068	24.38
hsl(61, 60%, 36%) rgb(148, 150, 37) #949625	hsl(0, 0%, 97%) rgb(249, 249, 249) #F9F9F9	Title big size with words in bold Here is some text sample with some words in bold to illustrate the contrast.	3.00013	23.65
hsl(60, 36%, 42%) rgb(148, 149, 70) #949546	hsl(0, 0%, 97%) rgb(249, 249, 249) #F9F9F9	Title big size with words in bold Here is some text sample with some words in bold to illustrate the contrast.	3.00095	51.03
hsl(61, 50%, 39%) rgb(147, 150, 49) #939631	hsl(0, 0%, 97%) rgb(249, 249, 249) #F9F9F9	Title big size with words in bold Here is some text sample with some words in bold to illustrate the contrast.	3.00055	23.23
hsl(62, 43%, 40%) rgb(146, 150, 59) #92963B	hsl(0, 0%, 97%) rgb(249, 249, 249) #F9F9F9	Title big size with words in bold Here is some text sample with some words in bold to illustrate the contrast.	3.00037	38.05
hsl(62, 68%, 35%) rgb(145, 151, 28) #91971C	hsl(0, 0%, 97%) rgb(249, 249, 249) #F9F9F9	Title big size with words in bold Here is some text sample with some words in bold to illustrate the contrast.	3.00061	27.98
hsl(62, 67%, 35%) rgb(145, 151, 29) #91971D	hsl(0, 0%, 97%) rgb(249, 249, 249) #F9F9F9	Title big size with words in bold Here is some text sample with some words in bold to illustrate the contrast.	3.00017	27.78
hsl(63, 38%, 42%) rgb(145, 150, 67) #919643	hsl(0, 0%, 97%) rgb(249, 249, 249) #F9F9F9	Title big size with words in bold Here is some text sample with some words in bold to illustrate the contrast.	3.00053	47.49
hsl(63, 55%, 38%) rgb(144, 151, 43) #90972B	hsl(0, 0%, 97%) rgb(249, 249, 249) #F9F9F9	Title big size with words in bold Here is some text sample with some words in bold to illustrate the contrast.	3.0006	17.33
hsl(64, 33%, 43%) rgb(144, 150, 74) #90964A	hsl(0, 0%, 97%) rgb(249, 249, 249) #F9F9F9	Title big size with words in bold Here is some text sample with some words in bold to illustrate the contrast.	3.00065	55.21
hsl(64, 47%, 40%) rgb(143, 151, 54) #8F9736	hsl(0, 0%, 97%) rgb(249, 249, 249) #F9F9F9	Title big size with words in bold Here is some text sample with some words in bold to illustrate the contrast.	3.00039	30.58
hsl(64, 82%, 32%) rgb(142, 152, 15) #8E980F	hsl(0, 0%, 97%) rgb(249, 249, 249) #F9F9F9	Title big size with words in bold Here is some text sample with some words in bold to illustrate the contrast.	3.00016	29.62
hsl(64, 83%, 32%) rgb(142, 152, 14) #8E980E	hsl(0, 0%, 97%) rgb(249, 249, 249) #F9F9F9	Title big size with words in bold Here is some text sample with some words in bold to illustrate the contrast.	3.00041	29.62
hsl(64, 84%, 32%) rgb(142, 152, 13) #8E980D	hsl(0, 0%, 97%) rgb(249, 249, 249) #F9F9F9	Title big size with words in bold Here is some text sample with some words in bold to illustrate the contrast.	3.00065	29.63
hsl(64, 85%, 32%) rgb(142, 152, 12) #8E980C	hsl(0, 0%, 97%) rgb(249, 249, 249) #F9F9F9	Title big size with words in bold Here is some text sample with some words in bold to illustrate the contrast.	3.00088	29.65
hsl(66, 41%, 41%) rgb(142, 151, 63) #8E973F	hsl(0, 0%, 97%) rgb(249, 249, 249) #F9F9F9	Title big size with words in bold Here is some text sample with some words in bold to illustrate the contrast.	3.00006	42.36
hsl(65, 63%, 36%) rgb(141, 152, 34) #8D9822	hsl(0, 0%, 97%) rgb(249, 249, 249) #F9F9F9	Title big size with words in bold Here is some text sample with some words in bold to illustrate the contrast.	3.0008	27.94
hsl(65, 62%, 36%) rgb(141, 152, 35) #8D9823	hsl(0, 0%, 97%) rgb(249, 249, 249) #F9F9F9	Title big size with words in bold Here is some text sample with some words in bold to illustrate the contrast.	3.00027	27.5
hsl(67, 36%, 43%) rgb(141, 151, 70) #8D9746	hsl(0, 0%, 97%) rgb(249, 249, 249) #F9F9F9	Title big size with words in bold Here is some text sample with some words in bold to illustrate the contrast.	3.00049	50.4
hsl(66, 52%, 39%) rgb(140, 152, 47) #8C982F	hsl(0, 0%, 97%) rgb(249, 249, 249) #F9F9F9	Title big size with words in bold Here is some text sample with some words in bold to illustrate the contrast.	3.00058	6.99
hsl(68, 45%, 40%) rgb(139, 152, 57) #8B9839	hsl(0, 0%, 97%) rgb(249, 249, 249) #F9F9F9	Title big size with words in bold Here is some text sample with some words in bold to illustrate the contrast.	3.00024	33.48
hsl(66, 77%, 33%) rgb(138, 153, 19) #8A9913	hsl(0, 0%, 97%) rgb(249, 249, 249) #F9F9F9	Title big size with words in bold Here is some text sample with some words in bold to illustrate the contrast.	3.00097	31.69
hsl(66, 76%, 33%) rgb(138, 153, 20) #8A9914	hsl(0, 0%, 97%) rgb(249, 249, 249) #F9F9F9	Title big size with words in bold Here is some text sample with some words in bold to illustrate the contrast.	3.00066	31.68
hsl(66, 75%, 34%) rgb(138, 153, 21) #8A9915	hsl(0, 0%, 97%) rgb(249, 249, 249) #F9F9F9	Title big size with words in bold Here is some text sample with some words in bold to illustrate the contrast.	3.00033	31.66
hsl(68, 61%, 37%) rgb(137, 153, 37) #899925	hsl(0, 0%, 97%) rgb(249, 249, 249) #F9F9F9	Title big size with words in bold Here is some text sample with some words in bold to illustrate the contrast.	3.00083	29.18
hsl(68, 60%, 37%) rgb(137, 153, 38) #899926	hsl(0, 0%, 97%) rgb(249, 249, 249) #F9F9F9	Title big size with words in bold Here is some text sample with some words in bold to illustrate the contrast.	3.00025	28.63
hsl(69, 76%, 34%) rgb(134, 154, 21) #869A15	hsl(0, 0%, 97%) rgb(249, 249, 249) #F9F9F9	Title big size with words in bold Here is some text sample with some words in bold to illustrate the contrast.	3.00089	34.29
hsl(69, 75%, 34%) rgb(134, 154, 22) #869A16	hsl(0, 0%, 97%) rgb(249, 249, 249) #F9F9F9	Title big size with words in bold Here is some text sample with some words in bold to illustrate the contrast.	3.00055	34.26

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 : 34 results (1,127,280 colors tested)

Products

Follow us

Language: