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 : 45 results (592 colors tested)

Valid contrasts
Foreground	Background	Sample	Ratio	Distance
hsl(240, 89%, 72%) rgb(124, 124, 248) #7C7CF8	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.	5.3434	107.8
hsl(240, 57%, 69%) rgb(132, 132, 222) #8484DE	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.	5.55453	106.37
hsl(240, 33%, 65%) rgb(137, 137, 196) #8989C4	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.	5.64451	108.85
hsl(240, 16%, 60%) rgb(136, 136, 170) #8888AA	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.	5.39023	107.09
hsl(204, 53%, 50%) rgb(59, 140, 196) #3B8CC4	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.	5.02673	89.75
hsl(204, 50%, 53%) rgb(78, 148, 196) #4E94C4	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.	5.5726	98.3
hsl(204, 33%, 50%) rgb(85, 136, 170) #5588AA	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.81115	86.78
hsl(204, 66%, 46%) rgb(39, 132, 196) #2784C4	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.54423	81.8
hsl(204, 81%, 48%) rgb(23, 140, 222) #178CDE	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.	5.12154	93.74
hsl(204, 99%, 43%) rgb(0, 131, 222) #0083DE	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.64716	80.41
hsl(328, 82%, 65%) rgb(240, 94, 170) #F05EAA	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.	6.03684	189.74
hsl(168, 53%, 43%) rgb(51, 170, 147) #33AA93	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.	6.40973	118.71
hsl(132, 53%, 43%) rgb(51, 170, 76) #33AA4C	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.	6.13188	94.9
hsl(96, 53%, 43%) rgb(97, 170, 51) #61AA33	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.	6.40447	46.0
hsl(61, 54%, 36%) rgb(143, 145, 43) #8F912B	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.	5.4814	76.01
hsl(61, 42%, 39%) rgb(143, 145, 58) #8F913A	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.	5.50438	58.9
hsl(61, 33%, 42%) rgb(143, 145, 72) #8F9148	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.	5.53285	87.42
hsl(62, 24%, 45%) rgb(143, 145, 87) #8F9157	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.	5.57146	101.23
hsl(61, 17%, 48%) rgb(144, 145, 101) #909165	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.	5.63127	109.32
hsl(62, 11%, 51%) rgb(144, 145, 116) #909174	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.	5.68761	113.9
hsl(60, 6%, 53%) rgb(145, 145, 130) #919182	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.	5.76496	116.89
hsl(0, 0%, 56%) rgb(145, 145, 145) #919191	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.	5.84081	118.06
hsl(61, 66%, 34%) rgb(143, 145, 29) #8F911D	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.	5.46637	106.09
hsl(60, 82%, 31%) rgb(143, 145, 14) #8F910E	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.	5.45638	129.81
hsl(60, 100%, 28%) rgb(143, 145, 0) #8F9100	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.	5.45082	148.94
hsl(275, 92%, 63%) rgb(176, 75, 248) #B04BF8	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.5653	134.65
hsl(275, 91%, 67%) rgb(186, 98, 248) #BA62F8	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.	5.42651	144.84
hsl(275, 62%, 65%) rgb(176, 111, 222) #B06FDE	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.	5.41268	132.19
hsl(275, 40%, 61%) rgb(164, 117, 196) #A475C4	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.	5.18962	120.46
hsl(276, 23%, 56%) rgb(150, 119, 170) #9677AA	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.83536	108.71
hsl(312, 70%, 56%) rgb(222, 67, 191) #DE43BF	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.96256	171.15
hsl(311, 67%, 60%) rgb(222, 88, 196) #DE58C4	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.	5.52167	171.77
hsl(312, 45%, 57%) rgb(196, 98, 176) #C462B0	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.	5.0152	146.63
hsl(312, 40%, 61%) rgb(196, 117, 179) #C475B3	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.	5.73529	149.43
hsl(311, 23%, 56%) rgb(170, 119, 160) #AA77A0	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.	5.13302	125.96
hsl(311, 72%, 52%) rgb(222, 44, 188) #DE2CBC	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.55166	171.06
hsl(311, 94%, 53%) rgb(248, 26, 204) #F81ACC	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.	5.26927	197.2
hsl(311, 100%, 48%) rgb(248, 0, 201) #F800C9	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.	5.11474	196.11
hsl(348, 92%, 63%) rgb(248, 75, 109) #F84B6D	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.	5.45123	195.15
hsl(347, 67%, 60%) rgb(222, 88, 115) #DE5873	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.	5.03994	169.67
hsl(347, 45%, 57%) rgb(196, 98, 118) #C46276	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.69496	144.41
hsl(347, 40%, 61%) rgb(196, 117, 133) #C47585	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.	5.46158	148.66
hsl(347, 23%, 56%) rgb(170, 119, 130) #AA7782	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.97061	124.62
hsl(347, 93%, 58%) rgb(248, 49, 90) #F8315A	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.88994	192.5
hsl(347, 94%, 53%) rgb(248, 26, 71) #F81A47	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.58469	188.14

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 : 45 results (592 colors tested)

Products

Follow us

Language: