Contrast Finder

Contrast-Finder finds correct color contrasts for web accessibility

WCAG success criteria 1.4.3 requires text to have a minimum contrast ratio of 4.5 (and 3 for large text).

Color in hexadecimal, RGB or with CSS color keywords.
Example: #FFFFFF, rgb(255,255,255) or white
The contrast of your colours is insufficient.
Current ratio: 2.72

Old contrast

Invalid contrast
Foreground Background Sample Ratio Distance
  • hsl(262, 95%, 75%)
  • rgb(179, 134, 252)
  • #B386FC
  • 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.

2.71583

New contrast : 30 results (2,110,080 colors tested)

Valid contrasts
Foreground Background Sample Ratio Distance
  • hsl(267, 72%, 61%)
  • rgb(149, 84, 228)
  • #9554E4
  • 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 54.94
  • hsl(266, 80%, 62%)
  • rgb(149, 81, 236)
  • #9551EC
  • 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.50054 56.46
  • hsl(265, 85%, 62%)
  • rgb(149, 79, 241)
  • #954FF1
  • 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.50018 57.96
  • hsl(267, 66%, 60%)
  • rgb(148, 87, 221)
  • #9457DD
  • 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.50011 54.67
  • hsl(266, 69%, 60%)
  • rgb(148, 86, 224)
  • #9456E0
  • 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.50001 54.55
  • hsl(265, 79%, 62%)
  • rgb(148, 82, 235)
  • #9452EB
  • 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.5009 55.97
  • hsl(265, 78%, 62%)
  • rgb(147, 83, 234)
  • #9353EA
  • 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 55.53
  • hsl(266, 60%, 59%)
  • rgb(146, 90, 215)
  • #925AD7
  • 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.50072 55.59
  • hsl(265, 65%, 60%)
  • rgb(145, 89, 220)
  • #9159DC
  • 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.50029 54.65
  • hsl(264, 73%, 61%)
  • rgb(145, 86, 229)
  • #9156E5
  • 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.50017 54.52
  • hsl(267, 49%, 58%)
  • rgb(144, 95, 201)
  • #905FC9
  • 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.5005 61.7
  • hsl(262, 97%, 64%)
  • rgb(144, 77, 253)
  • #904DFD
  • 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.50086 61.1
  • hsl(267, 47%, 57%)
  • rgb(143, 96, 199)
  • #8F60C7
  • 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.50085 63.03
  • hsl(264, 62%, 60%)
  • rgb(143, 91, 217)
  • #8F5BD9
  • 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 55.29
  • hsl(266, 46%, 57%)
  • rgb(142, 97, 197)
  • #8E61C5
  • 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 64.45
  • hsl(264, 58%, 59%)
  • rgb(142, 93, 212)
  • #8E5DD4
  • 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.50007 56.83
  • hsl(263, 69%, 61%)
  • rgb(142, 89, 225)
  • #8E59E1
  • 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.5003 54.45
  • hsl(263, 72%, 61%)
  • rgb(142, 88, 228)
  • #8E58E4
  • 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.50032 54.49
  • hsl(261, 81%, 63%)
  • rgb(141, 85, 238)
  • #8D55EE
  • 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.50011 55.96
  • hsl(262, 66%, 61%)
  • rgb(140, 91, 222)
  • #8C5BDE
  • 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 54.94
  • hsl(261, 77%, 62%)
  • rgb(140, 87, 234)
  • #8C57EA
  • 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.50019 55.28
  • hsl(260, 90%, 64%)
  • rgb(139, 83, 246)
  • #8B53F6
  • 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.50078 58.17
  • hsl(261, 66%, 61%)
  • rgb(138, 92, 222)
  • #8A5CDE
  • 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.50036 55.4
  • hsl(261, 50%, 59%)
  • rgb(136, 98, 204)
  • #8862CC
  • 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 61.86
  • hsl(258, 93%, 65%)
  • rgb(135, 84, 249)
  • #8754F9
  • 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.50043 59.46
  • hsl(261, 41%, 57%)
  • rgb(134, 102, 191)
  • #8666BF
  • 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.50013 70.53
  • hsl(258, 68%, 62%)
  • rgb(134, 93, 225)
  • #865DE1
  • 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.50001 56.43
  • hsl(258, 49%, 59%)
  • rgb(132, 100, 203)
  • #8464CB
  • 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.50032 63.89
  • hsl(258, 41%, 57%)
  • rgb(131, 103, 192)
  • #8367C0
  • 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 70.9
  • hsl(258, 28%, 55%)
  • rgb(128, 108, 173)
  • #806CAD
  • 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.50036 86.32
Not satisfied?
Gimme a range of colors