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

Stary kontrast

Zły kontrast
Pierwszy plan Tło Przyklad Współczynnik Odległość
  • hsl(0, 0%, 100%)
  • rgb(255, 255, 255)
  • #FFFFFF
  • hsl(68, 92%, 41%)
  • rgb(175, 203, 8)
  • #AFCB08

Duży rozmiar tytułu z pogrubionym tekstem

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

1.84718

Nowy kontrast : 21 wyniki/ów (3 659 369 testowane kolory)

Poprawne kontrasty
Pierwszy plan Tło Przyklad Współczynnik Odległość
  • hsl(0, 0%, 100%)
  • rgb(255, 255, 255)
  • #FFFFFF
  • hsl(64, 35%, 35%)
  • rgb(118, 123, 59)
  • #767B3B

Duży rozmiar tytułu z pogrubionym tekstem

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

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

Duży rozmiar tytułu z pogrubionym tekstem

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

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

Duży rozmiar tytułu z pogrubionym tekstem

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

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

Duży rozmiar tytułu z pogrubionym tekstem

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

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

Duży rozmiar tytułu z pogrubionym tekstem

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

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

Duży rozmiar tytułu z pogrubionym tekstem

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

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

Duży rozmiar tytułu z pogrubionym tekstem

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

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

Duży rozmiar tytułu z pogrubionym tekstem

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

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

Duży rozmiar tytułu z pogrubionym tekstem

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

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

Duży rozmiar tytułu z pogrubionym tekstem

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

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

Duży rozmiar tytułu z pogrubionym tekstem

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

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

Duży rozmiar tytułu z pogrubionym tekstem

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

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

Duży rozmiar tytułu z pogrubionym tekstem

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

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

Duży rozmiar tytułu z pogrubionym tekstem

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

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

Duży rozmiar tytułu z pogrubionym tekstem

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

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

Duży rozmiar tytułu z pogrubionym tekstem

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

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

Duży rozmiar tytułu z pogrubionym tekstem

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

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

Duży rozmiar tytułu z pogrubionym tekstem

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

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

Duży rozmiar tytułu z pogrubionym tekstem

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

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

Duży rozmiar tytułu z pogrubionym tekstem

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

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

Duży rozmiar tytułu z pogrubionym tekstem

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

4.50094 92.65
Wynik Cię nie zadowala?
Daj mi zakres kolorów