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(64, 83%, 37%) rgb(165, 176, 16) #A5B010	hsl(0, 0%, 97%) rgb(249, 249, 249) #F9F9F9	Title big size with words in bold Here is some text sample with some words in bold to illustrate the contrast.	2.26211

New contrast : 37 results (289 colors tested)

Valid contrasts
Foreground	Background	Sample	Ratio	Distance
hsl(64, 83%, 32%) rgb(141, 151, 14) #8D970E	hsl(0, 0%, 97%) rgb(249, 249, 249) #F9F9F9	Title big size with words in bold Here is some text sample with some words in bold to illustrate the contrast.	3.03801	30.88
hsl(64, 67%, 35%) rgb(142, 151, 29) #8E971D	hsl(0, 0%, 97%) rgb(249, 249, 249) #F9F9F9	Title big size with words in bold Here is some text sample with some words in bold to illustrate the contrast.	3.02464	29.47
hsl(64, 54%, 38%) rgb(143, 151, 44) #8F972C	hsl(0, 0%, 97%) rgb(249, 249, 249) #F9F9F9	Title big size with words in bold Here is some text sample with some words in bold to illustrate the contrast.	3.00804	16.29
hsl(64, 43%, 34%) rgb(120, 126, 50) #787E32	hsl(0, 0%, 97%) rgb(249, 249, 249) #F9F9F9	Title big size with words in bold Here is some text sample with some words in bold to illustrate the contrast.	4.13048	56.13
hsl(64, 34%, 36%) rgb(121, 126, 62) #797E3E	hsl(0, 0%, 97%) rgb(249, 249, 249) #F9F9F9	Title big size with words in bold Here is some text sample with some words in bold to illustrate the contrast.	4.09833	48.32
hsl(65, 24%, 39%) rgb(121, 126, 76) #797E4C	hsl(0, 0%, 97%) rgb(249, 249, 249) #F9F9F9	Title big size with words in bold Here is some text sample with some words in bold to illustrate the contrast.	4.06923	17.98
hsl(66, 17%, 41%) rgb(122, 126, 88) #7A7E58	hsl(0, 0%, 97%) rgb(249, 249, 249) #F9F9F9	Title big size with words in bold Here is some text sample with some words in bold to illustrate the contrast.	4.02727	55.26
hsl(67, 11%, 44%) rgb(123, 126, 101) #7B7E65	hsl(0, 0%, 97%) rgb(249, 249, 249) #F9F9F9	Title big size with words in bold Here is some text sample with some words in bold to illustrate the contrast.	3.97773	74.59
hsl(64, 5%, 47%) rgb(125, 126, 114) #7D7E72	hsl(0, 0%, 97%) rgb(249, 249, 249) #F9F9F9	Title big size with words in bold Here is some text sample with some words in bold to illustrate the contrast.	3.91153	90.94
hsl(28, 83%, 37%) rgb(176, 91, 16) #B05B10	hsl(0, 0%, 97%) rgb(249, 249, 249) #F9F9F9	Title big size with words in bold Here is some text sample with some words in bold to illustrate the contrast.	4.58538	84.94
hsl(100, 83%, 32%) rgb(59, 151, 14) #3B970E	hsl(0, 0%, 97%) rgb(249, 249, 249) #F9F9F9	Title big size with words in bold Here is some text sample with some words in bold to illustrate the contrast.	3.5498	106.46
hsl(100, 67%, 35%) rgb(69, 151, 29) #45971D	hsl(0, 0%, 97%) rgb(249, 249, 249) #F9F9F9	Title big size with words in bold Here is some text sample with some words in bold to illustrate the contrast.	3.5009	96.48
hsl(99, 54%, 38%) rgb(80, 151, 44) #50972C	hsl(0, 0%, 97%) rgb(249, 249, 249) #F9F9F9	Title big size with words in bold Here is some text sample with some words in bold to illustrate the contrast.	3.43655	84.71
hsl(100, 43%, 41%) rgb(90, 151, 60) #5A973C	hsl(0, 0%, 97%) rgb(249, 249, 249) #F9F9F9	Title big size with words in bold Here is some text sample with some words in bold to illustrate the contrast.	3.36551	70.63
hsl(100, 33%, 44%) rgb(100, 151, 75) #64974B	hsl(0, 0%, 97%) rgb(249, 249, 249) #F9F9F9	Title big size with words in bold Here is some text sample with some words in bold to illustrate the contrast.	3.28596	43.95
hsl(101, 24%, 47%) rgb(110, 151, 91) #6E975B	hsl(0, 0%, 97%) rgb(249, 249, 249) #F9F9F9	Title big size with words in bold Here is some text sample with some words in bold to illustrate the contrast.	3.19613	62.13
hsl(100, 17%, 50%) rgb(121, 151, 106) #79976A	hsl(0, 0%, 97%) rgb(249, 249, 249) #F9F9F9	Title big size with words in bold Here is some text sample with some words in bold to illustrate the contrast.	3.0935	85.64
hsl(100, 11%, 44%) rgb(109, 126, 101) #6D7E65	hsl(0, 0%, 97%) rgb(249, 249, 249) #F9F9F9	Title big size with words in bold Here is some text sample with some words in bold to illustrate the contrast.	4.13606	67.93
hsl(105, 5%, 47%) rgb(117, 126, 114) #757E72	hsl(0, 0%, 97%) rgb(249, 249, 249) #F9F9F9	Title big size with words in bold Here is some text sample with some words in bold to illustrate the contrast.	4.00227	89.03
hsl(135, 83%, 32%) rgb(14, 151, 50) #0E9732	hsl(0, 0%, 97%) rgb(249, 249, 249) #F9F9F9	Title big size with words in bold Here is some text sample with some words in bold to illustrate the contrast.	3.63227	150.65
hsl(136, 67%, 35%) rgb(29, 151, 62) #1D973E	hsl(0, 0%, 97%) rgb(249, 249, 249) #F9F9F9	Title big size with words in bold Here is some text sample with some words in bold to illustrate the contrast.	3.5949	134.51
hsl(136, 54%, 38%) rgb(44, 151, 73) #2C9749	hsl(0, 0%, 97%) rgb(249, 249, 249) #F9F9F9	Title big size with words in bold Here is some text sample with some words in bold to illustrate the contrast.	3.54286	117.01
hsl(135, 43%, 41%) rgb(60, 151, 84) #3C9754	hsl(0, 0%, 97%) rgb(249, 249, 249) #F9F9F9	Title big size with words in bold Here is some text sample with some words in bold to illustrate the contrast.	3.47083	95.05
hsl(135, 33%, 44%) rgb(75, 151, 95) #4B975F	hsl(0, 0%, 97%) rgb(249, 249, 249) #F9F9F9	Title big size with words in bold Here is some text sample with some words in bold to illustrate the contrast.	3.38583	63.13
hsl(135, 24%, 47%) rgb(91, 151, 106) #5B976A	hsl(0, 0%, 97%) rgb(249, 249, 249) #F9F9F9	Title big size with words in bold Here is some text sample with some words in bold to illustrate the contrast.	3.28083	67.54
hsl(134, 17%, 50%) rgb(106, 151, 117) #6A9775	hsl(0, 0%, 97%) rgb(249, 249, 249) #F9F9F9	Title big size with words in bold Here is some text sample with some words in bold to illustrate the contrast.	3.16789	93.19
hsl(134, 12%, 53%) rgb(121, 151, 128) #799780	hsl(0, 0%, 97%) rgb(249, 249, 249) #F9F9F9	Title big size with words in bold Here is some text sample with some words in bold to illustrate the contrast.	3.04459	109.25
hsl(130, 5%, 47%) rgb(114, 126, 116) #727E74	hsl(0, 0%, 97%) rgb(249, 249, 249) #F9F9F9	Title big size with words in bold Here is some text sample with some words in bold to illustrate the contrast.	4.02788	90.55
hsl(172, 83%, 32%) rgb(14, 151, 133) #0E9785	hsl(0, 0%, 97%) rgb(249, 249, 249) #F9F9F9	Title big size with words in bold Here is some text sample with some words in bold to illustrate the contrast.	3.4485	122.91
hsl(171, 67%, 35%) rgb(29, 151, 134) #1D9786	hsl(0, 0%, 97%) rgb(249, 249, 249) #F9F9F9	Title big size with words in bold Here is some text sample with some words in bold to illustrate the contrast.	3.42533	96.12
hsl(171, 54%, 38%) rgb(44, 151, 136) #2C9788	hsl(0, 0%, 97%) rgb(249, 249, 249) #F9F9F9	Title big size with words in bold Here is some text sample with some words in bold to illustrate the contrast.	3.38687	38.97
hsl(171, 43%, 41%) rgb(60, 151, 138) #3C978A	hsl(0, 0%, 97%) rgb(249, 249, 249) #F9F9F9	Title big size with words in bold Here is some text sample with some words in bold to illustrate the contrast.	3.33226	86.29
hsl(170, 33%, 44%) rgb(75, 151, 139) #4B978B	hsl(0, 0%, 97%) rgb(249, 249, 249) #F9F9F9	Title big size with words in bold Here is some text sample with some words in bold to illustrate the contrast.	3.27059	103.73
hsl(171, 24%, 47%) rgb(91, 151, 142) #5B978E	hsl(0, 0%, 97%) rgb(249, 249, 249) #F9F9F9	Title big size with words in bold Here is some text sample with some words in bold to illustrate the contrast.	3.18523	116.46
hsl(171, 17%, 50%) rgb(106, 151, 145) #6A9791	hsl(0, 0%, 97%) rgb(249, 249, 249) #F9F9F9	Title big size with words in bold Here is some text sample with some words in bold to illustrate the contrast.	3.09322	124.41
hsl(168, 11%, 44%) rgb(101, 126, 121) #657E79	hsl(0, 0%, 97%) rgb(249, 249, 249) #F9F9F9	Title big size with words in bold Here is some text sample with some words in bold to illustrate the contrast.	4.14355	91.68
hsl(170, 5%, 47%) rgb(114, 126, 124) #727E7C	hsl(0, 0%, 97%) rgb(249, 249, 249) #F9F9F9	Title big size with words in bold Here is some text sample with some words in bold to illustrate the contrast.	3.99652	100.07

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 : 37 results (289 colors tested)

Products

Follow us

Language: