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) #FFFFFF	hsl(23, 100%, 50%) rgb(255, 102, 0) #FF6600	Title big size with words in bold Here is some text sample with some words in bold to illustrate the contrast.	2.93602

New contrast : 30 results (279 colors tested)

Valid contrasts
Foreground	Background	Sample	Ratio	Distance
hsl(0, 0%, 100%) rgb(255, 255, 255) #FFFFFF	hsl(23, 100%, 35%) rgb(180, 72, 0) #B44800	Title big size with words in bold Here is some text sample with some words in bold to illustrate the contrast.	5.42972	76.57
hsl(0, 0%, 100%) rgb(255, 255, 255) #FFFFFF	hsl(23, 81%, 38%) rgb(180, 81, 18) #B45112	Title big size with words in bold Here is some text sample with some words in bold to illustrate the contrast.	5.08922	75.2
hsl(0, 0%, 100%) rgb(255, 255, 255) #FFFFFF	hsl(23, 65%, 42%) rgb(180, 93, 37) #B45D25	Title big size with words in bold Here is some text sample with some words in bold to illustrate the contrast.	4.63258	71.92
hsl(0, 0%, 100%) rgb(255, 255, 255) #FFFFFF	hsl(23, 54%, 39%) rgb(155, 88, 46) #9B582E	Title big size with words in bold Here is some text sample with some words in bold to illustrate the contrast.	5.48438	96.74
hsl(0, 0%, 100%) rgb(255, 255, 255) #FFFFFF	hsl(23, 41%, 42%) rgb(155, 99, 64) #9B6340	Title big size with words in bold Here is some text sample with some words in bold to illustrate the contrast.	4.93829	90.36
hsl(0, 0%, 100%) rgb(255, 255, 255) #FFFFFF	hsl(22, 33%, 45%) rgb(155, 107, 78) #9B6B4E	Title big size with words in bold Here is some text sample with some words in bold to illustrate the contrast.	4.55848	80.69
hsl(0, 0%, 100%) rgb(255, 255, 255) #FFFFFF	hsl(23, 24%, 40%) rgb(130, 99, 79) #82634F	Title big size with words in bold Here is some text sample with some words in bold to illustrate the contrast.	5.45908	113.45
hsl(0, 0%, 100%) rgb(255, 255, 255) #FFFFFF	hsl(20, 17%, 43%) rgb(130, 105, 92) #82695C	Title big size with words in bold Here is some text sample with some words in bold to illustrate the contrast.	5.09173	105.51
hsl(0, 0%, 100%) rgb(255, 255, 255) #FFFFFF	hsl(23, 11%, 45%) rgb(130, 114, 104) #827268	Title big size with words in bold Here is some text sample with some words in bold to illustrate the contrast.	4.60932	93.85
hsl(0, 0%, 100%) rgb(255, 255, 255) #FFFFFF	hsl(13, 4%, 39%) rgb(105, 98, 96) #696260	Title big size with words in bold Here is some text sample with some words in bold to illustrate the contrast.	5.97163	135.55
hsl(0, 0%, 100%) rgb(255, 255, 255) #FFFFFF	hsl(60, 99%, 20%) rgb(105, 105, 0) #696900	Title big size with words in bold Here is some text sample with some words in bold to illustrate the contrast.	5.79905	150.0
hsl(0, 0%, 100%) rgb(255, 255, 255) #FFFFFF	hsl(60, 82%, 22%) rgb(105, 105, 10) #69690A	Title big size with words in bold Here is some text sample with some words in bold to illustrate the contrast.	5.79204	149.98
hsl(0, 0%, 100%) rgb(255, 255, 255) #FFFFFF	hsl(60, 65%, 24%) rgb(105, 105, 22) #696916	Title big size with words in bold Here is some text sample with some words in bold to illustrate the contrast.	5.78056	149.84
hsl(0, 0%, 100%) rgb(255, 255, 255) #FFFFFF	hsl(60, 54%, 26%) rgb(105, 105, 31) #69691F	Title big size with words in bold Here is some text sample with some words in bold to illustrate the contrast.	5.76754	149.56
hsl(0, 0%, 100%) rgb(255, 255, 255) #FFFFFF	hsl(60, 41%, 29%) rgb(105, 105, 43) #69692B	Title big size with words in bold Here is some text sample with some words in bold to illustrate the contrast.	5.74372	148.81
hsl(0, 0%, 100%) rgb(255, 255, 255) #FFFFFF	hsl(60, 33%, 30%) rgb(105, 105, 52) #696934	Title big size with words in bold Here is some text sample with some words in bold to illustrate the contrast.	5.72072	147.89
hsl(0, 0%, 100%) rgb(255, 255, 255) #FFFFFF	hsl(60, 24%, 33%) rgb(105, 105, 64) #696940	Title big size with words in bold Here is some text sample with some words in bold to illustrate the contrast.	5.68287	146.01
hsl(0, 0%, 100%) rgb(255, 255, 255) #FFFFFF	hsl(60, 17%, 35%) rgb(105, 105, 74) #69694A	Title big size with words in bold Here is some text sample with some words in bold to illustrate the contrast.	5.64491	143.74
hsl(0, 0%, 100%) rgb(255, 255, 255) #FFFFFF	hsl(60, 11%, 37%) rgb(105, 105, 84) #696954	Title big size with words in bold Here is some text sample with some words in bold to illustrate the contrast.	5.60105	140.65
hsl(0, 0%, 100%) rgb(255, 255, 255) #FFFFFF	hsl(60, 4%, 39%) rgb(105, 105, 96) #696960	Title big size with words in bold Here is some text sample with some words in bold to illustrate the contrast.	5.54062	135.54
hsl(0, 0%, 100%) rgb(255, 255, 255) #FFFFFF	hsl(95, 100%, 25%) rgb(52, 130, 0) #348200	Title big size with words in bold Here is some text sample with some words in bold to illustrate the contrast.	4.83975	202.82
hsl(0, 0%, 100%) rgb(255, 255, 255) #FFFFFF	hsl(96, 81%, 28%) rgb(58, 130, 13) #3A820D	Title big size with words in bold Here is some text sample with some words in bold to illustrate the contrast.	4.79586	196.79
hsl(0, 0%, 100%) rgb(255, 255, 255) #FFFFFF	hsl(96, 65%, 30%) rgb(67, 130, 27) #43821B	Title big size with words in bold Here is some text sample with some words in bold to illustrate the contrast.	4.72171	187.61
hsl(0, 0%, 100%) rgb(255, 255, 255) #FFFFFF	hsl(96, 54%, 32%) rgb(74, 130, 38) #4A8226	Title big size with words in bold Here is some text sample with some words in bold to illustrate the contrast.	4.65404	180.21
hsl(0, 0%, 100%) rgb(255, 255, 255) #FFFFFF	hsl(96, 42%, 35%) rgb(83, 130, 53) #538235	Title big size with words in bold Here is some text sample with some words in bold to illustrate the contrast.	4.55308	170.05
hsl(0, 0%, 100%) rgb(255, 255, 255) #FFFFFF	hsl(97, 33%, 30%) rgb(72, 105, 52) #486934	Title big size with words in bold Here is some text sample with some words in bold to illustrate the contrast.	6.2766	181.59
hsl(0, 0%, 100%) rgb(255, 255, 255) #FFFFFF	hsl(96, 24%, 33%) rgb(80, 105, 64) #506940	Title big size with words in bold Here is some text sample with some words in bold to illustrate the contrast.	6.11219	172.1
hsl(0, 0%, 100%) rgb(255, 255, 255) #FFFFFF	hsl(100, 17%, 35%) rgb(84, 105, 74) #54694A	Title big size with words in bold Here is some text sample with some words in bold to illustrate the contrast.	6.00605	166.25
hsl(0, 0%, 100%) rgb(255, 255, 255) #FFFFFF	hsl(97, 11%, 37%) rgb(92, 105, 84) #5C6954	Title big size with words in bold Here is some text sample with some words in bold to illustrate the contrast.	5.82733	155.2
hsl(0, 0%, 100%) rgb(255, 255, 255) #FFFFFF	hsl(106, 4%, 39%) rgb(98, 105, 96) #626960	Title big size with words in bold Here is some text sample with some words in bold to illustrate the contrast.	5.6621	143.99

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

Products

Follow us

Language: