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(211, 95%, 71%) rgb(113, 179, 252) #71B3FC	hsl(0, 0%, 100%) rgb(255, 255, 255) #FFF	Title big size with words in bold Here is some text sample with some words in bold to illustrate the contrast.	2.19761

New contrast : 57 results (936,960 colors tested)

Valid contrasts
Foreground	Background	Sample	Ratio	Distance
hsl(212, 42%, 60%) rgb(113, 152, 197) #7198C5	hsl(0, 0%, 100%) rgb(255, 255, 255) #FFFFFF	Title big size with words in bold Here is some text sample with some words in bold to illustrate the contrast.	3.00014	57.09
hsl(209, 40%, 59%) rgb(110, 153, 194) #6E99C2	hsl(0, 0%, 100%) rgb(255, 255, 255) #FFFFFF	Title big size with words in bold Here is some text sample with some words in bold to illustrate the contrast.	3.00064	59.69
hsl(212, 45%, 60%) rgb(110, 152, 201) #6E98C9	hsl(0, 0%, 100%) rgb(255, 255, 255) #FFFFFF	Title big size with words in bold Here is some text sample with some words in bold to illustrate the contrast.	3.00098	53.41
hsl(212, 49%, 61%) rgb(107, 152, 205) #6B98CD	hsl(0, 0%, 100%) rgb(255, 255, 255) #FFFFFF	Title big size with words in bold Here is some text sample with some words in bold to illustrate the contrast.	3.00085	49.83
hsl(214, 57%, 62%) rgb(105, 151, 214) #6997D6	hsl(0, 0%, 100%) rgb(255, 255, 255) #FFFFFF	Title big size with words in bold Here is some text sample with some words in bold to illustrate the contrast.	3.00073	42.6
hsl(207, 43%, 58%) rgb(104, 154, 195) #689AC3	hsl(0, 0%, 100%) rgb(255, 255, 255) #FFFFFF	Title big size with words in bold Here is some text sample with some words in bold to illustrate the contrast.	3.00048	58.63
hsl(210, 48%, 60%) rgb(104, 153, 202) #6899CA	hsl(0, 0%, 100%) rgb(255, 255, 255) #FFFFFF	Title big size with words in bold Here is some text sample with some words in bold to illustrate the contrast.	3.00088	52.33
hsl(212, 54%, 61%) rgb(103, 152, 210) #6798D2	hsl(0, 0%, 100%) rgb(255, 255, 255) #FFFFFF	Title big size with words in bold Here is some text sample with some words in bold to illustrate the contrast.	3.00058	45.59
hsl(207, 47%, 58%) rgb(100, 154, 200) #649AC8	hsl(0, 0%, 100%) rgb(255, 255, 255) #FFFFFF	Title big size with words in bold Here is some text sample with some words in bold to illustrate the contrast.	3.0008	54.11
hsl(210, 52%, 60%) rgb(100, 153, 207) #6499CF	hsl(0, 0%, 100%) rgb(255, 255, 255) #FFFFFF	Title big size with words in bold Here is some text sample with some words in bold to illustrate the contrast.	3.00028	48.04
hsl(210, 53%, 60%) rgb(99, 153, 208) #6399D0	hsl(0, 0%, 100%) rgb(255, 255, 255) #FFFFFF	Title big size with words in bold Here is some text sample with some words in bold to illustrate the contrast.	3.00093	47.25
hsl(208, 54%, 59%) rgb(94, 154, 207) #5E9ACF	hsl(0, 0%, 100%) rgb(255, 255, 255) #FFFFFF	Title big size with words in bold Here is some text sample with some words in bold to illustrate the contrast.	3.00035	48.43
hsl(208, 55%, 59%) rgb(93, 154, 208) #5D9AD0	hsl(0, 0%, 100%) rgb(255, 255, 255) #FFFFFF	Title big size with words in bold Here is some text sample with some words in bold to illustrate the contrast.	3.00065	47.74
hsl(208, 55%, 59%) rgb(92, 154, 209) #5C9AD1	hsl(0, 0%, 100%) rgb(255, 255, 255) #FFFFFF	Title big size with words in bold Here is some text sample with some words in bold to illustrate the contrast.	3.00086	47.09
hsl(208, 56%, 59%) rgb(91, 154, 210) #5B9AD2	hsl(0, 0%, 100%) rgb(255, 255, 255) #FFFFFF	Title big size with words in bold Here is some text sample with some words in bold to illustrate the contrast.	3.00099	46.47
hsl(208, 58%, 59%) rgb(89, 154, 212) #599AD4	hsl(0, 0%, 100%) rgb(255, 255, 255) #FFFFFF	Title big size with words in bold Here is some text sample with some words in bold to illustrate the contrast.	3.00098	45.38
hsl(215, 79%, 63%) rgb(89, 150, 236) #5996EC	hsl(0, 0%, 100%) rgb(255, 255, 255) #FFFFFF	Title big size with words in bold Here is some text sample with some words in bold to illustrate the contrast.	3.00063	34.85
hsl(208, 59%, 59%) rgb(88, 154, 213) #589AD5	hsl(0, 0%, 100%) rgb(255, 255, 255) #FFFFFF	Title big size with words in bold Here is some text sample with some words in bold to illustrate the contrast.	3.00086	44.91
hsl(208, 60%, 59%) rgb(87, 154, 214) #579AD6	hsl(0, 0%, 100%) rgb(255, 255, 255) #FFFFFF	Title big size with words in bold Here is some text sample with some words in bold to illustrate the contrast.	3.00064	44.49
hsl(216, 86%, 64%) rgb(87, 149, 243) #5795F3	hsl(0, 0%, 100%) rgb(255, 255, 255) #FFFFFF	Title big size with words in bold Here is some text sample with some words in bold to illustrate the contrast.	3.00067	35.65
hsl(208, 61%, 59%) rgb(86, 154, 215) #569AD7	hsl(0, 0%, 100%) rgb(255, 255, 255) #FFFFFF	Title big size with words in bold Here is some text sample with some words in bold to illustrate the contrast.	3.00035	44.13
hsl(213, 76%, 62%) rgb(86, 151, 233) #5697E9	hsl(0, 0%, 100%) rgb(255, 255, 255) #FFFFFF	Title big size with words in bold Here is some text sample with some words in bold to illustrate the contrast.	3.00044	36.47
hsl(211, 72%, 61%) rgb(85, 152, 228) #5598E4	hsl(0, 0%, 100%) rgb(255, 255, 255) #FFFFFF	Title big size with words in bold Here is some text sample with some words in bold to illustrate the contrast.	3.00093	38.14
hsl(210, 68%, 60%) rgb(84, 153, 223) #5499DF	hsl(0, 0%, 100%) rgb(255, 255, 255) #FFFFFF	Title big size with words in bold Here is some text sample with some words in bold to illustrate the contrast.	3.00043	40.48
hsl(211, 73%, 61%) rgb(84, 152, 229) #5498E5	hsl(0, 0%, 100%) rgb(255, 255, 255) #FFFFFF	Title big size with words in bold Here is some text sample with some words in bold to illustrate the contrast.	3.00013	38.31
hsl(214, 83%, 63%) rgb(84, 150, 240) #5496F0	hsl(0, 0%, 100%) rgb(255, 255, 255) #FFFFFF	Title big size with words in bold Here is some text sample with some words in bold to illustrate the contrast.	3.00096	36.96
hsl(213, 81%, 62%) rgb(81, 151, 237) #5197ED	hsl(0, 0%, 100%) rgb(255, 255, 255) #FFFFFF	Title big size with words in bold Here is some text sample with some words in bold to illustrate the contrast.	3.00026	38.73
hsl(214, 87%, 63%) rgb(80, 150, 243) #5096F3	hsl(0, 0%, 100%) rgb(255, 255, 255) #FFFFFF	Title big size with words in bold Here is some text sample with some words in bold to illustrate the contrast.	3.00092	39.38
hsl(208, 67%, 58%) rgb(79, 154, 221) #4F9ADD	hsl(0, 0%, 100%) rgb(255, 255, 255) #FFFFFF	Title big size with words in bold Here is some text sample with some words in bold to illustrate the contrast.	3.00052	43.92
hsl(210, 72%, 60%) rgb(79, 153, 227) #4F99E3	hsl(0, 0%, 100%) rgb(255, 255, 255) #FFFFFF	Title big size with words in bold Here is some text sample with some words in bold to illustrate the contrast.	3.00079	41.7
hsl(215, 93%, 64%) rgb(79, 149, 249) #4F95F9	hsl(0, 0%, 100%) rgb(255, 255, 255) #FFFFFF	Title big size with words in bold Here is some text sample with some words in bold to illustrate the contrast.	3.00028	40.48
hsl(216, 98%, 65%) rgb(79, 148, 254) #4F94FE	hsl(0, 0%, 100%) rgb(255, 255, 255) #FFFFFF	Title big size with words in bold Here is some text sample with some words in bold to illustrate the contrast.	3.00019	41.03
hsl(211, 79%, 60%) rgb(76, 152, 235) #4C98EB	hsl(0, 0%, 100%) rgb(255, 255, 255) #FFFFFF	Title big size with words in bold Here is some text sample with some words in bold to illustrate the contrast.	3.00076	42.22
hsl(214, 95%, 64%) rgb(76, 149, 251) #4C95FB	hsl(0, 0%, 100%) rgb(255, 255, 255) #FFFFFF	Title big size with words in bold Here is some text sample with some words in bold to illustrate the contrast.	3.00031	42.66
hsl(208, 70%, 58%) rgb(75, 154, 224) #4B9AE0	hsl(0, 0%, 100%) rgb(255, 255, 255) #FFFFFF	Title big size with words in bold Here is some text sample with some words in bold to illustrate the contrast.	3.00095	45.22
hsl(209, 75%, 59%) rgb(75, 153, 230) #4B99E6	hsl(0, 0%, 100%) rgb(255, 255, 255) #FFFFFF	Title big size with words in bold Here is some text sample with some words in bold to illustrate the contrast.	3.00073	43.64
hsl(212, 86%, 61%) rgb(74, 151, 242) #4A97F2	hsl(0, 0%, 100%) rgb(255, 255, 255) #FFFFFF	Title big size with words in bold Here is some text sample with some words in bold to illustrate the contrast.	3.00001	43.49
hsl(208, 73%, 58%) rgb(71, 154, 227) #479AE3	hsl(0, 0%, 100%) rgb(255, 255, 255) #FFFFFF	Title big size with words in bold Here is some text sample with some words in bold to illustrate the contrast.	3.00027	47.23
hsl(213, 93%, 62%) rgb(71, 150, 249) #4796F9	hsl(0, 0%, 100%) rgb(255, 255, 255) #FFFFFF	Title big size with words in bold Here is some text sample with some words in bold to illustrate the contrast.	3.0007	46.18
hsl(214, 98%, 63%) rgb(71, 149, 254) #4795FE	hsl(0, 0%, 100%) rgb(255, 255, 255) #FFFFFF	Title big size with words in bold Here is some text sample with some words in bold to illustrate the contrast.	3.00084	46.58
hsl(210, 84%, 60%) rgb(70, 152, 239) #4698EF	hsl(0, 0%, 100%) rgb(255, 255, 255) #FFFFFF	Title big size with words in bold Here is some text sample with some words in bold to illustrate the contrast.	3.00081	46.63
hsl(212, 89%, 61%) rgb(69, 151, 245) #4597F5	hsl(0, 0%, 100%) rgb(255, 255, 255) #FFFFFF	Title big size with words in bold Here is some text sample with some words in bold to illustrate the contrast.	3.00077	47.55
hsl(207, 75%, 58%) rgb(68, 154, 229) #449AE5	hsl(0, 0%, 100%) rgb(255, 255, 255) #FFFFFF	Title big size with words in bold Here is some text sample with some words in bold to illustrate the contrast.	3.00023	49.18
hsl(209, 81%, 59%) rgb(66, 153, 236) #4299EC	hsl(0, 0%, 100%) rgb(255, 255, 255) #FFFFFF	Title big size with words in bold Here is some text sample with some words in bold to illustrate the contrast.	3.00027	50.07
hsl(212, 96%, 62%) rgb(66, 150, 252) #4296FC	hsl(0, 0%, 100%) rgb(255, 255, 255) #FFFFFF	Title big size with words in bold Here is some text sample with some words in bold to illustrate the contrast.	3.00007	50.42
hsl(210, 87%, 60%) rgb(65, 152, 242) #4198F2	hsl(0, 0%, 100%) rgb(255, 255, 255) #FFFFFF	Title big size with words in bold Here is some text sample with some words in bold to illustrate the contrast.	3.00076	50.82
hsl(212, 97%, 62%) rgb(64, 150, 253) #4096FD	hsl(0, 0%, 100%) rgb(255, 255, 255) #FFFFFF	Title big size with words in bold Here is some text sample with some words in bold to illustrate the contrast.	3.00047	52.18
hsl(207, 78%, 57%) rgb(63, 154, 232) #3F9AE8	hsl(0, 0%, 100%) rgb(255, 255, 255) #FFFFFF	Title big size with words in bold Here is some text sample with some words in bold to illustrate the contrast.	3.0005	52.97
hsl(211, 93%, 60%) rgb(62, 151, 249) #3E97F9	hsl(0, 0%, 100%) rgb(255, 255, 255) #FFFFFF	Title big size with words in bold Here is some text sample with some words in bold to illustrate the contrast.	3.00027	53.67
hsl(212, 98%, 61%) rgb(62, 150, 254) #3E96FE	hsl(0, 0%, 100%) rgb(255, 255, 255) #FFFFFF	Title big size with words in bold Here is some text sample with some words in bold to illustrate the contrast.	3.00064	53.95
hsl(211, 95%, 60%) rgb(60, 151, 250) #3C97FA	hsl(0, 0%, 100%) rgb(255, 255, 255) #FFFFFF	Title big size with words in bold Here is some text sample with some words in bold to illustrate the contrast.	3.00034	55.49
hsl(211, 96%, 60%) rgb(58, 151, 251) #3A97FB	hsl(0, 0%, 100%) rgb(255, 255, 255) #FFFFFF	Title big size with words in bold Here is some text sample with some words in bold to illustrate the contrast.	3.00019	57.32
hsl(209, 93%, 59%) rgb(53, 152, 248) #3598F8	hsl(0, 0%, 100%) rgb(255, 255, 255) #FFFFFF	Title big size with words in bold Here is some text sample with some words in bold to illustrate the contrast.	3.0008	61.78
hsl(211, 39%, 60%) rgb(115, 152, 194) #7398C2	hsl(0, 0%, 100%) rgb(255, 255, 255) #FFFFFF	Title big size with words in bold Here is some text sample with some words in bold to illustrate the contrast.	3.00031	59.89
hsl(214, 44%, 61%) rgb(115, 151, 201) #7397C9	hsl(0, 0%, 100%) rgb(255, 255, 255) #FFFFFF	Title big size with words in bold Here is some text sample with some words in bold to illustrate the contrast.	3.00042	53.67
hsl(214, 41%, 61%) rgb(117, 151, 198) #7597C6	hsl(0, 0%, 100%) rgb(255, 255, 255) #FFFFFF	Title big size with words in bold Here is some text sample with some words in bold to illustrate the contrast.	3.00066	56.39
hsl(214, 38%, 61%) rgb(119, 151, 195) #7797C3	hsl(0, 0%, 100%) rgb(255, 255, 255) #FFFFFF	Title big size with words in bold Here is some text sample with some words in bold to illustrate the contrast.	3.0004	59.15

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 : 57 results (936,960 colors tested)

Products

Follow us

Language: