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%, 15%)
  • rgb(40, 40, 40)
  • #282828
  • hsl(5, 78%, 57%)
  • rgb(231, 76, 60)
  • #E74C3C

Title big size with words in bold

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

3.85909

New contrast : 6 results (114 colors tested)

Valid contrasts
Foreground Background Sample Ratio Distance
  • hsl(0, 0%, 5%)
  • rgb(15, 15, 15)
  • #0F0F0F
  • hsl(5, 78%, 57%)
  • rgb(231, 76, 60)
  • #E74C3C

Title big size with words in bold

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

5.01745 36.06
  • hsl(0, 7%, 5%)
  • rgb(15, 13, 13)
  • #0F0D0D
  • hsl(5, 78%, 57%)
  • rgb(231, 76, 60)
  • #E74C3C

Title big size with words in bold

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

5.0723 38.03
  • hsl(0, 11%, 5%)
  • rgb(15, 12, 12)
  • #0F0C0C
  • hsl(5, 78%, 57%)
  • rgb(231, 76, 60)
  • #E74C3C

Title big size with words in bold

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

5.09809 39.05
  • hsl(0, 20%, 4%)
  • rgb(15, 10, 10)
  • #0F0A0A
  • hsl(5, 78%, 57%)
  • rgb(231, 76, 60)
  • #E74C3C

Title big size with words in bold

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

5.14629 41.14
  • hsl(0, 24%, 4%)
  • rgb(15, 9, 9)
  • #0F0909
  • hsl(5, 78%, 57%)
  • rgb(231, 76, 60)
  • #E74C3C

Title big size with words in bold

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

5.16942 42.21
  • hsl(0, 33%, 11%)
  • rgb(40, 20, 20)
  • #281414
  • hsl(5, 78%, 57%)
  • rgb(231, 76, 60)
  • #E74C3C

Title big size with words in bold

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

4.5792 25.2
Not satisfied ?
Gimme valid colors and very close to initial color