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(151, 50%, 31%) rgb(39, 120, 82) #277852	hsl(240, 3%, 17%) rgb(42, 42, 45) #2A2A2D	Title big size with words in bold Here is some text sample with some words in bold to illustrate the contrast.	2.65392

New contrast : 33 results (1,464,000 colors tested)

Valid contrasts
Foreground	Background	Sample	Ratio	Distance
hsl(150, 54%, 32%) rgb(38, 130, 84) #268254	hsl(240, 3%, 17%) rgb(42, 42, 45) #2A2A2D	Title big size with words in bold Here is some text sample with some words in bold to illustrate the contrast.	3.00062	10.02
hsl(150, 55%, 32%) rgb(37, 130, 85) #258255	hsl(240, 3%, 17%) rgb(42, 42, 45) #2A2A2D	Title big size with words in bold Here is some text sample with some words in bold to illustrate the contrast.	3.00021	10.06
hsl(147, 63%, 31%) rgb(29, 131, 76) #1D834C	hsl(240, 3%, 17%) rgb(42, 42, 45) #2A2A2D	Title big size with words in bold Here is some text sample with some words in bold to illustrate the contrast.	3.00037	4.86
hsl(148, 64%, 31%) rgb(28, 131, 77) #1C834D	hsl(240, 3%, 17%) rgb(42, 42, 45) #2A2A2D	Title big size with words in bold Here is some text sample with some words in bold to illustrate the contrast.	3.00033	5.0
hsl(149, 65%, 30%) rgb(27, 131, 78) #1B834E	hsl(240, 3%, 17%) rgb(42, 42, 45) #2A2A2D	Title big size with words in bold Here is some text sample with some words in bold to illustrate the contrast.	3.00038	7.73
hsl(150, 66%, 30%) rgb(26, 131, 79) #1A834F	hsl(240, 3%, 17%) rgb(42, 42, 45) #2A2A2D	Title big size with words in bold Here is some text sample with some words in bold to illustrate the contrast.	3.00052	9.63
hsl(151, 67%, 30%) rgb(25, 131, 80) #198350	hsl(240, 3%, 17%) rgb(42, 42, 45) #2A2A2D	Title big size with words in bold Here is some text sample with some words in bold to illustrate the contrast.	3.00076	11.24
hsl(153, 72%, 29%) rgb(21, 131, 83) #158353	hsl(240, 3%, 17%) rgb(42, 42, 45) #2A2A2D	Title big size with words in bold Here is some text sample with some words in bold to illustrate the contrast.	3.0005	16.51
hsl(155, 75%, 29%) rgb(18, 131, 85) #128355	hsl(240, 3%, 17%) rgb(42, 42, 45) #2A2A2D	Title big size with words in bold Here is some text sample with some words in bold to illustrate the contrast.	3.00057	19.92
hsl(156, 78%, 28%) rgb(16, 131, 86) #108356	hsl(240, 3%, 17%) rgb(42, 42, 45) #2A2A2D	Title big size with words in bold Here is some text sample with some words in bold to illustrate the contrast.	3.00024	22.09
hsl(147, 80%, 28%) rgb(14, 132, 68) #0E8444	hsl(240, 3%, 17%) rgb(42, 42, 45) #2A2A2D	Title big size with words in bold Here is some text sample with some words in bold to illustrate the contrast.	3.00005	25.53
hsl(148, 82%, 28%) rgb(13, 132, 69) #0D8445	hsl(240, 3%, 17%) rgb(42, 42, 45) #2A2A2D	Title big size with words in bold Here is some text sample with some words in bold to illustrate the contrast.	3.00066	26.23
hsl(149, 84%, 28%) rgb(11, 132, 70) #0B8446	hsl(240, 3%, 17%) rgb(42, 42, 45) #2A2A2D	Title big size with words in bold Here is some text sample with some words in bold to illustrate the contrast.	3.00041	28.0
hsl(150, 87%, 27%) rgb(9, 132, 71) #098447	hsl(240, 3%, 17%) rgb(42, 42, 45) #2A2A2D	Title big size with words in bold Here is some text sample with some words in bold to illustrate the contrast.	3.00036	29.85
hsl(151, 89%, 27%) rgb(7, 132, 72) #078448	hsl(240, 3%, 17%) rgb(42, 42, 45) #2A2A2D	Title big size with words in bold Here is some text sample with some words in bold to illustrate the contrast.	3.00037	31.76
hsl(152, 92%, 26%) rgb(5, 132, 73) #058449	hsl(240, 3%, 17%) rgb(42, 42, 45) #2A2A2D	Title big size with words in bold Here is some text sample with some words in bold to illustrate the contrast.	3.0004	33.71
hsl(153, 95%, 26%) rgb(3, 132, 74) #03844A	hsl(240, 3%, 17%) rgb(42, 42, 45) #2A2A2D	Title big size with words in bold Here is some text sample with some words in bold to illustrate the contrast.	3.00046	35.68
hsl(153, 98%, 26%) rgb(1, 132, 75) #01844B	hsl(240, 3%, 17%) rgb(42, 42, 45) #2A2A2D	Title big size with words in bold Here is some text sample with some words in bold to illustrate the contrast.	3.00056	37.68
hsl(156, 50%, 33%) rgb(42, 129, 95) #2A815F	hsl(240, 3%, 17%) rgb(42, 42, 45) #2A2A2D	Title big size with words in bold Here is some text sample with some words in bold to illustrate the contrast.	3.00083	14.35
hsl(152, 48%, 34%) rgb(45, 129, 91) #2D815B	hsl(240, 3%, 17%) rgb(42, 42, 45) #2A2A2D	Title big size with words in bold Here is some text sample with some words in bold to illustrate the contrast.	3.00011	11.87
hsl(151, 47%, 34%) rgb(46, 129, 90) #2E815A	hsl(240, 3%, 17%) rgb(42, 42, 45) #2A2A2D	Title big size with words in bold Here is some text sample with some words in bold to illustrate the contrast.	3.00091	11.66
hsl(148, 45%, 34%) rgb(48, 129, 87) #308157	hsl(240, 3%, 17%) rgb(42, 42, 45) #2A2A2D	Title big size with words in bold Here is some text sample with some words in bold to illustrate the contrast.	3.00056	11.65
hsl(154, 42%, 35%) rgb(52, 128, 96) #348060	hsl(240, 3%, 17%) rgb(42, 42, 45) #2A2A2D	Title big size with words in bold Here is some text sample with some words in bold to illustrate the contrast.	3.00001	17.6
hsl(148, 39%, 36%) rgb(56, 128, 90) #38805A	hsl(240, 3%, 17%) rgb(42, 42, 45) #2A2A2D	Title big size with words in bold Here is some text sample with some words in bold to illustrate the contrast.	3.0006	18.11
hsl(151, 35%, 36%) rgb(61, 127, 96) #3D7F60	hsl(240, 3%, 17%) rgb(42, 42, 45) #2A2A2D	Title big size with words in bold Here is some text sample with some words in bold to illustrate the contrast.	3.00034	23.95
hsl(155, 31%, 37%) rgb(66, 126, 101) #427E65	hsl(240, 3%, 17%) rgb(42, 42, 45) #2A2A2D	Title big size with words in bold Here is some text sample with some words in bold to illustrate the contrast.	3.00091	29.91
hsl(152, 30%, 37%) rgb(67, 126, 99) #437E63	hsl(240, 3%, 17%) rgb(42, 42, 45) #2A2A2D	Title big size with words in bold Here is some text sample with some words in bold to illustrate the contrast.	3.0004	30.03
hsl(150, 29%, 38%) rgb(68, 126, 97) #447E61	hsl(240, 3%, 17%) rgb(42, 42, 45) #2A2A2D	Title big size with words in bold Here is some text sample with some words in bold to illustrate the contrast.	3.00011	30.36
hsl(147, 29%, 38%) rgb(69, 126, 95) #457E5F	hsl(240, 3%, 17%) rgb(42, 42, 45) #2A2A2D	Title big size with words in bold Here is some text sample with some words in bold to illustrate the contrast.	3.00003	30.87
hsl(155, 23%, 39%) rgb(77, 124, 105) #4D7C69	hsl(240, 3%, 17%) rgb(42, 42, 45) #2A2A2D	Title big size with words in bold Here is some text sample with some words in bold to illustrate the contrast.	3.00002	40.64
hsl(152, 22%, 39%) rgb(78, 124, 103) #4E7C67	hsl(240, 3%, 17%) rgb(42, 42, 45) #2A2A2D	Title big size with words in bold Here is some text sample with some words in bold to illustrate the contrast.	3.00019	40.94
hsl(149, 22%, 39%) rgb(79, 124, 101) #4F7C65	hsl(240, 3%, 17%) rgb(42, 42, 45) #2A2A2D	Title big size with words in bold Here is some text sample with some words in bold to illustrate the contrast.	3.00058	41.39
hsl(150, 16%, 41%) rgb(88, 122, 105) #587A69	hsl(240, 3%, 17%) rgb(42, 42, 45) #2A2A2D	Title big size with words in bold Here is some text sample with some words in bold to illustrate the contrast.	3.00011	50.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 : 33 results (1,464,000 colors tested)

Products

Follow us

Language: