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(210, 10%, 14%)
  • rgb(33, 37, 41)
  • #212529
  • hsl(0, 0%, 54%)
  • rgb(138, 138, 138)
  • #8A8A8A

Title big size with words in bold

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

4.46851

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

Valid contrasts
Foreground Background Sample Ratio Distance
  • hsl(210, 10%, 14%)
  • rgb(33, 37, 41)
  • #212529
  • hsl(1, 15%, 57%)
  • rgb(163, 131, 130)
  • #A38382

Title big size with words in bold

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

4.50019 24.54
  • hsl(210, 10%, 14%)
  • rgb(33, 37, 41)
  • #212529
  • hsl(3, 17%, 57%)
  • rgb(166, 130, 128)
  • #A68280

Title big size with words in bold

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

4.50018 27.34
  • hsl(210, 10%, 14%)
  • rgb(33, 37, 41)
  • #212529
  • hsl(3, 23%, 58%)
  • rgb(174, 127, 124)
  • #AE7F7C

Title big size with words in bold

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

4.50046 34.92
  • hsl(210, 10%, 14%)
  • rgb(33, 37, 41)
  • #212529
  • hsl(1, 24%, 59%)
  • rgb(176, 126, 125)
  • #B07E7D

Title big size with words in bold

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

4.50043 37.07
  • hsl(210, 10%, 14%)
  • rgb(33, 37, 41)
  • #212529
  • hsl(4, 27%, 58%)
  • rgb(179, 125, 121)
  • #B37D79

Title big size with words in bold

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

4.50028 39.54
Not satisfied ?
Gimme a range of colors