Contrast Finder

Wyszukiwarka kontrastów znajduje właściwe kontrasty kolorów, aby zapewnić dostępność stron internetowych.

WCAG kryterium sukcesu 1.4.3 WCAG wymaga, aby tekst miał minimalny współczynnik kontrastu 4.5 (oraz 3 dla dużego tekstu).

Kolor szesnastkowo, RGB lub słowami kluczowymi CSS.
Przykład: #FFFFFF, rgb(255,255,255) lub white
Kontrast kolorów jest niewystarczający.
Bieżący współczynnik: 2.3

Stary kontrast

Zły kontrast
Pierwszy plan Tło Przyklad Współczynnik Odległość
  • hsl(0, 0%, 100%)
  • rgb(255, 255, 255)
  • #FFFFFF
  • hsl(93, 46%, 50%)
  • rgb(124, 188, 72)
  • #7CBC48

Duży rozmiar tytułu z pogrubionym tekstem

Oto próbka tekstu z kilkoma pogrubionymi słowami aby zilustrować kontrast.

2.29662

Nowy kontrast : 29 wyniki/ów (7 150 176 testowane kolory)

Poprawne kontrasty
Pierwszy plan Tło Przyklad Współczynnik Odległość
  • hsl(0, 0%, 100%)
  • rgb(255, 255, 255)
  • #FFFFFF
  • hsl(90, 0%, 46%)
  • rgb(118, 119, 117)
  • #767775

Duży rozmiar tytułu z pogrubionym tekstem

Oto próbka tekstu z kilkoma pogrubionymi słowami aby zilustrować kontrast.

4.50073 61.94
  • hsl(0, 0%, 100%)
  • rgb(255, 255, 255)
  • #FFFFFF
  • hsl(92, 14%, 42%)
  • rgb(107, 124, 93)
  • #6B7C5D

Duży rozmiar tytułu z pogrubionym tekstem

Oto próbka tekstu z kilkoma pogrubionymi słowami aby zilustrować kontrast.

4.50037 63.64
  • hsl(0, 0%, 100%)
  • rgb(255, 255, 255)
  • #FFFFFF
  • hsl(94, 16%, 41%)
  • rgb(104, 125, 89)
  • #687D59

Duży rozmiar tytułu z pogrubionym tekstem

Oto próbka tekstu z kilkoma pogrubionymi słowami aby zilustrować kontrast.

4.50034 63.26
  • hsl(0, 0%, 100%)
  • rgb(255, 255, 255)
  • #FFFFFF
  • hsl(95, 20%, 41%)
  • rgb(101, 126, 84)
  • #657E54

Duży rozmiar tytułu z pogrubionym tekstem

Oto próbka tekstu z kilkoma pogrubionymi słowami aby zilustrować kontrast.

4.50093 62.89
  • hsl(0, 0%, 100%)
  • rgb(255, 255, 255)
  • #FFFFFF
  • hsl(88, 28%, 38%)
  • rgb(100, 127, 70)
  • #647F46

Duży rozmiar tytułu z pogrubionym tekstem

Oto próbka tekstu z kilkoma pogrubionymi słowami aby zilustrować kontrast.

4.50059 62.21
  • hsl(0, 0%, 100%)
  • rgb(255, 255, 255)
  • #FFFFFF
  • hsl(91, 31%, 38%)
  • rgb(96, 128, 67)
  • #608043

Duży rozmiar tytułu z pogrubionym tekstem

Oto próbka tekstu z kilkoma pogrubionymi słowami aby zilustrować kontrast.

4.50057 61.98
  • hsl(0, 0%, 100%)
  • rgb(255, 255, 255)
  • #FFFFFF
  • hsl(90, 37%, 36%)
  • rgb(93, 129, 58)
  • #5D813A

Duży rozmiar tytułu z pogrubionym tekstem

Oto próbka tekstu z kilkoma pogrubionymi słowami aby zilustrować kontrast.

4.50003 61.96
  • hsl(0, 0%, 100%)
  • rgb(255, 255, 255)
  • #FFFFFF
  • hsl(96, 31%, 38%)
  • rgb(91, 129, 67)
  • #5B8143

Duży rozmiar tytułu z pogrubionym tekstem

Oto próbka tekstu z kilkoma pogrubionymi słowami aby zilustrować kontrast.

4.50066 62.27
  • hsl(0, 0%, 100%)
  • rgb(255, 255, 255)
  • #FFFFFF
  • hsl(88, 48%, 34%)
  • rgb(90, 130, 45)
  • #5A822D

Duży rozmiar tytułu z pogrubionym tekstem

Oto próbka tekstu z kilkoma pogrubionymi słowami aby zilustrować kontrast.

4.50095 63.34
  • hsl(0, 0%, 100%)
  • rgb(255, 255, 255)
  • #FFFFFF
  • hsl(97, 36%, 37%)
  • rgb(87, 130, 61)
  • #57823D

Duży rozmiar tytułu z pogrubionym tekstem

Oto próbka tekstu z kilkoma pogrubionymi słowami aby zilustrować kontrast.

4.50095 62.75
  • hsl(0, 0%, 100%)
  • rgb(255, 255, 255)
  • #FFFFFF
  • hsl(88, 57%, 32%)
  • rgb(86, 131, 35)
  • #568323

Duży rozmiar tytułu z pogrubionym tekstem

Oto próbka tekstu z kilkoma pogrubionymi słowami aby zilustrować kontrast.

4.50018 66.25
  • hsl(0, 0%, 100%)
  • rgb(255, 255, 255)
  • #FFFFFF
  • hsl(91, 51%, 33%)
  • rgb(85, 131, 42)
  • #55832A

Duży rozmiar tytułu z pogrubionym tekstem

Oto próbka tekstu z kilkoma pogrubionymi słowami aby zilustrować kontrast.

4.50044 64.75
  • hsl(0, 0%, 100%)
  • rgb(255, 255, 255)
  • #FFFFFF
  • hsl(93, 46%, 35%)
  • rgb(84, 131, 48)
  • #548330

Duży rozmiar tytułu z pogrubionym tekstem

Oto próbka tekstu z kilkoma pogrubionymi słowami aby zilustrować kontrast.

4.50049 64.07
  • hsl(0, 0%, 100%)
  • rgb(255, 255, 255)
  • #FFFFFF
  • hsl(96, 42%, 36%)
  • rgb(83, 131, 53)
  • #538335

Duży rozmiar tytułu z pogrubionym tekstem

Oto próbka tekstu z kilkoma pogrubionymi słowami aby zilustrować kontrast.

4.50091 63.9
  • hsl(0, 0%, 100%)
  • rgb(255, 255, 255)
  • #FFFFFF
  • hsl(89, 66%, 31%)
  • rgb(81, 132, 27)
  • #51841B

Duży rozmiar tytułu z pogrubionym tekstem

Oto próbka tekstu z kilkoma pogrubionymi słowami aby zilustrować kontrast.

4.50045 70.22
  • hsl(0, 0%, 100%)
  • rgb(255, 255, 255)
  • #FFFFFF
  • hsl(92, 58%, 32%)
  • rgb(80, 132, 35)
  • #508423

Duży rozmiar tytułu z pogrubionym tekstem

Oto próbka tekstu z kilkoma pogrubionymi słowami aby zilustrować kontrast.

4.50077 67.78
  • hsl(0, 0%, 100%)
  • rgb(255, 255, 255)
  • #FFFFFF
  • hsl(95, 51%, 34%)
  • rgb(79, 132, 42)
  • #4F842A

Duży rozmiar tytułu z pogrubionym tekstem

Oto próbka tekstu z kilkoma pogrubionymi słowami aby zilustrować kontrast.

4.50026 66.47
  • hsl(0, 0%, 100%)
  • rgb(255, 255, 255)
  • #FFFFFF
  • hsl(91, 70%, 30%)
  • rgb(75, 133, 23)
  • #4B8517

Duży rozmiar tytułu z pogrubionym tekstem

Oto próbka tekstu z kilkoma pogrubionymi słowami aby zilustrować kontrast.

4.50011 73.78
  • hsl(0, 0%, 100%)
  • rgb(255, 255, 255)
  • #FFFFFF
  • hsl(91, 71%, 30%)
  • rgb(75, 133, 22)
  • #4B8516

Duży rozmiar tytułu z pogrubionym tekstem

Oto próbka tekstu z kilkoma pogrubionymi słowami aby zilustrować kontrast.

4.50087 74.23
  • hsl(0, 0%, 100%)
  • rgb(255, 255, 255)
  • #FFFFFF
  • hsl(94, 62%, 32%)
  • rgb(74, 133, 31)
  • #4A851F

Duży rozmiar tytułu z pogrubionym tekstem

Oto próbka tekstu z kilkoma pogrubionymi słowami aby zilustrować kontrast.

4.50068 71.16
  • hsl(0, 0%, 100%)
  • rgb(255, 255, 255)
  • #FFFFFF
  • hsl(97, 55%, 33%)
  • rgb(73, 133, 38)
  • #498526

Duży rozmiar tytułu z pogrubionym tekstem

Oto próbka tekstu z kilkoma pogrubionymi słowami aby zilustrować kontrast.

4.50036 69.68
  • hsl(0, 0%, 100%)
  • rgb(255, 255, 255)
  • #FFFFFF
  • hsl(90, 88%, 27%)
  • rgb(69, 134, 8)
  • #458608

Duży rozmiar tytułu z pogrubionym tekstem

Oto próbka tekstu z kilkoma pogrubionymi słowami aby zilustrować kontrast.

4.50008 83.68
  • hsl(0, 0%, 100%)
  • rgb(255, 255, 255)
  • #FFFFFF
  • hsl(90, 90%, 27%)
  • rgb(69, 134, 7)
  • #458607

Duży rozmiar tytułu z pogrubionym tekstem

Oto próbka tekstu z kilkoma pogrubionymi słowami aby zilustrować kontrast.

4.5005 84.27
  • hsl(0, 0%, 100%)
  • rgb(255, 255, 255)
  • #FFFFFF
  • hsl(90, 91%, 27%)
  • rgb(69, 134, 6)
  • #458606

Duży rozmiar tytułu z pogrubionym tekstem

Oto próbka tekstu z kilkoma pogrubionymi słowami aby zilustrować kontrast.

4.50092 84.87
  • hsl(0, 0%, 100%)
  • rgb(255, 255, 255)
  • #FFFFFF
  • hsl(95, 72%, 30%)
  • rgb(68, 134, 21)
  • #448615

Duży rozmiar tytułu z pogrubionym tekstem

Oto próbka tekstu z kilkoma pogrubionymi słowami aby zilustrować kontrast.

4.50001 77.51
  • hsl(0, 0%, 100%)
  • rgb(255, 255, 255)
  • #FFFFFF
  • hsl(94, 74%, 30%)
  • rgb(68, 134, 20)
  • #448614

Duży rozmiar tytułu z pogrubionym tekstem

Oto próbka tekstu z kilkoma pogrubionymi słowami aby zilustrować kontrast.

4.50071 77.95
  • hsl(0, 0%, 100%)
  • rgb(255, 255, 255)
  • #FFFFFF
  • hsl(94, 91%, 27%)
  • rgb(61, 135, 6)
  • #3D8706

Duży rozmiar tytułu z pogrubionym tekstem

Oto próbka tekstu z kilkoma pogrubionymi słowami aby zilustrować kontrast.

4.50003 88.21
  • hsl(0, 0%, 100%)
  • rgb(255, 255, 255)
  • #FFFFFF
  • hsl(94, 92%, 27%)
  • rgb(61, 135, 5)
  • #3D8705

Duży rozmiar tytułu z pogrubionym tekstem

Oto próbka tekstu z kilkoma pogrubionymi słowami aby zilustrować kontrast.

4.50045 88.78
  • hsl(0, 0%, 100%)
  • rgb(255, 255, 255)
  • #FFFFFF
  • hsl(93, 94%, 27%)
  • rgb(61, 135, 4)
  • #3D8704

Duży rozmiar tytułu z pogrubionym tekstem

Oto próbka tekstu z kilkoma pogrubionymi słowami aby zilustrować kontrast.

4.50087 89.35
Wynik Cię nie zadowala?
Daj mi zakres kolorów