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(45, 91%, 54%) rgb(245, 194, 35) #F5C223	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.	1.66357

New contrast : 31 results (252 colors tested)

Valid contrasts
Foreground	Background	Sample	Ratio	Distance
hsl(45, 76%, 37%) rgb(170, 134, 23) #AA8617	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.42487	86.16
hsl(44, 60%, 41%) rgb(170, 137, 42) #AA892A	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.32231	84.66
hsl(45, 49%, 44%) rgb(170, 143, 58) #AA8F3A	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.13466	81.55
hsl(44, 38%, 48%) rgb(170, 146, 76) #AA924C	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.03244	77.39
hsl(44, 29%, 43%) rgb(145, 128, 79) #91804F	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.88564	106.33
hsl(44, 21%, 46%) rgb(145, 132, 94) #91845E	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.70626	101.09
hsl(42, 14%, 49%) rgb(145, 134, 108) #91866C	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.60173	93.86
hsl(44, 9%, 52%) rgb(145, 139, 122) #918B7A	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.39915	79.78
hsl(34, 3%, 55%) rgb(145, 142, 138) #918E8A	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.2608	36.31
hsl(45, 92%, 34%) rgb(170, 130, 7) #AA8207	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.55611	89.04
hsl(9, 91%, 54%) rgb(245, 68, 35) #F54423	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.66261	126.0
hsl(82, 75%, 32%) rgb(99, 145, 20) #639114	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.75618	147.87
hsl(82, 60%, 35%) rgb(105, 145, 36) #699124	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.6996	141.97
hsl(81, 49%, 38%) rgb(110, 145, 49) #6E9131	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.64741	137.07
hsl(81, 38%, 41%) rgb(116, 145, 65) #749141	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.57807	130.79
hsl(80, 29%, 43%) rgb(122, 145, 79) #7A914F	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.50551	123.71
hsl(81, 21%, 46%) rgb(127, 145, 94) #7F915E	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.43463	115.86
hsl(81, 14%, 49%) rgb(132, 145, 108) #84916C	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.36118	105.42
hsl(83, 9%, 52%) rgb(136, 145, 122) #88917A	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.29255	91.02
hsl(94, 3%, 55%) rgb(141, 145, 138) #8D918A	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.20625	53.11
hsl(82, 92%, 29%) rgb(93, 145, 6) #5D9106	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.80557	154.02
hsl(117, 76%, 37%) rgb(30, 170, 23) #1EAA17	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.08032	215.11
hsl(118, 60%, 41%) rgb(46, 170, 42) #2EAA2A	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.0437	199.11
hsl(116, 49%, 38%) rgb(54, 145, 49) #369131	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.99896	192.04
hsl(118, 38%, 41%) rgb(67, 145, 65) #439141	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.91415	178.95
hsl(117, 29%, 43%) rgb(82, 145, 79) #52914F	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.80309	163.41
hsl(118, 21%, 46%) rgb(95, 145, 94) #5F915E	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.68526	148.69
hsl(115, 14%, 49%) rgb(111, 145, 108) #6F916C	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.5338	128.76
hsl(120, 9%, 52%) rgb(122, 145, 122) #7A917A	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.40981	109.7
hsl(120, 3%, 55%) rgb(138, 145, 138) #8A918A	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.23186	62.99
hsl(117, 92%, 34%) rgb(15, 170, 7) #0FAA07	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.10042	230.23

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 : 31 results (252 colors tested)

Products

Follow us

Language: