Fork me on GitHub

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. The color should be between #000000 and #FFFFFF
Background Color : invalid color For each color (red, green and blue), enter a number between 0 et 255. The color should be between #000000 and #FFFFFF

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 :
Gimme :

Old contrast

Invalid contrast
Foreground Background Sample Ratio Distance
  • hsl(0, 0%, 100%)
  • rgb(255, 255, 255)
  • #FFF
  • hsl(33, 96%, 56%)
  • rgb(251, 156, 38)
  • #FB9C26

Title big size with words in bold

Here is some text sample with some words in bold to illustrate the contrast.

2.12438

New contrast : 37 results (3,564,080 colors tested)

Valid contrasts
Foreground Background Sample Ratio Distance
  • hsl(0, 0%, 100%)
  • rgb(255, 255, 255)
  • #FFFFFF
  • hsl(29, 93%, 37%)
  • rgb(185, 94, 6)
  • #B95E06

Title big size with words in bold

Here is some text sample with some words in bold to illustrate the contrast.

4.50009 82.36
  • hsl(0, 0%, 100%)
  • rgb(255, 255, 255)
  • #FFFFFF
  • hsl(29, 94%, 37%)
  • rgb(185, 94, 5)
  • #B95E05

Title big size with words in bold

Here is some text sample with some words in bold to illustrate the contrast.

4.50052 82.51
  • hsl(0, 0%, 100%)
  • rgb(255, 255, 255)
  • #FFFFFF
  • hsl(29, 95%, 37%)
  • rgb(185, 94, 4)
  • #B95E04

Title big size with words in bold

Here is some text sample with some words in bold to illustrate the contrast.

4.50094 82.68
  • hsl(0, 0%, 100%)
  • rgb(255, 255, 255)
  • #FFFFFF
  • hsl(30, 89%, 37%)
  • rgb(182, 96, 10)
  • #B6600A

Title big size with words in bold

Here is some text sample with some words in bold to illustrate the contrast.

4.50011 82.74
  • hsl(0, 0%, 100%)
  • rgb(255, 255, 255)
  • #FFFFFF
  • hsl(30, 90%, 37%)
  • rgb(182, 96, 9)
  • #B66009

Title big size with words in bold

Here is some text sample with some words in bold to illustrate the contrast.

4.50054 82.86
  • hsl(0, 0%, 100%)
  • rgb(255, 255, 255)
  • #FFFFFF
  • hsl(30, 91%, 37%)
  • rgb(182, 96, 8)
  • #B66008

Title big size with words in bold

Here is some text sample with some words in bold to illustrate the contrast.

4.50096 82.99
  • hsl(0, 0%, 100%)
  • rgb(255, 255, 255)
  • #FFFFFF
  • hsl(31, 93%, 36%)
  • rgb(179, 98, 6)
  • #B36206

Title big size with words in bold

Here is some text sample with some words in bold to illustrate the contrast.

4.50021 84.4
  • hsl(0, 0%, 100%)
  • rgb(255, 255, 255)
  • #FFFFFF
  • hsl(32, 94%, 36%)
  • rgb(179, 98, 5)
  • #B36205

Title big size with words in bold

Here is some text sample with some words in bold to illustrate the contrast.

4.50064 84.54
  • hsl(0, 0%, 100%)
  • rgb(255, 255, 255)
  • #FFFFFF
  • hsl(29, 77%, 39%)
  • rgb(177, 99, 23)
  • #B16317

Title big size with words in bold

Here is some text sample with some words in bold to illustrate the contrast.

4.50013 84.05
  • hsl(0, 0%, 100%)
  • rgb(255, 255, 255)
  • #FFFFFF
  • hsl(29, 77%, 39%)
  • rgb(177, 99, 22)
  • #B16316

Title big size with words in bold

Here is some text sample with some words in bold to illustrate the contrast.

4.50089 84.09
  • hsl(0, 0%, 100%)
  • rgb(255, 255, 255)
  • #FFFFFF
  • hsl(28, 69%, 40%)
  • rgb(175, 100, 32)
  • #AF6420

Title big size with words in bold

Here is some text sample with some words in bold to illustrate the contrast.

4.50014 85.03
  • hsl(0, 0%, 100%)
  • rgb(255, 255, 255)
  • #FFFFFF
  • hsl(32, 87%, 36%)
  • rgb(174, 101, 12)
  • #AE650C

Title big size with words in bold

Here is some text sample with some words in bold to illustrate the contrast.

4.50015 86.2
  • hsl(0, 0%, 100%)
  • rgb(255, 255, 255)
  • #FFFFFF
  • hsl(33, 88%, 36%)
  • rgb(174, 101, 11)
  • #AE650B

Title big size with words in bold

Here is some text sample with some words in bold to illustrate the contrast.

4.50061 86.29
  • hsl(0, 0%, 100%)
  • rgb(255, 255, 255)
  • #FFFFFF
  • hsl(31, 77%, 38%)
  • rgb(172, 102, 22)
  • #AC6616

Title big size with words in bold

Here is some text sample with some words in bold to illustrate the contrast.

4.50039 86.83
  • hsl(0, 0%, 100%)
  • rgb(255, 255, 255)
  • #FFFFFF
  • hsl(31, 71%, 38%)
  • rgb(170, 103, 28)
  • #AA671C

Title big size with words in bold

Here is some text sample with some words in bold to illustrate the contrast.

4.50057 87.99
  • hsl(0, 0%, 100%)
  • rgb(255, 255, 255)
  • #FFFFFF
  • hsl(31, 68%, 39%)
  • rgb(168, 104, 32)
  • #A86820

Title big size with words in bold

Here is some text sample with some words in bold to illustrate the contrast.

4.50069 89.32
  • hsl(0, 0%, 100%)
  • rgb(255, 255, 255)
  • #FFFFFF
  • hsl(36, 93%, 33%)
  • rgb(167, 105, 6)
  • #A76906

Title big size with words in bold

Here is some text sample with some words in bold to illustrate the contrast.

4.5003 91.18
  • hsl(0, 0%, 100%)
  • rgb(255, 255, 255)
  • #FFFFFF
  • hsl(37, 94%, 33%)
  • rgb(167, 105, 5)
  • #A76905

Title big size with words in bold

Here is some text sample with some words in bold to illustrate the contrast.

4.50072 91.31
  • hsl(0, 0%, 100%)
  • rgb(255, 255, 255)
  • #FFFFFF
  • hsl(32, 65%, 39%)
  • rgb(166, 105, 35)
  • #A66923

Title big size with words in bold

Here is some text sample with some words in bold to illustrate the contrast.

4.50036 90.73
  • hsl(0, 0%, 100%)
  • rgb(255, 255, 255)
  • #FFFFFF
  • hsl(37, 87%, 34%)
  • rgb(165, 106, 11)
  • #A56A0B

Title big size with words in bold

Here is some text sample with some words in bold to illustrate the contrast.

4.50034 92.08
  • hsl(0, 0%, 100%)
  • rgb(255, 255, 255)
  • #FFFFFF
  • hsl(37, 88%, 34%)
  • rgb(165, 106, 10)
  • #A56A0A

Title big size with words in bold

Here is some text sample with some words in bold to illustrate the contrast.

4.50077 92.17
  • hsl(0, 0%, 100%)
  • rgb(255, 255, 255)
  • #FFFFFF
  • hsl(28, 53%, 42%)
  • rgb(165, 105, 50)
  • #A56932

Title big size with words in bold

Here is some text sample with some words in bold to illustrate the contrast.

4.50011 91.54
  • hsl(0, 0%, 100%)
  • rgb(255, 255, 255)
  • #FFFFFF
  • hsl(37, 85%, 34%)
  • rgb(163, 107, 13)
  • #A36B0D

Title big size with words in bold

Here is some text sample with some words in bold to illustrate the contrast.

4.50045 93.4
  • hsl(0, 0%, 100%)
  • rgb(255, 255, 255)
  • #FFFFFF
  • hsl(37, 86%, 34%)
  • rgb(163, 107, 12)
  • #A36B0C

Title big size with words in bold

Here is some text sample with some words in bold to illustrate the contrast.

4.50094 93.47
  • hsl(0, 0%, 100%)
  • rgb(255, 255, 255)
  • #FFFFFF
  • hsl(33, 62%, 39%)
  • rgb(162, 107, 37)
  • #A26B25

Title big size with words in bold

Here is some text sample with some words in bold to illustrate the contrast.

4.50058 93.7
  • hsl(0, 0%, 100%)
  • rgb(255, 255, 255)
  • #FFFFFF
  • hsl(30, 51%, 41%)
  • rgb(161, 107, 51)
  • #A16B33

Title big size with words in bold

Here is some text sample with some words in bold to illustrate the contrast.

4.50036 94.52
  • hsl(0, 0%, 100%)
  • rgb(255, 255, 255)
  • #FFFFFF
  • hsl(34, 62%, 38%)
  • rgb(160, 108, 37)
  • #A06C25

Title big size with words in bold

Here is some text sample with some words in bold to illustrate the contrast.

4.5002 95.25
  • hsl(0, 0%, 100%)
  • rgb(255, 255, 255)
  • #FFFFFF
  • hsl(29, 44%, 42%)
  • rgb(158, 108, 61)
  • #9E6C3D

Title big size with words in bold

Here is some text sample with some words in bold to illustrate the contrast.

4.50042 96.65
  • hsl(0, 0%, 100%)
  • rgb(255, 255, 255)
  • #FFFFFF
  • hsl(37, 65%, 37%)
  • rgb(156, 110, 33)
  • #9C6E21

Title big size with words in bold

Here is some text sample with some words in bold to illustrate the contrast.

4.50072 98.47
  • hsl(0, 0%, 100%)
  • rgb(255, 255, 255)
  • #FFFFFF
  • hsl(30, 44%, 42%)
  • rgb(156, 109, 60)
  • #9C6D3C

Title big size with words in bold

Here is some text sample with some words in bold to illustrate the contrast.

4.50036 98.32
  • hsl(0, 0%, 100%)
  • rgb(255, 255, 255)
  • #FFFFFF
  • hsl(36, 54%, 38%)
  • rgb(153, 111, 45)
  • #996F2D

Title big size with words in bold

Here is some text sample with some words in bold to illustrate the contrast.

4.50052 101.05
  • hsl(0, 0%, 100%)
  • rgb(255, 255, 255)
  • #FFFFFF
  • hsl(30, 39%, 43%)
  • rgb(153, 110, 67)
  • #996E43

Title big size with words in bold

Here is some text sample with some words in bold to illustrate the contrast.

4.50076 100.47
  • hsl(0, 0%, 100%)
  • rgb(255, 255, 255)
  • #FFFFFF
  • hsl(34, 46%, 40%)
  • rgb(152, 111, 56)
  • #986F38

Title big size with words in bold

Here is some text sample with some words in bold to illustrate the contrast.

4.50068 101.82
  • hsl(0, 0%, 100%)
  • rgb(255, 255, 255)
  • #FFFFFF
  • hsl(32, 39%, 42%)
  • rgb(151, 111, 65)
  • #976F41

Title big size with words in bold

Here is some text sample with some words in bold to illustrate the contrast.

4.50067 102.33
  • hsl(0, 0%, 100%)
  • rgb(255, 255, 255)
  • #FFFFFF
  • hsl(36, 47%, 39%)
  • rgb(150, 112, 53)
  • #967035

Title big size with words in bold

Here is some text sample with some words in bold to illustrate the contrast.

4.50076 103.61
  • hsl(0, 0%, 100%)
  • rgb(255, 255, 255)
  • #FFFFFF
  • hsl(36, 42%, 40%)
  • rgb(147, 113, 59)
  • #93713B

Title big size with words in bold

Here is some text sample with some words in bold to illustrate the contrast.

4.50082 106.12
  • hsl(0, 0%, 100%)
  • rgb(255, 255, 255)
  • #FFFFFF
  • hsl(35, 33%, 41%)
  • rgb(143, 114, 71)
  • #8F7247

Title big size with words in bold

Here is some text sample with some words in bold to illustrate the contrast.

4.5008 109.08
Not satisfied ?
Gimme a range of colors