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(120, 99%, 99%) rgb(254, 255, 254) #FEFFFE	hsl(35, 100%, 50%) rgb(255, 151, 0) #FF9700	Title big size with words in bold Here is some text sample with some words in bold to illustrate the contrast.	2.16449

New contrast : 30 results (292 colors tested)

Valid contrasts
Foreground	Background	Sample	Ratio	Distance
hsl(120, 99%, 99%) rgb(254, 255, 254) #FEFFFE	hsl(35, 100%, 30%) rgb(155, 91, 0) #9B5B00	Title big size with words in bold Here is some text sample with some words in bold to illustrate the contrast.	5.38523	106.74
hsl(120, 99%, 99%) rgb(254, 255, 254) #FEFFFE	hsl(35, 82%, 33%) rgb(155, 97, 15) #9B610F	Title big size with words in bold Here is some text sample with some words in bold to illustrate the contrast.	5.09655	104.89
hsl(120, 99%, 99%) rgb(254, 255, 254) #FEFFFE	hsl(34, 65%, 36%) rgb(155, 103, 32) #9B6720	Title big size with words in bold Here is some text sample with some words in bold to illustrate the contrast.	4.81077	102.53
hsl(120, 99%, 99%) rgb(254, 255, 254) #FEFFFE	hsl(35, 54%, 32%) rgb(130, 92, 38) #825C26	Title big size with words in bold Here is some text sample with some words in bold to illustrate the contrast.	5.97185	128.13
hsl(120, 99%, 99%) rgb(254, 255, 254) #FEFFFE	hsl(35, 42%, 35%) rgb(130, 98, 53) #826235	Title big size with words in bold Here is some text sample with some words in bold to illustrate the contrast.	5.58999	125.0
hsl(120, 99%, 99%) rgb(254, 255, 254) #FEFFFE	hsl(35, 33%, 38%) rgb(130, 103, 65) #826741	Title big size with words in bold Here is some text sample with some words in bold to illustrate the contrast.	5.28277	121.4
hsl(120, 99%, 99%) rgb(254, 255, 254) #FEFFFE	hsl(35, 24%, 40%) rgb(130, 109, 79) #826D4F	Title big size with words in bold Here is some text sample with some words in bold to illustrate the contrast.	4.9298	115.33
hsl(120, 99%, 99%) rgb(254, 255, 254) #FEFFFE	hsl(34, 17%, 43%) rgb(130, 114, 92) #82725C	Title big size with words in bold Here is some text sample with some words in bold to illustrate the contrast.	4.64443	107.0
hsl(120, 99%, 99%) rgb(254, 255, 254) #FEFFFE	hsl(34, 11%, 37%) rgb(105, 96, 84) #696054	Title big size with words in bold Here is some text sample with some words in bold to illustrate the contrast.	6.15827	143.4
hsl(120, 99%, 99%) rgb(254, 255, 254) #FEFFFE	hsl(26, 4%, 39%) rgb(105, 100, 96) #696460	Title big size with words in bold Here is some text sample with some words in bold to illustrate the contrast.	5.83152	137.91
hsl(120, 99%, 99%) rgb(254, 255, 254) #FEFFFE	hsl(72, 99%, 20%) rgb(84, 105, 0) #546900	Title big size with words in bold Here is some text sample with some words in bold to illustrate the contrast.	6.16593	172.1
hsl(120, 99%, 99%) rgb(254, 255, 254) #FEFFFE	hsl(72, 82%, 22%) rgb(85, 105, 10) #55690A	Title big size with words in bold Here is some text sample with some words in bold to illustrate the contrast.	6.1412	171.1
hsl(120, 99%, 99%) rgb(254, 255, 254) #FEFFFE	hsl(72, 65%, 24%) rgb(88, 105, 22) #586916	Title big size with words in bold Here is some text sample with some words in bold to illustrate the contrast.	6.07727	168.03
hsl(120, 99%, 99%) rgb(254, 255, 254) #FEFFFE	hsl(72, 54%, 26%) rgb(89, 105, 31) #59691F	Title big size with words in bold Here is some text sample with some words in bold to illustrate the contrast.	6.04566	166.81
hsl(120, 99%, 99%) rgb(254, 255, 254) #FEFFFE	hsl(72, 41%, 29%) rgb(92, 105, 43) #5C692B	Title big size with words in bold Here is some text sample with some words in bold to illustrate the contrast.	5.96749	163.22
hsl(120, 99%, 99%) rgb(254, 255, 254) #FEFFFE	hsl(73, 33%, 30%) rgb(93, 105, 52) #5D6934	Title big size with words in bold Here is some text sample with some words in bold to illustrate the contrast.	5.92517	161.45
hsl(120, 99%, 99%) rgb(254, 255, 254) #FEFFFE	hsl(73, 24%, 33%) rgb(96, 105, 64) #606940	Title big size with words in bold Here is some text sample with some words in bold to illustrate the contrast.	5.83218	156.8
hsl(120, 99%, 99%) rgb(254, 255, 254) #FEFFFE	hsl(75, 17%, 35%) rgb(97, 105, 74) #61694A	Title big size with words in bold Here is some text sample with some words in bold to illustrate the contrast.	5.77468	153.78
hsl(120, 99%, 99%) rgb(254, 255, 254) #FEFFFE	hsl(74, 11%, 37%) rgb(100, 105, 84) #646954	Title big size with words in bold Here is some text sample with some words in bold to illustrate the contrast.	5.67653	147.8
hsl(120, 99%, 99%) rgb(254, 255, 254) #FEFFFE	hsl(86, 4%, 39%) rgb(101, 105, 96) #656960	Title big size with words in bold Here is some text sample with some words in bold to illustrate the contrast.	5.59712	142.03
hsl(120, 99%, 99%) rgb(254, 255, 254) #FEFFFE	hsl(107, 100%, 25%) rgb(28, 130, 0) #1C8200	Title big size with words in bold Here is some text sample with some words in bold to illustrate the contrast.	4.93805	227.06
hsl(120, 99%, 99%) rgb(254, 255, 254) #FEFFFE	hsl(107, 81%, 28%) rgb(38, 130, 13) #26820D	Title big size with words in bold Here is some text sample with some words in bold to illustrate the contrast.	4.89324	217.05
hsl(120, 99%, 99%) rgb(254, 255, 254) #FEFFFE	hsl(107, 65%, 30%) rgb(48, 130, 27) #30821B	Title big size with words in bold Here is some text sample with some words in bold to illustrate the contrast.	4.8331	206.92
hsl(120, 99%, 99%) rgb(254, 255, 254) #FEFFFE	hsl(106, 54%, 32%) rgb(58, 130, 38) #3A8226	Title big size with words in bold Here is some text sample with some words in bold to illustrate the contrast.	4.76018	196.61
hsl(120, 99%, 99%) rgb(254, 255, 254) #FEFFFE	hsl(108, 42%, 35%) rgb(68, 130, 53) #448235	Title big size with words in bold Here is some text sample with some words in bold to illustrate the contrast.	4.66551	185.66
hsl(120, 99%, 99%) rgb(254, 255, 254) #FEFFFE	hsl(107, 33%, 38%) rgb(79, 130, 65) #4F8241	Title big size with words in bold Here is some text sample with some words in bold to illustrate the contrast.	4.55238	173.1
hsl(120, 99%, 99%) rgb(254, 255, 254) #FEFFFE	hsl(108, 24%, 33%) rgb(72, 105, 64) #486940	Title big size with words in bold Here is some text sample with some words in bold to illustrate the contrast.	6.21603	181.34
hsl(120, 99%, 99%) rgb(254, 255, 254) #FEFFFE	hsl(108, 17%, 35%) rgb(80, 105, 74) #50694A	Title big size with words in bold Here is some text sample with some words in bold to illustrate the contrast.	6.05365	171.58
hsl(120, 99%, 99%) rgb(254, 255, 254) #FEFFFE	hsl(108, 11%, 37%) rgb(88, 105, 84) #586954	Title big size with words in bold Here is some text sample with some words in bold to illustrate the contrast.	5.87871	160.86
hsl(120, 99%, 99%) rgb(254, 255, 254) #FEFFFE	hsl(120, 4%, 39%) rgb(96, 105, 96) #606960	Title big size with words in bold Here is some text sample with some words in bold to illustrate the contrast.	5.6821	147.86

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

Products

Follow us

Language: