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(171, 42%, 62%) rgb(120, 201, 190) #78C9BE	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.	1.92717

New contrast : 30 results (258 colors tested)

Valid contrasts
Foreground	Background	Sample	Ratio	Distance
hsl(171, 25%, 47%) rgb(90, 151, 142) #5A978E	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.35894	64.04
hsl(172, 18%, 50%) rgb(104, 151, 145) #689791	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.26893	60.39
hsl(170, 12%, 53%) rgb(120, 151, 146) #789792	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.1625	59.46
hsl(169, 7%, 55%) rgb(134, 151, 148) #869794	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.05769	58.12
hsl(180, 0%, 49%) rgb(125, 126, 126) #7D7E7E	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.	4.07165	88.1
hsl(170, 34%, 44%) rgb(74, 151, 139) #4A978B	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.44792	70.81
hsl(171, 43%, 41%) rgb(60, 151, 138) #3C978A	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.50832	78.38
hsl(171, 54%, 38%) rgb(44, 151, 135) #2C9787	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.56925	90.06
hsl(171, 66%, 35%) rgb(30, 151, 133) #1E9785	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.60791	101.29
hsl(171, 81%, 32%) rgb(15, 151, 131) #0F9783	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.63656	114.17
hsl(134, 25%, 47%) rgb(90, 151, 105) #5A9769	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.46228	91.5
hsl(135, 18%, 50%) rgb(104, 151, 116) #689774	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.35065	81.15
hsl(133, 12%, 53%) rgb(120, 151, 127) #78977F	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.21508	72.12
hsl(137, 7%, 55%) rgb(134, 151, 139) #86978B	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.08229	63.41
hsl(120, 0%, 49%) rgb(125, 126, 125) #7D7E7D	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.	4.07571	88.64
hsl(135, 34%, 44%) rgb(74, 151, 94) #4A975E	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.57177	103.45
hsl(135, 43%, 41%) rgb(60, 151, 83) #3C9753	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.65619	116.13
hsl(135, 54%, 38%) rgb(44, 151, 72) #2C9748	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.7318	130.2
hsl(135, 66%, 35%) rgb(30, 151, 61) #1E973D	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.78431	144.24
hsl(135, 81%, 32%) rgb(15, 151, 50) #0F9732	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.82304	159.09
hsl(208, 31%, 55%) rgb(105, 142, 176) #698EB0	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.44445	59.58
hsl(208, 25%, 58%) rgb(122, 150, 176) #7A96B0	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.08055	51.35
hsl(209, 12%, 53%) rgb(120, 136, 151) #788897	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.64131	69.38
hsl(208, 7%, 55%) rgb(134, 143, 151) #868F97	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.28663	63.14
hsl(208, 36%, 51%) rgb(87, 134, 176) #5786B0	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.85873	69.76
hsl(207, 52%, 55%) rgb(80, 145, 201) #5091C9	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.36827	62.0
hsl(244, 42%, 62%) rgb(126, 120, 201) #7E78C9	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.8766	80.92
hsl(280, 42%, 62%) rgb(175, 120, 201) #AF78C9	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.30563	71.38
hsl(317, 42%, 62%) rgb(201, 120, 178) #C978B2	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.08236	12.0
hsl(353, 42%, 62%) rgb(201, 120, 129) #C97881	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.2372	61.0

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 (258 colors tested)

Products

Follow us

Language: