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(19, 83%, 53%) rgb(235, 102, 38) #EB6626	hsl(0, 0%, 96%) rgb(245, 245, 245) #F5F5F5	Title big size with words in bold Here is some text sample with some words in bold to illustrate the contrast.	2.98128

New contrast : 30 results (276 colors tested)

Valid contrasts
Foreground	Background	Sample	Ratio	Distance
hsl(19, 72%, 42%) rgb(185, 80, 30) #B9501E	hsl(0, 0%, 96%) rgb(245, 245, 245) #F5F5F5	Title big size with words in bold Here is some text sample with some words in bold to illustrate the contrast.	4.55466	51.45
hsl(19, 59%, 39%) rgb(160, 79, 41) #A04F29	hsl(0, 0%, 96%) rgb(245, 245, 245) #F5F5F5	Title big size with words in bold Here is some text sample with some words in bold to illustrate the contrast.	5.28431	75.71
hsl(19, 46%, 42%) rgb(160, 91, 59) #A05B3B	hsl(0, 0%, 96%) rgb(245, 245, 245) #F5F5F5	Title big size with words in bold Here is some text sample with some words in bold to illustrate the contrast.	4.75099	74.53
hsl(19, 37%, 38%) rgb(135, 86, 62) #87563E	hsl(0, 0%, 96%) rgb(245, 245, 245) #F5F5F5	Title big size with words in bold Here is some text sample with some words in bold to illustrate the contrast.	5.61434	99.67
hsl(18, 27%, 41%) rgb(135, 94, 76) #875E4C	hsl(0, 0%, 96%) rgb(245, 245, 245) #F5F5F5	Title big size with words in bold Here is some text sample with some words in bold to illustrate the contrast.	5.1563	98.15
hsl(17, 20%, 44%) rgb(135, 103, 90) #87675A	hsl(0, 0%, 96%) rgb(245, 245, 245) #F5F5F5	Title big size with words in bold Here is some text sample with some words in bold to illustrate the contrast.	4.6776	95.07
hsl(18, 13%, 38%) rgb(110, 92, 84) #6E5C54	hsl(0, 0%, 96%) rgb(245, 245, 245) #F5F5F5	Title big size with words in bold Here is some text sample with some words in bold to illustrate the contrast.	5.79852	122.91
hsl(12, 6%, 40%) rgb(110, 99, 96) #6E6360	hsl(0, 0%, 96%) rgb(245, 245, 245) #F5F5F5	Title big size with words in bold Here is some text sample with some words in bold to illustrate the contrast.	5.32593	120.69
hsl(11, 2%, 42%) rgb(110, 106, 105) #6E6A69	hsl(0, 0%, 96%) rgb(245, 245, 245) #F5F5F5	Title big size with words in bold Here is some text sample with some words in bold to illustrate the contrast.	4.90302	118.22
hsl(19, 88%, 38%) rgb(185, 68, 11) #B9440B	hsl(0, 0%, 96%) rgb(245, 245, 245) #F5F5F5	Title big size with words in bold Here is some text sample with some words in bold to illustrate the contrast.	4.94589	56.88
hsl(54, 71%, 25%) rgb(110, 101, 18) #6E6512	hsl(0, 0%, 96%) rgb(245, 245, 245) #F5F5F5	Title big size with words in bold Here is some text sample with some words in bold to illustrate the contrast.	5.4517	125.17
hsl(54, 59%, 27%) rgb(110, 102, 28) #6E661C	hsl(0, 0%, 96%) rgb(245, 245, 245) #F5F5F5	Title big size with words in bold Here is some text sample with some words in bold to illustrate the contrast.	5.37996	125.02
hsl(54, 45%, 29%) rgb(110, 104, 41) #6E6829	hsl(0, 0%, 96%) rgb(245, 245, 245) #F5F5F5	Title big size with words in bold Here is some text sample with some words in bold to illustrate the contrast.	5.24115	125.0
hsl(55, 37%, 31%) rgb(110, 105, 50) #6E6932	hsl(0, 0%, 96%) rgb(245, 245, 245) #F5F5F5	Title big size with words in bold Here is some text sample with some words in bold to illustrate the contrast.	5.1645	124.96
hsl(53, 27%, 33%) rgb(110, 105, 62) #6E693E	hsl(0, 0%, 96%) rgb(245, 245, 245) #F5F5F5	Title big size with words in bold Here is some text sample with some words in bold to illustrate the contrast.	5.13216	124.7
hsl(51, 20%, 35%) rgb(110, 105, 73) #6E6949	hsl(0, 0%, 96%) rgb(245, 245, 245) #F5F5F5	Title big size with words in bold Here is some text sample with some words in bold to illustrate the contrast.	5.09598	124.08
hsl(53, 13%, 38%) rgb(110, 107, 84) #6E6B54	hsl(0, 0%, 96%) rgb(245, 245, 245) #F5F5F5	Title big size with words in bold Here is some text sample with some words in bold to illustrate the contrast.	4.94646	122.89
hsl(51, 6%, 40%) rgb(110, 108, 96) #6E6C60	hsl(0, 0%, 96%) rgb(245, 245, 245) #F5F5F5	Title big size with words in bold Here is some text sample with some words in bold to illustrate the contrast.	4.84343	120.69
hsl(60, 2%, 42%) rgb(110, 110, 105) #6E6E69	hsl(0, 0%, 96%) rgb(245, 245, 245) #F5F5F5	Title big size with words in bold Here is some text sample with some words in bold to illustrate the contrast.	4.70107	118.21
hsl(54, 89%, 22%) rgb(110, 101, 6) #6E6506	hsl(0, 0%, 96%) rgb(245, 245, 245) #F5F5F5	Title big size with words in bold Here is some text sample with some words in bold to illustrate the contrast.	5.46113	125.7
hsl(91, 71%, 25%) rgb(62, 110, 18) #3E6E12	hsl(0, 0%, 96%) rgb(245, 245, 245) #F5F5F5	Title big size with words in bold Here is some text sample with some words in bold to illustrate the contrast.	5.59302	173.08
hsl(91, 59%, 27%) rgb(67, 110, 28) #436E1C	hsl(0, 0%, 96%) rgb(245, 245, 245) #F5F5F5	Title big size with words in bold Here is some text sample with some words in bold to illustrate the contrast.	5.52584	168.01
hsl(93, 45%, 29%) rgb(71, 110, 41) #476E29	hsl(0, 0%, 96%) rgb(245, 245, 245) #F5F5F5	Title big size with words in bold Here is some text sample with some words in bold to illustrate the contrast.	5.45617	163.99
hsl(91, 37%, 31%) rgb(78, 110, 50) #4E6E32	hsl(0, 0%, 96%) rgb(245, 245, 245) #F5F5F5	Title big size with words in bold Here is some text sample with some words in bold to illustrate the contrast.	5.35	156.97
hsl(92, 27%, 33%) rgb(84, 110, 62) #546E3E	hsl(0, 0%, 96%) rgb(245, 245, 245) #F5F5F5	Title big size with words in bold Here is some text sample with some words in bold to illustrate the contrast.	5.23865	150.79
hsl(94, 20%, 35%) rgb(89, 110, 73) #596E49	hsl(0, 0%, 96%) rgb(245, 245, 245) #F5F5F5	Title big size with words in bold Here is some text sample with some words in bold to illustrate the contrast.	5.13468	145.32
hsl(90, 13%, 38%) rgb(97, 110, 84) #616E54	hsl(0, 0%, 96%) rgb(245, 245, 245) #F5F5F5	Title big size with words in bold Here is some text sample with some words in bold to illustrate the contrast.	4.98154	136.27
hsl(98, 6%, 40%) rgb(101, 110, 96) #656E60	hsl(0, 0%, 96%) rgb(245, 245, 245) #F5F5F5	Title big size with words in bold Here is some text sample with some words in bold to illustrate the contrast.	4.87322	130.27
hsl(95, 2%, 42%) rgb(107, 110, 105) #6B6E69	hsl(0, 0%, 96%) rgb(245, 245, 245) #F5F5F5	Title big size with words in bold Here is some text sample with some words in bold to illustrate the contrast.	4.74489	121.55
hsl(91, 89%, 22%) rgb(55, 110, 6) #376E06	hsl(0, 0%, 96%) rgb(245, 245, 245) #F5F5F5	Title big size with words in bold Here is some text sample with some words in bold to illustrate the contrast.	5.67288	180.33

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 : 30 results (276 colors tested)

Products

Follow us

Language: