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(0, 100%, 34%) rgb(174, 0, 0) #AE0000	hsl(0, 0%, 12%) rgb(33, 33, 33) #212121	Title big size with words in bold Here is some text sample with some words in bold to illustrate the contrast.	2.14676

New contrast : 30 results (2,365,440 colors tested)

Valid contrasts
Foreground	Background	Sample	Ratio	Distance
hsl(3, 51%, 60%) rgb(206, 106, 100) #CE6A64	hsl(0, 0%, 12%) rgb(33, 33, 33) #212121	Title big size with words in bold Here is some text sample with some words in bold to illustrate the contrast.	4.50094	130.53
hsl(1, 52%, 60%) rgb(207, 105, 103) #CF6967	hsl(0, 0%, 12%) rgb(33, 33, 33) #212121	Title big size with words in bold Here is some text sample with some words in bold to illustrate the contrast.	4.50061	131.74
hsl(3, 57%, 60%) rgb(212, 102, 96) #D46660	hsl(0, 0%, 12%) rgb(33, 33, 33) #212121	Title big size with words in bold Here is some text sample with some words in bold to illustrate the contrast.	4.50007	126.01
hsl(1, 60%, 60%) rgb(216, 99, 95) #D8635F	hsl(0, 0%, 12%) rgb(33, 33, 33) #212121	Title big size with words in bold Here is some text sample with some words in bold to illustrate the contrast.	4.50077	123.89
hsl(0, 61%, 61%) rgb(217, 98, 97) #D96261	hsl(0, 0%, 12%) rgb(33, 33, 33) #212121	Title big size with words in bold Here is some text sample with some words in bold to illustrate the contrast.	4.50097	124.58
hsl(4, 63%, 60%) rgb(218, 98, 88) #DA6258	hsl(0, 0%, 12%) rgb(33, 33, 33) #212121	Title big size with words in bold Here is some text sample with some words in bold to illustrate the contrast.	4.50024	119.53
hsl(3, 64%, 60%) rgb(219, 97, 90) #DB615A	hsl(0, 0%, 12%) rgb(33, 33, 33) #212121	Title big size with words in bold Here is some text sample with some words in bold to illustrate the contrast.	4.50058	120.11
hsl(0, 65%, 61%) rgb(221, 95, 93) #DD5F5D	hsl(0, 0%, 12%) rgb(33, 33, 33) #212121	Title big size with words in bold Here is some text sample with some words in bold to illustrate the contrast.	4.50047	120.86
hsl(3, 68%, 60%) rgb(223, 94, 85) #DF5E55	hsl(0, 0%, 12%) rgb(33, 33, 33) #212121	Title big size with words in bold Here is some text sample with some words in bold to illustrate the contrast.	4.50083	116.04
hsl(3, 69%, 60%) rgb(224, 93, 86) #E05D56	hsl(0, 0%, 12%) rgb(33, 33, 33) #212121	Title big size with words in bold Here is some text sample with some words in bold to illustrate the contrast.	4.50062	116.11
hsl(2, 69%, 61%) rgb(225, 92, 87) #E15C57	hsl(0, 0%, 12%) rgb(33, 33, 33) #212121	Title big size with words in bold Here is some text sample with some words in bold to illustrate the contrast.	4.50094	116.22
hsl(0, 71%, 61%) rgb(227, 90, 88) #E35A58	hsl(0, 0%, 12%) rgb(33, 33, 33) #212121	Title big size with words in bold Here is some text sample with some words in bold to illustrate the contrast.	4.50061	115.96
hsl(3, 77%, 60%) rgb(232, 86, 77) #E8564D	hsl(0, 0%, 12%) rgb(33, 33, 33) #212121	Title big size with words in bold Here is some text sample with some words in bold to illustrate the contrast.	4.50052	108.79
hsl(3, 81%, 60%) rgb(236, 82, 73) #EC5249	hsl(0, 0%, 12%) rgb(33, 33, 33) #212121	Title big size with words in bold Here is some text sample with some words in bold to illustrate the contrast.	4.50071	105.63
hsl(3, 82%, 60%) rgb(237, 81, 71) #ED5147	hsl(0, 0%, 12%) rgb(33, 33, 33) #212121	Title big size with words in bold Here is some text sample with some words in bold to illustrate the contrast.	4.50007	104.45
hsl(3, 83%, 60%) rgb(238, 80, 69) #EE5045	hsl(0, 0%, 12%) rgb(33, 33, 33) #212121	Title big size with words in bold Here is some text sample with some words in bold to illustrate the contrast.	4.50005	103.31
hsl(0, 83%, 62%) rgb(239, 78, 78) #EF4E4E	hsl(0, 0%, 12%) rgb(33, 33, 33) #212121	Title big size with words in bold Here is some text sample with some words in bold to illustrate the contrast.	4.50088	106.96
hsl(4, 84%, 60%) rgb(239, 79, 67) #EF4F43	hsl(0, 0%, 12%) rgb(33, 33, 33) #212121	Title big size with words in bold Here is some text sample with some words in bold to illustrate the contrast.	4.50063	102.23
hsl(4, 85%, 59%) rgb(240, 78, 64) #F04E40	hsl(0, 0%, 12%) rgb(33, 33, 33) #212121	Title big size with words in bold Here is some text sample with some words in bold to illustrate the contrast.	4.50006	100.8
hsl(2, 88%, 60%) rgb(243, 74, 66) #F34A42	hsl(0, 0%, 12%) rgb(33, 33, 33) #212121	Title big size with words in bold Here is some text sample with some words in bold to illustrate the contrast.	4.50027	100.7
hsl(3, 89%, 60%) rgb(244, 73, 62) #F4493E	hsl(0, 0%, 12%) rgb(33, 33, 33) #212121	Title big size with words in bold Here is some text sample with some words in bold to illustrate the contrast.	4.50033	99.0
hsl(0, 89%, 61%) rgb(245, 71, 69) #F54745	hsl(0, 0%, 12%) rgb(33, 33, 33) #212121	Title big size with words in bold Here is some text sample with some words in bold to illustrate the contrast.	4.50074	101.46
hsl(3, 92%, 60%) rgb(247, 69, 59) #F7453B	hsl(0, 0%, 12%) rgb(33, 33, 33) #212121	Title big size with words in bold Here is some text sample with some words in bold to illustrate the contrast.	4.50036	97.36
hsl(4, 93%, 59%) rgb(248, 68, 53) #F84435	hsl(0, 0%, 12%) rgb(33, 33, 33) #212121	Title big size with words in bold Here is some text sample with some words in bold to illustrate the contrast.	4.5006	95.41
hsl(0, 94%, 61%) rgb(250, 64, 63) #FA403F	hsl(0, 0%, 12%) rgb(33, 33, 33) #212121	Title big size with words in bold Here is some text sample with some words in bold to illustrate the contrast.	4.50089	98.34
hsl(2, 96%, 60%) rgb(251, 63, 56) #FB3F38	hsl(0, 0%, 12%) rgb(33, 33, 33) #212121	Title big size with words in bold Here is some text sample with some words in bold to illustrate the contrast.	4.50091	95.91
hsl(0, 96%, 60%) rgb(252, 61, 59) #FC3D3B	hsl(0, 0%, 12%) rgb(33, 33, 33) #212121	Title big size with words in bold Here is some text sample with some words in bold to illustrate the contrast.	4.50075	96.8
hsl(4, 97%, 58%) rgb(252, 62, 47) #FC3E2F	hsl(0, 0%, 12%) rgb(33, 33, 33) #212121	Title big size with words in bold Here is some text sample with some words in bold to illustrate the contrast.	4.50032	93.47
hsl(2, 98%, 59%) rgb(253, 60, 50) #FD3C32	hsl(0, 0%, 12%) rgb(33, 33, 33) #212121	Title big size with words in bold Here is some text sample with some words in bold to illustrate the contrast.	4.50013	94.13
hsl(1, 99%, 60%) rgb(254, 58, 52) #FE3A34	hsl(0, 0%, 12%) rgb(33, 33, 33) #212121	Title big size with words in bold Here is some text sample with some words in bold to illustrate the contrast.	4.50016	94.64

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 : 30 results (2,365,440 colors tested)

Products

Follow us

Language: