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

Valid contrasts
Foreground Background Sample Ratio Distance
  • hsl(210, 10%, 14%)
  • rgb(33, 37, 41)
  • #212529
  • hsl(0, 0%, 64%)
  • rgb(164, 164, 164)
  • #A4A4A4

Title big size with words in bold

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

6.1887 37.5
  • hsl(210, 10%, 14%)
  • rgb(33, 37, 41)
  • #212529
  • hsl(0, 8%, 60%)
  • rgb(164, 147, 147)
  • #A49393

Title big size with words in bold

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

5.2694 26.7
  • hsl(210, 10%, 14%)
  • rgb(33, 37, 41)
  • #212529
  • hsl(0, 23%, 66%)
  • rgb(190, 150, 150)
  • #BE9696

Title big size with words in bold

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

5.87108 52.42
  • hsl(210, 10%, 14%)
  • rgb(33, 37, 41)
  • #212529
  • hsl(0, 30%, 63%)
  • rgb(190, 132, 132)
  • #BE8484

Title big size with words in bold

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

5.01216 51.95
  • hsl(210, 10%, 14%)
  • rgb(33, 37, 41)
  • #212529
  • hsl(0, 53%, 67%)
  • rgb(216, 127, 127)
  • #D87F7F

Title big size with words in bold

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

5.33455 77.85
  • hsl(210, 10%, 14%)
  • rgb(33, 37, 41)
  • #212529
  • hsl(0, 58%, 63%)
  • rgb(216, 107, 107)
  • #D86B6B

Title big size with words in bold

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

4.58026 74.59
  • hsl(210, 10%, 14%)
  • rgb(33, 37, 41)
  • #212529
  • hsl(0, 85%, 65%)
  • rgb(242, 94, 94)
  • #F25E5E

Title big size with words in bold

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

4.80284 98.46
Not satisfied ?