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(76, 73%, 43%) rgb(149, 193, 30) #95C11E	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.	2.11594

New contrast : 41 results (380 colors tested)

Valid contrasts
Foreground	Background	Sample	Ratio	Distance
hsl(76, 73%, 26%) rgb(90, 118, 18) #5A7612	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.	5.20467	85.68
hsl(76, 59%, 29%) rgb(94, 118, 30) #5E761E	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.	5.13943	83.79
hsl(77, 48%, 31%) rgb(96, 118, 41) #607629	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.	5.09616	82.89
hsl(77, 38%, 33%) rgb(99, 118, 53) #637635	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.	5.03198	81.17
hsl(76, 29%, 35%) rgb(103, 118, 64) #677640	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.95036	78.29
hsl(78, 21%, 38%) rgb(105, 118, 76) #69764C	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.88783	74.27
hsl(79, 15%, 40%) rgb(108, 118, 87) #6C7657	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.8092	67.36
hsl(75, 8%, 42%) rgb(113, 118, 99) #717663	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.69412	51.93
hsl(82, 3%, 44%) rgb(115, 118, 110) #73766E	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.61996	37.04
hsl(76, 88%, 24%) rgb(87, 118, 7) #577607	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.	5.25041	87.61
hsl(40, 73%, 32%) rgb(143, 103, 22) #8F6716	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.	5.09757	90.03
hsl(39, 59%, 35%) rgb(143, 107, 36) #8F6B24	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.88772	86.0
hsl(39, 48%, 37%) rgb(143, 111, 50) #8F6F32	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.67939	81.61
hsl(37, 38%, 33%) rgb(118, 94, 53) #765E35	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.	6.13533	99.6
hsl(38, 29%, 35%) rgb(118, 99, 64) #766340	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.	5.78659	93.64
hsl(39, 21%, 38%) rgb(118, 104, 76) #76684C	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.	5.44776	86.06
hsl(40, 15%, 40%) rgb(118, 108, 87) #766C57	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.	5.1814	77.12
hsl(37, 8%, 42%) rgb(118, 111, 99) #766F63	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.97129	63.22
hsl(30, 3%, 44%) rgb(118, 114, 110) #76726E	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.77013	22.12
hsl(39, 89%, 29%) rgb(143, 98, 8) #8F6208	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.	5.35918	95.4
hsl(4, 73%, 43%) rgb(193, 41, 30) #C1291E	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.	5.82781	150.76
hsl(112, 73%, 26%) rgb(30, 118, 18) #1E7612	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.	5.74506	128.24
hsl(112, 59%, 29%) rgb(41, 118, 30) #29761E	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.	5.66893	118.92
hsl(111, 48%, 31%) rgb(52, 118, 41) #347629	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.	5.57117	110.06
hsl(111, 38%, 33%) rgb(62, 118, 53) #3E7635	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.	5.45794	102.22
hsl(112, 29%, 35%) rgb(71, 118, 64) #477640	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.	5.33899	94.99
hsl(112, 21%, 38%) rgb(81, 118, 76) #51764C	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.	5.19082	86.13
hsl(112, 15%, 40%) rgb(91, 118, 87) #5B7657	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.	5.03135	75.58
hsl(110, 8%, 42%) rgb(102, 118, 99) #667663	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.84262	58.21
hsl(105, 3%, 44%) rgb(112, 118, 110) #70766E	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.66099	34.05
hsl(112, 88%, 24%) rgb(21, 118, 7) #157607	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.	5.79098	136.28
hsl(148, 73%, 26%) rgb(18, 118, 65) #127641	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.	5.68578	137.98
hsl(147, 59%, 29%) rgb(30, 118, 71) #1E7647	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.	5.61863	126.79
hsl(147, 48%, 31%) rgb(41, 118, 76) #29764C	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.	5.54087	116.58
hsl(147, 38%, 33%) rgb(53, 118, 83) #357653	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.	5.42964	105.0
hsl(148, 29%, 35%) rgb(64, 118, 90) #40765A	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.	5.30704	93.6
hsl(145, 21%, 38%) rgb(76, 118, 94) #4C765E	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.	5.17203	81.87
hsl(147, 15%, 40%) rgb(87, 118, 101) #577665	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.	5.01848	67.11
hsl(148, 8%, 42%) rgb(99, 118, 108) #63766C	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.84044	41.66
hsl(142, 3%, 44%) rgb(110, 118, 113) #6E7671	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.67412	44.91
hsl(147, 88%, 24%) rgb(7, 118, 58) #07763A	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.	5.73535	148.33

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 : 41 results (380 colors tested)

Products

Follow us

Language: