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(199, 100%, 40%)
  • rgb(0, 140, 205)
  • #008CCD
  • hsl(0, 0%, 100%)
  • rgb(255, 255, 255)
  • #FFF

Title big size with words in bold

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

3.72817

New contrast : 32 results (825,840 colors tested)

Valid contrasts
Foreground Background Sample Ratio Distance
  • hsl(196, 96%, 35%)
  • rgb(3, 127, 176)
  • #037FB0
  • hsl(0, 0%, 100%)
  • rgb(255, 255, 255)
  • #FFFFFF

Title big size with words in bold

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

4.50012 29.84
  • hsl(201, 96%, 38%)
  • rgb(3, 124, 194)
  • #037CC2
  • hsl(0, 0%, 100%)
  • rgb(255, 255, 255)
  • #FFFFFF

Title big size with words in bold

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

4.5007 17.54
  • hsl(194, 95%, 33%)
  • rgb(4, 128, 169)
  • #0480A9
  • hsl(0, 0%, 100%)
  • rgb(255, 255, 255)
  • #FFFFFF

Title big size with words in bold

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

4.50089 36.42
  • hsl(198, 94%, 36%)
  • rgb(5, 126, 182)
  • #057EB6
  • hsl(0, 0%, 100%)
  • rgb(255, 255, 255)
  • #FFFFFF

Title big size with words in bold

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

4.50038 24.54
  • hsl(200, 94%, 37%)
  • rgb(5, 125, 188)
  • #057DBC
  • hsl(0, 0%, 100%)
  • rgb(255, 255, 255)
  • #FFFFFF

Title big size with words in bold

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

4.50058 20.13
  • hsl(197, 90%, 36%)
  • rgb(9, 127, 175)
  • #097FAF
  • hsl(0, 0%, 100%)
  • rgb(255, 255, 255)
  • #FFFFFF

Title big size with words in bold

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

4.50026 30.53
  • hsl(195, 88%, 34%)
  • rgb(10, 128, 168)
  • #0A80A8
  • hsl(0, 0%, 100%)
  • rgb(255, 255, 255)
  • #FFFFFF

Title big size with words in bold

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

4.50064 37.18
  • hsl(202, 90%, 39%)
  • rgb(10, 124, 193)
  • #0A7CC1
  • hsl(0, 0%, 100%)
  • rgb(255, 255, 255)
  • #FFFFFF

Title big size with words in bold

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

4.50063 16.9
  • hsl(199, 88%, 37%)
  • rgb(11, 126, 181)
  • #0B7EB5
  • hsl(0, 0%, 100%)
  • rgb(255, 255, 255)
  • #FFFFFF

Title big size with words in bold

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

4.50083 24.79
  • hsl(201, 87%, 39%)
  • rgb(12, 125, 187)
  • #0C7DBB
  • hsl(0, 0%, 100%)
  • rgb(255, 255, 255)
  • #FFFFFF

Title big size with words in bold

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

4.50002 19.56
  • hsl(195, 83%, 35%)
  • rgb(15, 128, 167)
  • #0F80A7
  • hsl(0, 0%, 100%)
  • rgb(255, 255, 255)
  • #FFFFFF

Title big size with words in bold

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

4.50066 37.62
  • hsl(203, 84%, 40%)
  • rgb(16, 124, 192)
  • #107CC0
  • hsl(0, 0%, 100%)
  • rgb(255, 255, 255)
  • #FFFFFF

Title big size with words in bold

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

4.5004 13.0
  • hsl(201, 83%, 39%)
  • rgb(17, 125, 186)
  • #117DBA
  • hsl(0, 0%, 100%)
  • rgb(255, 255, 255)
  • #FFFFFF

Title big size with words in bold

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

4.50034 17.46
  • hsl(195, 79%, 36%)
  • rgb(19, 128, 166)
  • #1380A6
  • hsl(0, 0%, 100%)
  • rgb(255, 255, 255)
  • #FFFFFF

Title big size with words in bold

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

4.50065 37.84
  • hsl(201, 79%, 40%)
  • rgb(21, 125, 185)
  • #157DB9
  • hsl(0, 0%, 100%)
  • rgb(255, 255, 255)
  • #FFFFFF

Title big size with words in bold

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

4.50075 12.83
  • hsl(200, 76%, 39%)
  • rgb(24, 126, 178)
  • #187EB2
  • hsl(0, 0%, 100%)
  • rgb(255, 255, 255)
  • #FFFFFF

Title big size with words in bold

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

4.50059 20.49
  • hsl(200, 73%, 40%)
  • rgb(27, 126, 177)
  • #1B7EB1
  • hsl(0, 0%, 100%)
  • rgb(255, 255, 255)
  • #FFFFFF

Title big size with words in bold

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

4.50083 17.11
  • hsl(195, 70%, 37%)
  • rgb(28, 128, 163)
  • #1C80A3
  • hsl(0, 0%, 100%)
  • rgb(255, 255, 255)
  • #FFFFFF

Title big size with words in bold

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

4.50073 37.77
  • hsl(202, 73%, 41%)
  • rgb(28, 125, 183)
  • #1C7DB7
  • hsl(0, 0%, 100%)
  • rgb(255, 255, 255)
  • #FFFFFF

Title big size with words in bold

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

4.50006 19.94
  • hsl(200, 70%, 40%)
  • rgb(30, 126, 176)
  • #1E7EB0
  • hsl(0, 0%, 100%)
  • rgb(255, 255, 255)
  • #FFFFFF

Title big size with words in bold

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

4.5002 5.1
  • hsl(198, 67%, 39%)
  • rgb(33, 127, 168)
  • #217FA8
  • hsl(0, 0%, 100%)
  • rgb(255, 255, 255)
  • #FFFFFF

Title big size with words in bold

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

4.50079 25.67
  • hsl(200, 64%, 41%)
  • rgb(37, 126, 173)
  • #257EAD
  • hsl(0, 0%, 100%)
  • rgb(255, 255, 255)
  • #FFFFFF

Title big size with words in bold

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

4.50023 24.74
  • hsl(200, 63%, 41%)
  • rgb(39, 126, 172)
  • #277EAC
  • hsl(0, 0%, 100%)
  • rgb(255, 255, 255)
  • #FFFFFF

Title big size with words in bold

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

4.50033 27.43
  • hsl(203, 63%, 42%)
  • rgb(40, 125, 178)
  • #287DB2
  • hsl(0, 0%, 100%)
  • rgb(255, 255, 255)
  • #FFFFFF

Title big size with words in bold

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

4.50012 34.47
  • hsl(198, 60%, 40%)
  • rgb(41, 127, 164)
  • #297FA4
  • hsl(0, 0%, 100%)
  • rgb(255, 255, 255)
  • #FFFFFF

Title big size with words in bold

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

4.50055 13.0
  • hsl(194, 57%, 38%)
  • rgb(42, 128, 156)
  • #2A809C
  • hsl(0, 0%, 100%)
  • rgb(255, 255, 255)
  • #FFFFFF

Title big size with words in bold

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

4.50047 35.64
  • hsl(194, 54%, 39%)
  • rgb(45, 128, 154)
  • #2D809A
  • hsl(0, 0%, 100%)
  • rgb(255, 255, 255)
  • #FFFFFF

Title big size with words in bold

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

4.50077 35.1
  • hsl(197, 55%, 40%)
  • rgb(46, 127, 161)
  • #2E7FA1
  • hsl(0, 0%, 100%)
  • rgb(255, 255, 255)
  • #FFFFFF

Title big size with words in bold

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

4.5001 21.51
  • hsl(200, 57%, 41%)
  • rgb(46, 126, 168)
  • #2E7EA8
  • hsl(0, 0%, 100%)
  • rgb(255, 255, 255)
  • #FFFFFF

Title big size with words in bold

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

4.5007 35.29
  • hsl(200, 51%, 42%)
  • rgb(52, 126, 164)
  • #347EA4
  • hsl(0, 0%, 100%)
  • rgb(255, 255, 255)
  • #FFFFFF

Title big size with words in bold

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

4.50024 41.0
  • hsl(196, 48%, 40%)
  • rgb(54, 127, 155)
  • #367F9B
  • hsl(0, 0%, 100%)
  • rgb(255, 255, 255)
  • #FFFFFF

Title big size with words in bold

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

4.50073 31.16
  • hsl(199, 47%, 42%)
  • rgb(57, 126, 160)
  • #397EA0
  • hsl(0, 0%, 100%)
  • rgb(255, 255, 255)
  • #FFFFFF

Title big size with words in bold

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

4.50071 45.03
Not satisfied ?
Gimme a range of colors