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(240, 53%, 43%) rgb(51, 51, 170) #3333AA	hsl(0, 100%, 10%) rgb(51, 0, 0) #330000	Title big size with words in bold Here is some text sample with some words in bold to illustrate the contrast.	1.92393

New contrast : 39 results (5,080,320 colors tested)

Valid contrasts
Foreground	Background	Sample	Ratio	Distance
hsl(235, 87%, 67%) rgb(100, 111, 245) #646FF5	hsl(0, 100%, 10%) rgb(51, 0, 0) #330000	Title big size with words in bold Here is some text sample with some words in bold to illustrate the contrast.	4.50064	91.08
hsl(236, 94%, 69%) rgb(101, 109, 251) #656DFB	hsl(0, 100%, 10%) rgb(51, 0, 0) #330000	Title big size with words in bold Here is some text sample with some words in bold to illustrate the contrast.	4.50033	94.78
hsl(235, 86%, 67%) rgb(101, 111, 244) #656FF4	hsl(0, 100%, 10%) rgb(51, 0, 0) #330000	Title big size with words in bold Here is some text sample with some words in bold to illustrate the contrast.	4.50002	90.7
hsl(239, 97%, 70%) rgb(106, 107, 253) #6A6BFD	hsl(0, 100%, 10%) rgb(51, 0, 0) #330000	Title big size with words in bold Here is some text sample with some words in bold to illustrate the contrast.	4.50075	97.04
hsl(240, 96%, 70%) rgb(107, 107, 252) #6B6BFC	hsl(0, 100%, 10%) rgb(51, 0, 0) #330000	Title big size with words in bold Here is some text sample with some words in bold to illustrate the contrast.	4.50041	96.64
hsl(238, 79%, 67%) rgb(107, 111, 238) #6B6FEE	hsl(0, 100%, 10%) rgb(51, 0, 0) #330000	Title big size with words in bold Here is some text sample with some words in bold to illustrate the contrast.	4.5001	89.05
hsl(240, 94%, 70%) rgb(108, 107, 251) #6C6BFB	hsl(0, 100%, 10%) rgb(51, 0, 0) #330000	Title big size with words in bold Here is some text sample with some words in bold to illustrate the contrast.	4.50025	96.27
hsl(238, 78%, 67%) rgb(108, 111, 237) #6C6FED	hsl(0, 100%, 10%) rgb(51, 0, 0) #330000	Title big size with words in bold Here is some text sample with some words in bold to illustrate the contrast.	4.50076	88.87
hsl(236, 62%, 64%) rgb(108, 115, 221) #6C73DD	hsl(0, 100%, 10%) rgb(51, 0, 0) #330000	Title big size with words in bold Here is some text sample with some words in bold to illustrate the contrast.	4.50052	83.39
hsl(240, 93%, 70%) rgb(109, 107, 250) #6D6BFA	hsl(0, 100%, 10%) rgb(51, 0, 0) #330000	Title big size with words in bold Here is some text sample with some words in bold to illustrate the contrast.	4.50028	95.93
hsl(237, 64%, 65%) rgb(109, 114, 224) #6D72E0	hsl(0, 100%, 10%) rgb(51, 0, 0) #330000	Title big size with words in bold Here is some text sample with some words in bold to illustrate the contrast.	4.50009	84.47
hsl(241, 92%, 69%) rgb(110, 107, 249) #6E6BF9	hsl(0, 100%, 10%) rgb(51, 0, 0) #330000	Title big size with words in bold Here is some text sample with some words in bold to illustrate the contrast.	4.50049	95.61
hsl(238, 67%, 66%) rgb(110, 113, 227) #6E71E3	hsl(0, 100%, 10%) rgb(51, 0, 0) #330000	Title big size with words in bold Here is some text sample with some words in bold to illustrate the contrast.	4.50073	85.68
hsl(241, 90%, 69%) rgb(111, 107, 248) #6F6BF8	hsl(0, 100%, 10%) rgb(51, 0, 0) #330000	Title big size with words in bold Here is some text sample with some words in bold to illustrate the contrast.	4.50089	95.32
hsl(240, 82%, 68%) rgb(111, 109, 241) #6F6DF1	hsl(0, 100%, 10%) rgb(51, 0, 0) #330000	Title big size with words in bold Here is some text sample with some words in bold to illustrate the contrast.	4.50009	91.62
hsl(236, 49%, 62%) rgb(112, 117, 207) #7075CF	hsl(0, 100%, 10%) rgb(51, 0, 0) #330000	Title big size with words in bold Here is some text sample with some words in bold to illustrate the contrast.	4.50091	82.68
hsl(235, 42%, 60%) rgb(112, 119, 197) #7077C5	hsl(0, 100%, 10%) rgb(51, 0, 0) #330000	Title big size with words in bold Here is some text sample with some words in bold to illustrate the contrast.	4.50043	82.48
hsl(241, 74%, 67%) rgb(114, 110, 234) #726EEA	hsl(0, 100%, 10%) rgb(51, 0, 0) #330000	Title big size with words in bold Here is some text sample with some words in bold to illustrate the contrast.	4.50046	89.53
hsl(238, 50%, 63%) rgb(114, 116, 209) #7274D1	hsl(0, 100%, 10%) rgb(51, 0, 0) #330000	Title big size with words in bold Here is some text sample with some words in bold to illustrate the contrast.	4.50079	83.59
hsl(243, 89%, 69%) rgb(115, 106, 247) #736AF7	hsl(0, 100%, 10%) rgb(51, 0, 0) #330000	Title big size with words in bold Here is some text sample with some words in bold to illustrate the contrast.	4.50021	96.01
hsl(242, 69%, 66%) rgb(115, 111, 229) #736FE5	hsl(0, 100%, 10%) rgb(51, 0, 0) #330000	Title big size with words in bold Here is some text sample with some words in bold to illustrate the contrast.	4.50065	88.09
hsl(241, 65%, 66%) rgb(115, 112, 225) #7370E1	hsl(0, 100%, 10%) rgb(51, 0, 0) #330000	Title big size with words in bold Here is some text sample with some words in bold to illustrate the contrast.	4.5004	86.87
hsl(243, 80%, 68%) rgb(116, 108, 239) #746CEF	hsl(0, 100%, 10%) rgb(51, 0, 0) #330000	Title big size with words in bold Here is some text sample with some words in bold to illustrate the contrast.	4.50052	92.38
hsl(237, 36%, 60%) rgb(116, 119, 191) #7477BF	hsl(0, 100%, 10%) rgb(51, 0, 0) #330000	Title big size with words in bold Here is some text sample with some words in bold to illustrate the contrast.	4.50019	84.26
hsl(241, 54%, 64%) rgb(117, 114, 214) #7572D6	hsl(0, 100%, 10%) rgb(51, 0, 0) #330000	Title big size with words in bold Here is some text sample with some words in bold to illustrate the contrast.	4.50078	85.4
hsl(236, 28%, 57%) rgb(117, 121, 178) #7579B2	hsl(0, 100%, 10%) rgb(51, 0, 0) #330000	Title big size with words in bold Here is some text sample with some words in bold to illustrate the contrast.	4.50068	85.77
hsl(244, 73%, 67%) rgb(118, 109, 233) #766DE9	hsl(0, 100%, 10%) rgb(51, 0, 0) #330000	Title big size with words in bold Here is some text sample with some words in bold to illustrate the contrast.	4.50086	90.69
hsl(242, 57%, 64%) rgb(118, 113, 217) #7671D9	hsl(0, 100%, 10%) rgb(51, 0, 0) #330000	Title big size with words in bold Here is some text sample with some words in bold to illustrate the contrast.	4.50078	86.31
hsl(244, 64%, 65%) rgb(119, 111, 224) #776FE0	hsl(0, 100%, 10%) rgb(51, 0, 0) #330000	Title big size with words in bold Here is some text sample with some words in bold to illustrate the contrast.	4.50096	88.28
hsl(236, 21%, 56%) rgb(119, 122, 168) #777AA8	hsl(0, 100%, 10%) rgb(51, 0, 0) #330000	Title big size with words in bold Here is some text sample with some words in bold to illustrate the contrast.	4.50018	87.6
hsl(241, 35%, 60%) rgb(120, 118, 190) #7876BE	hsl(0, 100%, 10%) rgb(51, 0, 0) #330000	Title big size with words in bold Here is some text sample with some words in bold to illustrate the contrast.	4.50009	86.05
hsl(241, 26%, 58%) rgb(121, 120, 177) #7978B1	hsl(0, 100%, 10%) rgb(51, 0, 0) #330000	Title big size with words in bold Here is some text sample with some words in bold to illustrate the contrast.	4.50089	87.58
hsl(242, 29%, 58%) rgb(122, 119, 181) #7A77B5	hsl(0, 100%, 10%) rgb(51, 0, 0) #330000	Title big size with words in bold Here is some text sample with some words in bold to illustrate the contrast.	4.50005	87.66
hsl(238, 14%, 54%) rgb(122, 123, 155) #7A7B9B	hsl(0, 100%, 10%) rgb(51, 0, 0) #330000	Title big size with words in bold Here is some text sample with some words in bold to illustrate the contrast.	4.50051	89.95
hsl(244, 32%, 59%) rgb(123, 118, 185) #7B76B9	hsl(0, 100%, 10%) rgb(51, 0, 0) #330000	Title big size with words in bold Here is some text sample with some words in bold to illustrate the contrast.	4.50061	87.82
hsl(241, 16%, 55%) rgb(123, 122, 160) #7B7AA0	hsl(0, 100%, 10%) rgb(51, 0, 0) #330000	Title big size with words in bold Here is some text sample with some words in bold to illustrate the contrast.	4.50017	90.05
hsl(237, 9%, 52%) rgb(123, 124, 145) #7B7C91	hsl(0, 100%, 10%) rgb(51, 0, 0) #330000	Title big size with words in bold Here is some text sample with some words in bold to illustrate the contrast.	4.50061	90.72
hsl(243, 15%, 54%) rgb(124, 122, 158) #7C7A9E	hsl(0, 100%, 10%) rgb(51, 0, 0) #330000	Title big size with words in bold Here is some text sample with some words in bold to illustrate the contrast.	4.50099	90.66
hsl(243, 6%, 51%) rgb(125, 124, 140) #7D7C8C	hsl(0, 100%, 10%) rgb(51, 0, 0) #330000	Title big size with words in bold Here is some text sample with some words in bold to illustrate the contrast.	4.50028	91.55

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 : 39 results (5,080,320 colors tested)

Products

Follow us

Language: