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: 3.9

Old contrast

Invalid contrast
Foreground Background Sample Ratio Distance
  • hsl(49, 100%, 49%)
  • rgb(252, 206, 0)
  • #FCCE00
  • hsl(208, 10%, 39%)
  • rgb(91, 102, 112)
  • #5B6670

Title big size with words in bold

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

3.90228

New contrast : 13 results (428,544 colors tested)

Valid contrasts
Foreground Background Sample Ratio Distance
  • hsl(53, 96%, 54%)
  • rgb(251, 227, 29)
  • #FBE31D
  • hsl(208, 10%, 39%)
  • rgb(91, 102, 112)
  • #5B6670

Title big size with words in bold

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

4.50004 32.28
  • hsl(53, 96%, 55%)
  • rgb(251, 227, 30)
  • #FBE31E
  • hsl(208, 10%, 39%)
  • rgb(91, 102, 112)
  • #5B6670

Title big size with words in bold

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

4.50032 33.1
  • hsl(53, 96%, 55%)
  • rgb(251, 227, 31)
  • #FBE31F
  • hsl(208, 10%, 39%)
  • rgb(91, 102, 112)
  • #5B6670

Title big size with words in bold

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

4.50061 33.93
  • hsl(53, 96%, 55%)
  • rgb(251, 227, 32)
  • #FBE320
  • hsl(208, 10%, 39%)
  • rgb(91, 102, 112)
  • #5B6670

Title big size with words in bold

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

4.50091 34.77
  • hsl(52, 95%, 59%)
  • rgb(250, 227, 55)
  • #FAE337
  • hsl(208, 10%, 39%)
  • rgb(91, 102, 112)
  • #5B6670

Title big size with words in bold

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

4.50015 56.0
  • hsl(52, 95%, 60%)
  • rgb(250, 227, 56)
  • #FAE338
  • hsl(208, 10%, 39%)
  • rgb(91, 102, 112)
  • #5B6670

Title big size with words in bold

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

4.50069 56.97
  • hsl(54, 92%, 59%)
  • rgb(247, 228, 56)
  • #F7E438
  • hsl(208, 10%, 39%)
  • rgb(91, 102, 112)
  • #5B6670

Title big size with words in bold

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

4.50062 57.1
  • hsl(51, 98%, 60%)
  • rgb(253, 226, 54)
  • #FDE236
  • hsl(208, 10%, 39%)
  • rgb(91, 102, 112)
  • #5B6670

Title big size with words in bold

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

4.50036 54.9
  • hsl(51, 98%, 60%)
  • rgb(253, 226, 55)
  • #FDE237
  • hsl(208, 10%, 39%)
  • rgb(91, 102, 112)
  • #5B6670

Title big size with words in bold

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

4.50089 55.87
  • hsl(52, 99%, 54%)
  • rgb(254, 226, 26)
  • #FEE21A
  • hsl(208, 10%, 39%)
  • rgb(91, 102, 112)
  • #5B6670

Title big size with words in bold

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

4.50016 29.47
  • hsl(52, 99%, 55%)
  • rgb(254, 226, 27)
  • #FEE21B
  • hsl(208, 10%, 39%)
  • rgb(91, 102, 112)
  • #5B6670

Title big size with words in bold

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

4.50041 30.25
  • hsl(52, 99%, 55%)
  • rgb(254, 226, 28)
  • #FEE21C
  • hsl(208, 10%, 39%)
  • rgb(91, 102, 112)
  • #5B6670

Title big size with words in bold

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

4.50067 31.06
  • hsl(52, 99%, 55%)
  • rgb(254, 226, 29)
  • #FEE21D
  • hsl(208, 10%, 39%)
  • rgb(91, 102, 112)
  • #5B6670

Title big size with words in bold

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

4.50095 31.88
Not satisfied?
Gimme a range of colors