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(14, 79%, 78%) rgb(244, 179, 158) #F4B39E	hsl(0, 0%, 100%) rgb(255, 255, 255) #FFF	Title big size with words in bold Here is some text sample with some words in bold to illustrate the contrast.	1.78141

New contrast : 56 results (2,310,120 colors tested)

Valid contrasts
Foreground	Background	Sample	Ratio	Distance
hsl(10, 85%, 62%) rgb(241, 108, 79) #F16C4F	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.00082	94.76
hsl(10, 81%, 62%) rgb(237, 111, 83) #ED6F53	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.00018	90.31
hsl(10, 77%, 62%) rgb(234, 113, 87) #EA7157	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.00079	86.46
hsl(12, 77%, 62%) rgb(233, 114, 84) #E97254	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.00014	87.99
hsl(13, 76%, 61%) rgb(232, 115, 80) #E87350	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	90.39
hsl(10, 74%, 62%) rgb(231, 115, 90) #E7735A	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	83.34
hsl(14, 73%, 60%) rgb(229, 117, 82) #E57552	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.00088	87.97
hsl(11, 71%, 62%) rgb(228, 117, 92) #E4755C	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	80.92
hsl(12, 71%, 61%) rgb(227, 118, 88) #E37658	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	83.15
hsl(9, 68%, 63%) rgb(226, 118, 97) #E27661	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	77.18
hsl(17, 71%, 59%) rgb(225, 120, 78) #E1784E	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	89.8
hsl(11, 68%, 62%) rgb(225, 119, 93) #E1775D	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	79.24
hsl(18, 68%, 58%) rgb(222, 122, 78) #DE7A4E	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.00011	89.12
hsl(13, 66%, 61%) rgb(222, 121, 93) #DE795D	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	78.32
hsl(15, 66%, 60%) rgb(221, 122, 88) #DD7A58	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.00036	81.45
hsl(17, 66%, 59%) rgb(220, 123, 82) #DC7B52	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.00079	85.65
hsl(12, 63%, 62%) rgb(220, 122, 97) #DC7A61	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	75.24
hsl(14, 63%, 60%) rgb(219, 123, 92) #DB7B5C	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.00011	78.23
hsl(17, 64%, 59%) rgb(218, 124, 86) #DA7C56	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	82.29
hsl(11, 61%, 62%) rgb(218, 123, 100) #DA7B64	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	72.96
hsl(14, 61%, 61%) rgb(217, 124, 95) #D97C5F	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	75.83
hsl(11, 59%, 62%) rgb(216, 124, 103) #D87C67	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	70.79
hsl(19, 62%, 58%) rgb(215, 126, 83) #D77E53	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.00057	84.11
hsl(13, 59%, 61%) rgb(215, 125, 98) #D77D62	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.00033	73.55
hsl(16, 59%, 60%) rgb(214, 126, 92) #D67E5C	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	77.38
hsl(19, 60%, 58%) rgb(213, 127, 86) #D57F56	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	81.62
hsl(19, 58%, 58%) rgb(211, 128, 88) #D38058	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.0007	79.98
hsl(13, 53%, 61%) rgb(209, 128, 104) #D18068	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	69.31
hsl(16, 53%, 60%) rgb(208, 129, 98) #D08162	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	72.91
hsl(10, 50%, 62%) rgb(208, 128, 111) #D0806F	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	65.66
hsl(10, 48%, 62%) rgb(206, 129, 112) #CE8170	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	65.2
hsl(17, 50%, 59%) rgb(204, 131, 100) #CC8364	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.00085	71.77
hsl(11, 47%, 62%) rgb(204, 130, 113) #CC8271	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.00044	64.85
hsl(15, 48%, 60%) rgb(203, 131, 107) #CB836B	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	67.84
hsl(18, 48%, 59%) rgb(202, 132, 101) #CA8465	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.00011	71.34
hsl(19, 47%, 59%) rgb(200, 133, 101) #C88565	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.00051	71.64
hsl(12, 43%, 61%) rgb(200, 132, 114) #C88472	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.00027	64.97
hsl(16, 44%, 60%) rgb(199, 133, 108) #C7856C	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.00001	67.93
hsl(13, 42%, 61%) rgb(198, 133, 114) #C68572	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.00037	65.41
hsl(19, 42%, 59%) rgb(195, 135, 107) #C3876B	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	69.48
hsl(16, 39%, 60%) rgb(194, 135, 113) #C28771	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.0009	67.04
hsl(12, 37%, 61%) rgb(193, 135, 119) #C18777	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.00023	65.2
hsl(9, 35%, 61%) rgb(192, 135, 124) #C0877C	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.00089	64.24
hsl(14, 36%, 60%) rgb(191, 136, 118) #BF8876	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	66.37
hsl(16, 35%, 60%) rgb(189, 137, 117) #BD8975	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	67.63
hsl(10, 30%, 61%) rgb(187, 137, 127) #BB897F	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	66.12
hsl(15, 32%, 60%) rgb(186, 138, 121) #BA8A79	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	68.02
hsl(12, 29%, 60%) rgb(185, 138, 126) #B98A7E	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.00021	67.46
hsl(11, 26%, 60%) rgb(182, 139, 129) #B68B81	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	68.87
hsl(14, 26%, 60%) rgb(180, 140, 127) #B48C7F	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	70.56
hsl(18, 25%, 59%) rgb(178, 141, 125) #B28D7D	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.00039	72.32
hsl(18, 23%, 59%) rgb(175, 142, 127) #AF8E7F	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	74.23
hsl(15, 18%, 59%) rgb(171, 143, 133) #AB8F85	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.00032	76.7
hsl(10, 16%, 60%) rgb(170, 143, 137) #AA8F89	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	77.26
hsl(17, 16%, 59%) rgb(168, 144, 134) #A89086	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	79.14
hsl(12, 14%, 59%) rgb(167, 144, 138) #A7908A	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	79.76

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 : 56 results (2,310,120 colors tested)

Products

Follow us

Language: