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(231, 16%, 56%)
  • rgb(126, 131, 163)
  • #7E83A3

Title big size with words in bold

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

3.7086

New contrast : 22 results (1,786,080 colors tested)

Valid contrasts
Foreground Background Sample Ratio Distance
  • hsl(0, 0%, 100%)
  • rgb(255, 255, 255)
  • #FFFFFF
  • hsl(228, 10%, 49%)
  • rgb(113, 118, 139)
  • #71768B

Title big size with words in bold

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

4.50032 26.31
  • hsl(0, 0%, 100%)
  • rgb(255, 255, 255)
  • #FFFFFF
  • hsl(234, 23%, 54%)
  • rgb(110, 115, 166)
  • #6E73A6

Title big size with words in bold

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

4.50071 20.14
  • hsl(0, 0%, 100%)
  • rgb(255, 255, 255)
  • #FFFFFF
  • hsl(236, 27%, 55%)
  • rgb(110, 114, 172)
  • #6E72AC

Title big size with words in bold

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

4.50099 20.23
  • hsl(0, 0%, 100%)
  • rgb(255, 255, 255)
  • #FFFFFF
  • hsl(230, 24%, 53%)
  • rgb(107, 116, 165)
  • #6B74A5

Title big size with words in bold

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

4.50003 21.71
  • hsl(0, 0%, 100%)
  • rgb(255, 255, 255)
  • #FFFFFF
  • hsl(232, 33%, 55%)
  • rgb(105, 114, 180)
  • #6972B4

Title big size with words in bold

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

4.50003 21.0
  • hsl(0, 0%, 100%)
  • rgb(255, 255, 255)
  • #FFFFFF
  • hsl(234, 45%, 59%)
  • rgb(103, 111, 198)
  • #676FC6

Title big size with words in bold

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

4.50071 28.32
  • hsl(0, 0%, 100%)
  • rgb(255, 255, 255)
  • #FFFFFF
  • hsl(228, 30%, 53%)
  • rgb(102, 116, 173)
  • #6674AD

Title big size with words in bold

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

4.50012 25.3
  • hsl(0, 0%, 100%)
  • rgb(255, 255, 255)
  • #FFFFFF
  • hsl(230, 39%, 56%)
  • rgb(100, 114, 187)
  • #6472BB

Title big size with words in bold

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

4.50029 20.54
  • hsl(0, 0%, 100%)
  • rgb(255, 255, 255)
  • #FFFFFF
  • hsl(232, 45%, 58%)
  • rgb(100, 112, 197)
  • #6470C5

Title big size with words in bold

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

4.50086 24.59
  • hsl(0, 0%, 100%)
  • rgb(255, 255, 255)
  • #FFFFFF
  • hsl(228, 36%, 55%)
  • rgb(99, 115, 183)
  • #6373B7

Title big size with words in bold

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

4.50006 25.08
  • hsl(0, 0%, 100%)
  • rgb(255, 255, 255)
  • #FFFFFF
  • hsl(234, 61%, 61%)
  • rgb(98, 108, 217)
  • #626CD9

Title big size with words in bold

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

4.50034 49.78
  • hsl(0, 0%, 100%)
  • rgb(255, 255, 255)
  • #FFFFFF
  • hsl(235, 64%, 62%)
  • rgb(98, 107, 221)
  • #626BDD

Title big size with words in bold

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

4.50016 54.21
  • hsl(0, 0%, 100%)
  • rgb(255, 255, 255)
  • #FFFFFF
  • hsl(234, 62%, 61%)
  • rgb(97, 108, 218)
  • #616CDA

Title big size with words in bold

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

4.50094 50.63
  • hsl(0, 0%, 100%)
  • rgb(255, 255, 255)
  • #FFFFFF
  • hsl(235, 65%, 62%)
  • rgb(97, 107, 222)
  • #616BDE

Title big size with words in bold

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

4.50051 55.09
  • hsl(0, 0%, 100%)
  • rgb(255, 255, 255)
  • #FFFFFF
  • hsl(229, 46%, 57%)
  • rgb(96, 113, 197)
  • #6071C5

Title big size with words in bold

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

4.50098 18.64
  • hsl(0, 0%, 100%)
  • rgb(255, 255, 255)
  • #FFFFFF
  • hsl(233, 59%, 60%)
  • rgb(96, 109, 215)
  • #606DD7

Title big size with words in bold

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

4.50057 46.87
  • hsl(0, 0%, 100%)
  • rgb(255, 255, 255)
  • #FFFFFF
  • hsl(234, 66%, 62%)
  • rgb(96, 107, 223)
  • #606BDF

Title big size with words in bold

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

4.50066 55.95
  • hsl(0, 0%, 100%)
  • rgb(255, 255, 255)
  • #FFFFFF
  • hsl(230, 50%, 58%)
  • rgb(95, 112, 203)
  • #5F70CB

Title big size with words in bold

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

4.50006 30.13
  • hsl(0, 0%, 100%)
  • rgb(255, 255, 255)
  • #FFFFFF
  • hsl(231, 64%, 60%)
  • rgb(91, 109, 220)
  • #5B6DDC

Title big size with words in bold

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

4.50089 50.87
  • hsl(0, 0%, 100%)
  • rgb(255, 255, 255)
  • #FFFFFF
  • hsl(231, 65%, 60%)
  • rgb(90, 109, 221)
  • #5A6DDD

Title big size with words in bold

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

4.50037 51.65
  • hsl(0, 0%, 100%)
  • rgb(255, 255, 255)
  • #FFFFFF
  • hsl(227, 61%, 58%)
  • rgb(84, 112, 214)
  • #5470D6

Title big size with words in bold

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

4.50099 37.25
  • hsl(0, 0%, 100%)
  • rgb(255, 255, 255)
  • #FFFFFF
  • hsl(227, 66%, 59%)
  • rgb(82, 111, 220)
  • #526FDC

Title big size with words in bold

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

4.50064 45.15
Not satisfied ?
Gimme a range of colors