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.23

Old contrast

Invalid contrast
Foreground Background Sample Ratio Distance
  • hsl(92, 65%, 41%)
  • rgb(100, 174, 36)
  • #64AE24
  • hsl(45, 58%, 86%)
  • rgb(241, 231, 201)
  • #F1E7C9

Title big size with words in bold

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

2.23228

New contrast : 21 results (5.893.230 colors tested)

Valid contrasts
Foreground Background Sample Ratio Distance
  • hsl(90, 29%, 33%)
  • rgb(86, 112, 61)
  • #56703D
  • hsl(45, 58%, 86%)
  • rgb(241, 231, 201)
  • #F1E7C9

Title big size with words in bold

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

4.50016 60.86
  • hsl(94, 26%, 34%)
  • rgb(85, 112, 65)
  • #557041
  • hsl(45, 58%, 86%)
  • rgb(241, 231, 201)
  • #F1E7C9

Title big size with words in bold

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

4.50073 60.12
  • hsl(87, 47%, 30%)
  • rgb(80, 114, 41)
  • #507229
  • hsl(45, 58%, 86%)
  • rgb(241, 231, 201)
  • #F1E7C9

Title big size with words in bold

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

4.50099 60.72
  • hsl(91, 41%, 31%)
  • rgb(79, 114, 47)
  • #4F722F
  • hsl(45, 58%, 86%)
  • rgb(241, 231, 201)
  • #F1E7C9

Title big size with words in bold

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

4.50053 60.73
  • hsl(94, 37%, 32%)
  • rgb(78, 114, 52)
  • #4E7234
  • hsl(45, 58%, 86%)
  • rgb(241, 231, 201)
  • #F1E7C9

Title big size with words in bold

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

4.5005 60.6
  • hsl(88, 56%, 28%)
  • rgb(76, 115, 32)
  • #4C7320
  • hsl(45, 58%, 86%)
  • rgb(241, 231, 201)
  • #F1E7C9

Title big size with words in bold

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

4.5005 60.3
  • hsl(91, 49%, 30%)
  • rgb(75, 115, 39)
  • #4B7327
  • hsl(45, 58%, 86%)
  • rgb(241, 231, 201)
  • #F1E7C9

Title big size with words in bold

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

4.50013 60.46
  • hsl(89, 64%, 27%)
  • rgb(71, 116, 25)
  • #477419
  • hsl(45, 58%, 86%)
  • rgb(241, 231, 201)
  • #F1E7C9

Title big size with words in bold

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

4.50091 60.44
  • hsl(93, 55%, 29%)
  • rgb(70, 116, 33)
  • #467421
  • hsl(45, 58%, 86%)
  • rgb(241, 231, 201)
  • #F1E7C9

Title big size with words in bold

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

4.5004 60.56
  • hsl(96, 49%, 30%)
  • rgb(69, 116, 39)
  • #457427
  • hsl(45, 58%, 86%)
  • rgb(241, 231, 201)
  • #F1E7C9

Title big size with words in bold

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

4.50045 60.81
  • hsl(88, 84%, 24%)
  • rgb(66, 117, 10)
  • #42750A
  • hsl(45, 58%, 86%)
  • rgb(241, 231, 201)
  • #F1E7C9

Title big size with words in bold

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

4.50039 62.32
  • hsl(88, 85%, 24%)
  • rgb(66, 117, 9)
  • #427509
  • hsl(45, 58%, 86%)
  • rgb(241, 231, 201)
  • #F1E7C9

Title big size with words in bold

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

4.50091 62.5
  • hsl(92, 68%, 27%)
  • rgb(65, 117, 22)
  • #417516
  • hsl(45, 58%, 86%)
  • rgb(241, 231, 201)
  • #F1E7C9

Title big size with words in bold

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

4.50001 61.34
  • hsl(92, 69%, 27%)
  • rgb(65, 117, 21)
  • #417515
  • hsl(45, 58%, 86%)
  • rgb(241, 231, 201)
  • #F1E7C9

Title big size with words in bold

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

4.50091 61.4
  • hsl(96, 60%, 28%)
  • rgb(64, 117, 29)
  • #40751D
  • hsl(45, 58%, 86%)
  • rgb(241, 231, 201)
  • #F1E7C9

Title big size with words in bold

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

4.50074 61.46
  • hsl(92, 87%, 24%)
  • rgb(59, 118, 8)
  • #3B7608
  • hsl(45, 58%, 86%)
  • rgb(241, 231, 201)
  • #F1E7C9

Title big size with words in bold

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

4.50004 64.35
  • hsl(91, 88%, 24%)
  • rgb(59, 118, 7)
  • #3B7607
  • hsl(45, 58%, 86%)
  • rgb(241, 231, 201)
  • #F1E7C9

Title big size with words in bold

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

4.50056 64.55
  • hsl(96, 72%, 26%)
  • rgb(58, 118, 19)
  • #3A7613
  • hsl(45, 58%, 86%)
  • rgb(241, 231, 201)
  • #F1E7C9

Title big size with words in bold

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

4.50022 63.38
  • hsl(95, 95%, 23%)
  • rgb(51, 119, 3)
  • #337703
  • hsl(45, 58%, 86%)
  • rgb(241, 231, 201)
  • #F1E7C9

Title big size with words in bold

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

4.50008 68.4
  • hsl(94, 96%, 23%)
  • rgb(51, 119, 2)
  • #337702
  • hsl(45, 58%, 86%)
  • rgb(241, 231, 201)
  • #F1E7C9

Title big size with words in bold

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

4.5006 68.64
  • hsl(87, 5%, 39%)
  • rgb(101, 106, 95)
  • #656A5F
  • hsl(45, 58%, 86%)
  • rgb(241, 231, 201)
  • #F1E7C9

Title big size with words in bold

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

4.5008 47.78
Not satisfied?
Gimme a range of colors