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 : 67 results (1,477,840 colors tested)

Valid contrasts
Foreground	Background	Sample	Ratio	Distance
hsl(40, 78%, 42%) rgb(194, 139, 23) #C28B17	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.00031	67.0
hsl(40, 79%, 42%) rgb(194, 139, 22) #C28B16	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.00064	67.03
hsl(40, 80%, 42%) rgb(194, 139, 21) #C28B15	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.00097	67.07
hsl(42, 85%, 40%) rgb(192, 140, 15) #C08C0F	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.00025	67.99
hsl(42, 86%, 40%) rgb(192, 140, 14) #C08C0E	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.00049	68.08
hsl(42, 87%, 40%) rgb(192, 140, 13) #C08C0D	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.00071	68.18
hsl(42, 88%, 40%) rgb(192, 140, 12) #C08C0C	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.00093	68.29
hsl(44, 98%, 37%) rgb(190, 141, 1) #BE8D01	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.00008	70.78
hsl(41, 68%, 43%) rgb(189, 141, 35) #BD8D23	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.00086	68.72
hsl(41, 68%, 44%) rgb(189, 141, 36) #BD8D24	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.00035	68.72
hsl(42, 73%, 42%) rgb(187, 142, 29) #BB8E1D	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.00004	69.52
hsl(43, 73%, 42%) rgb(187, 142, 28) #BB8E1C	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.00046	69.52
hsl(43, 74%, 41%) rgb(187, 142, 27) #BB8E1B	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.00086	69.54
hsl(41, 59%, 45%) rgb(186, 142, 47) #BA8E2F	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.00083	70.09
hsl(40, 58%, 45%) rgb(186, 142, 48) #BA8E30	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.00013	70.05
hsl(45, 83%, 39%) rgb(185, 143, 17) #B98F11	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.00003	70.77
hsl(45, 84%, 39%) rgb(185, 143, 16) #B98F10	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.00029	70.84
hsl(45, 85%, 39%) rgb(185, 143, 15) #B98F0F	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.00054	70.92
hsl(45, 85%, 39%) rgb(185, 143, 14) #B98F0E	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.00078	71.0
hsl(42, 64%, 43%) rgb(184, 143, 40) #B88F28	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.00099	71.11
hsl(42, 63%, 44%) rgb(184, 143, 41) #B88F29	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.0004	71.1
hsl(41, 53%, 46%) rgb(183, 143, 56) #B78F38	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.0002	71.25
hsl(44, 70%, 41%) rgb(182, 144, 32) #B69020	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.00035	72.12
hsl(44, 70%, 41%) rgb(182, 144, 31) #B6901F	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.00081	72.12
hsl(43, 57%, 45%) rgb(181, 144, 49) #B59031	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.00068	72.71
hsl(47, 81%, 38%) rgb(180, 145, 18) #B49112	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.00019	73.51
hsl(47, 82%, 38%) rgb(180, 145, 17) #B49111	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.00047	73.56
hsl(47, 83%, 38%) rgb(180, 145, 16) #B49110	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.00073	73.63
hsl(47, 84%, 38%) rgb(180, 145, 15) #B4910F	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.00098	73.7
hsl(41, 48%, 47%) rgb(180, 144, 62) #B4903E	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.0002	72.43
hsl(45, 62%, 43%) rgb(179, 145, 41) #B39129	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.00046	73.98
hsl(43, 52%, 45%) rgb(178, 145, 55) #B29137	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.00072	74.31
hsl(47, 71%, 40%) rgb(177, 146, 30) #B1921E	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.00012	75.19
hsl(47, 71%, 40%) rgb(177, 146, 29) #B1921D	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.00055	75.2
hsl(47, 72%, 40%) rgb(177, 146, 28) #B1921C	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.00097	75.21
hsl(42, 45%, 47%) rgb(177, 145, 66) #B19142	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.00075	73.82
hsl(46, 57%, 43%) rgb(176, 146, 47) #B0922F	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.00059	75.91
hsl(41, 40%, 49%) rgb(176, 145, 75) #B0914B	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.00095	72.57
hsl(49, 91%, 35%) rgb(175, 147, 8) #AF9308	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.00009	77.56
hsl(49, 92%, 35%) rgb(175, 147, 7) #AF9307	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.00028	77.68
hsl(50, 93%, 35%) rgb(175, 147, 6) #AF9306	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.00047	77.82
hsl(50, 94%, 35%) rgb(175, 147, 5) #AF9305	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.00066	77.96
hsl(50, 95%, 35%) rgb(175, 147, 4) #AF9304	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.00084	78.11
hsl(44, 48%, 46%) rgb(175, 146, 60) #AF923C	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.00017	75.94
hsl(40, 36%, 50%) rgb(175, 145, 83) #AF9153	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.00092	70.48
hsl(48, 65%, 41%) rgb(174, 147, 36) #AE9324	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.00056	77.29
hsl(48, 64%, 41%) rgb(174, 147, 37) #AE9325	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.00003	77.29
hsl(43, 42%, 47%) rgb(174, 146, 70) #AE9246	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.00012	75.22
hsl(47, 54%, 43%) rgb(173, 147, 51) #AD9333	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.0008	77.91
hsl(47, 53%, 44%) rgb(173, 147, 52) #AD9334	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.00003	77.87
hsl(42, 37%, 49%) rgb(173, 146, 78) #AD924E	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.00068	73.95
hsl(46, 46%, 46%) rgb(172, 147, 63) #AC933F	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.00026	77.8
hsl(49, 62%, 41%) rgb(171, 148, 40) #AB9428	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.00078	79.5
hsl(49, 61%, 41%) rgb(171, 148, 41) #AB9429	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.00019	79.49
hsl(45, 40%, 47%) rgb(171, 147, 72) #AB9348	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.00058	77.1
hsl(41, 31%, 51%) rgb(171, 146, 92) #AB925C	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.00099	69.15
hsl(48, 51%, 43%) rgb(170, 148, 54) #AA9436	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.00067	80.02
hsl(44, 36%, 49%) rgb(170, 147, 80) #AA9350	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.00063	75.75
hsl(47, 44%, 45%) rgb(169, 148, 65) #A99441	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.0003	79.86
hsl(43, 32%, 50%) rgb(169, 147, 87) #A99357	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.00081	73.81
hsl(47, 38%, 47%) rgb(168, 148, 74) #A8944A	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.00008	79.08
hsl(50, 49%, 43%) rgb(167, 149, 56) #A79538	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.00035	82.25
hsl(46, 34%, 48%) rgb(167, 148, 81) #A79451	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.00091	78.0
hsl(49, 43%, 45%) rgb(166, 149, 66) #A69542	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.00041	82.15
hsl(46, 30%, 49%) rgb(166, 148, 88) #A69458	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.00074	76.15
hsl(41, 25%, 53%) rgb(166, 147, 105) #A69369	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.00048	63.32
hsl(49, 38%, 46%) rgb(165, 149, 74) #A5954A	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.00097	81.62

Not satisfied ?

Gimme a range of colors

tanaguru contrast finder

Find me the good constrasts, for web accessibility, between these two colors:

Old contrast

New contrast : 67 results (1,477,840 colors tested)

Products

Follow us

Language: