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

Old contrast

Invalid contrast
Foreground Background Sample Ratio Distance
  • hsl(0, 0%, 100%)
  • rgb(255, 255, 255)
  • #FFFFFF
  • hsl(68, 92%, 41%)
  • rgb(175, 203, 8)
  • #AFCB08

Title big size with words in bold

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

1.84718

New contrast : 21 results (3,659,369 colors tested)

Valid contrasts
Foreground Background Sample Ratio Distance
  • hsl(0, 0%, 100%)
  • rgb(255, 255, 255)
  • #FFFFFF
  • hsl(64, 35%, 35%)
  • rgb(118, 123, 59)
  • #767B3B

Title big size with words in bold

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

4.50002 82.65
  • hsl(0, 0%, 100%)
  • rgb(255, 255, 255)
  • #FFFFFF
  • hsl(64, 54%, 31%)
  • rgb(117, 124, 37)
  • #757C25

Title big size with words in bold

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

4.50049 87.23
  • hsl(0, 0%, 100%)
  • rgb(255, 255, 255)
  • #FFFFFF
  • hsl(66, 30%, 36%)
  • rgb(117, 123, 65)
  • #757B41

Title big size with words in bold

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

4.50074 80.51
  • hsl(0, 0%, 100%)
  • rgb(255, 255, 255)
  • #FFFFFF
  • hsl(65, 87%, 26%)
  • rgb(115, 125, 8)
  • #737D08

Title big size with words in bold

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

4.50072 88.39
  • hsl(0, 0%, 100%)
  • rgb(255, 255, 255)
  • #FFFFFF
  • hsl(65, 86%, 26%)
  • rgb(115, 125, 9)
  • #737D09

Title big size with words in bold

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

4.5003 88.39
  • hsl(0, 0%, 100%)
  • rgb(255, 255, 255)
  • #FFFFFF
  • hsl(70, 23%, 39%)
  • rgb(115, 123, 76)
  • #737B4C

Title big size with words in bold

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

4.50015 74.5
  • hsl(0, 0%, 100%)
  • rgb(255, 255, 255)
  • #FFFFFF
  • hsl(66, 63%, 30%)
  • rgb(114, 125, 28)
  • #727D1C

Title big size with words in bold

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

4.50094 88.52
  • hsl(0, 0%, 100%)
  • rgb(255, 255, 255)
  • #FFFFFF
  • hsl(69, 34%, 36%)
  • rgb(114, 124, 61)
  • #727C3D

Title big size with words in bold

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

4.50071 82.97
  • hsl(0, 0%, 100%)
  • rgb(255, 255, 255)
  • #FFFFFF
  • hsl(68, 51%, 32%)
  • rgb(113, 125, 40)
  • #717D28

Title big size with words in bold

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

4.50042 87.94
  • hsl(0, 0%, 100%)
  • rgb(255, 255, 255)
  • #FFFFFF
  • hsl(71, 29%, 37%)
  • rgb(113, 124, 67)
  • #717C43

Title big size with words in bold

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

4.5004 80.72
  • hsl(0, 0%, 100%)
  • rgb(255, 255, 255)
  • #FFFFFF
  • hsl(67, 81%, 27%)
  • rgb(111, 126, 13)
  • #6F7E0D

Title big size with words in bold

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

4.50059 89.57
  • hsl(0, 0%, 100%)
  • rgb(255, 255, 255)
  • #FFFFFF
  • hsl(68, 80%, 27%)
  • rgb(111, 126, 14)
  • #6F7E0E

Title big size with words in bold

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

4.50008 89.56
  • hsl(0, 0%, 100%)
  • rgb(255, 255, 255)
  • #FFFFFF
  • hsl(72, 38%, 35%)
  • rgb(111, 125, 56)
  • #6F7D38

Title big size with words in bold

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

4.50021 85.55
  • hsl(0, 0%, 100%)
  • rgb(255, 255, 255)
  • #FFFFFF
  • hsl(70, 61%, 30%)
  • rgb(110, 126, 30)
  • #6E7E1E

Title big size with words in bold

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

4.50056 89.65
  • hsl(0, 0%, 100%)
  • rgb(255, 255, 255)
  • #FFFFFF
  • hsl(72, 50%, 32%)
  • rgb(109, 126, 41)
  • #6D7E29

Title big size with words in bold

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

4.50006 89.13
  • hsl(0, 0%, 100%)
  • rgb(255, 255, 255)
  • #FFFFFF
  • hsl(70, 84%, 27%)
  • rgb(107, 127, 11)
  • #6B7F0B

Title big size with words in bold

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

4.50089 90.99
  • hsl(0, 0%, 100%)
  • rgb(255, 255, 255)
  • #FFFFFF
  • hsl(70, 82%, 27%)
  • rgb(107, 127, 12)
  • #6B7F0C

Title big size with words in bold

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

4.50043 90.99
  • hsl(0, 0%, 100%)
  • rgb(255, 255, 255)
  • #FFFFFF
  • hsl(72, 62%, 30%)
  • rgb(106, 127, 29)
  • #6A7F1D

Title big size with words in bold

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

4.50033 91.19
  • hsl(0, 0%, 100%)
  • rgb(255, 255, 255)
  • #FFFFFF
  • hsl(72, 92%, 26%)
  • rgb(103, 128, 5)
  • #678005

Title big size with words in bold

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

4.50009 92.64
  • hsl(0, 0%, 100%)
  • rgb(255, 255, 255)
  • #FFFFFF
  • hsl(72, 93%, 25%)
  • rgb(103, 128, 4)
  • #678004

Title big size with words in bold

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

4.50051 92.65
  • hsl(0, 0%, 100%)
  • rgb(255, 255, 255)
  • #FFFFFF
  • hsl(72, 95%, 25%)
  • rgb(103, 128, 3)
  • #678003

Title big size with words in bold

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

4.50094 92.65
Not satisfied?
Gimme a range of colors