{"id":15775,"date":"2026-11-13T18:55:00","date_gmt":"2026-11-13T17:55:00","guid":{"rendered":"https:\/\/www.lukaswojcik.com\/blog\/?p=15775"},"modified":"2026-10-26T13:33:23","modified_gmt":"2026-10-26T12:33:23","slug":"jasne-i-ciemne-palety-kontrola-kontrastu-i-ograniczenia","status":"publish","type":"post","link":"https:\/\/www.lukaswojcik.com\/blog\/pl\/tworzenie-stron-internetowych\/tutorials-pl-tworzenie-stron-internetowych\/jasne-i-ciemne-palety-kontrola-kontrastu-i-ograniczenia\/","title":{"rendered":"Jasne i ciemne palety: kontrola kontrastu i ograniczenia"},"content":{"rendered":"<p>Jasny i ciemny motyw mog\u0105 u\u017cywa\u0107 tych samych nazw zmiennych CSS z r\u00f3\u017cnymi warto\u015bciami barw. Czytelno\u015b\u0107 zale\u017cy jednak od faktycznie wy\u015bwietlanej pary pierwszego planu i t\u0142a. Paleta dostarcza mo\u017cliwych barw, a zastosowanie na stronie okre\u015bla potrzebne kontrole kontrastu.<\/p><figure class=\"lw-diagram\"><img decoding=\"async\" src=\"https:\/\/www.lukaswojcik.com\/blog\/wp-content\/uploads\/diagrams\/dia-15775-review-20261024.png\" width=\"1120\" height=\"580\" loading=\"lazy\" alt=\"W\u0142a\u015bciwy pr\u00f3g kontrastu, rzeczywisty wygl\u0105d i obliczona nieprzezroczysta para sRGB\"><figcaption>W\u0142a\u015bciwy pr\u00f3g kontrastu, rzeczywisty wygl\u0105d i obliczona nieprzezroczysta para sRGB.<\/figcaption><\/figure>\n<h2>Kt\u00f3ry pr\u00f3g obowi\u0105zuje?<\/h2>\n<p>WCAG 2.2 wymaga na poziomie AA zasadniczo co najmniej 4,5:1 dla zwyk\u0142ego tekstu. Dla du\u017cego tekstu wystarcza 3:1: chodzi o co najmniej 18 punkt\u00f3w, czyli 24 piksele CSS, albo 14 punkt\u00f3w pogrubionych, czyli oko\u0142o 18,67 piksela CSS. Poziom AAA wymaga 7:1 dla tekstu zwyk\u0142ego i 4,5:1 dla du\u017cego. Wyj\u0105tki obejmuj\u0105 mi\u0119dzy innymi logotypy, tekst czysto dekoracyjny i tekst w nieaktywnych elementach steruj\u0105cych.<\/p>\n<p>Informacje wizualne potrzebne do rozpoznania element\u00f3w steruj\u0105cych, stan\u00f3w lub znacz\u0105cych grafik podlegaj\u0105 r\u00f3wnie\u017c kryterium nietekstowego kontrastu 1.4.11. Pr\u00f3g wynosi 3:1 wobec s\u0105siednich barw, z wyj\u0105tkami okre\u015blonymi w kryterium. Nie ka\u017cda pojedyncza ramka musi osi\u0105ga\u0107 ten kontrast, je\u017celi inne wystarczaj\u0105co rozpoznawalne cechy identyfikuj\u0105 element.<\/p>\n<p>Niska liczba nie dowodzi wi\u0119c automatycznie naruszenia WCAG. Najpierw potrzebne s\u0105 funkcja, rozmiar, stan i rzeczywiste t\u0142o. Z kolei nazwa zmiennej, na przyk\u0142ad <code>--border-soft<\/code>, nie zmienia wymaganej granicy w dekoracj\u0119.<\/p>\n<h2>Przyk\u0142ad mo\u017cliwy do odtworzenia<\/h2>\n<p>Dla nieprzezroczystej barwy tekstu <code>#5e7184<\/code> na tle <code>#f1f5f9<\/code> wz\u00f3r WCAG daje oko\u0142o 4,595593:1. Ta konkretna para spe\u0142nia poziom AA dla zwyk\u0142ego tekstu. Wy\u015bwietlenie z dwoma miejscami po przecinku daje 4,60:1, ale por\u00f3wnanie nadal wykorzystuje warto\u015b\u0107 niezaokr\u0105glon\u0105.<\/p>\n<p><code>#777777<\/code> na bia\u0142ym tle daje natomiast oko\u0142o 4,478089:1 i nie osi\u0105ga 4,5:1. <code>#767676<\/code> na bia\u0142ym tle osi\u0105ga oko\u0142o 4,542225:1. Ma\u0142a zmiana barwy mo\u017ce przekroczy\u0107 pr\u00f3g. Cel 4,6:1 pozostawia pewien zapas, ale nie gwarantuje spe\u0142nienia wymaga\u0144 po p\u00f3\u017aniejszych zmianach t\u0142a.<\/p>\n<p>Poni\u017cszy przyk\u0142ad w Pythonie przyjmuje wy\u0142\u0105cznie nieprzezroczyste sze\u015bciocyfrowe barwy sRGB w zapisie szesnastkowym. Punkt przej\u015bcia przy linearyzacji wynosi 0,04045. Starsza warto\u015b\u0107 0,03928 wybiera t\u0119 sam\u0105 ga\u0142\u0105\u017a dla ca\u0142kowitych kana\u0142\u00f3w 8-bitowych; przyk\u0142ad stosuje aktualn\u0105 definicj\u0119. Alfa, gradienty, kaskada CSS i inne przestrzenie barw pozostaj\u0105 poza zakresem programu.<\/p>\n<figure style=\"--cbb-digits:2\" class=\"cbb cbb--wrap cbb--numbers wp-block-code-beautifier-block-code\" data-lang=\"python\"><figcaption class=\"cbb-head\"><span class=\"cbb-lang\">Python<\/span><span class=\"cbb-actions\"><button type=\"button\" class=\"cbb-button cbb-button--wrap\" data-cbb-action=\"wrap\" aria-pressed=\"true\" title=\"Wrap long lines\"><svg aria-hidden=\"true\" focusable=\"false\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\"><path d=\"M2 4h12M2 8h9.5a2.5 2.5 0 0 1 0 5H8m0 0 1.5-1.5M8 13l1.5 1.5M2 12h3\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"\/><\/svg><span class=\"cbb-sr\">Wrap long lines<\/span><\/button><button type=\"button\" class=\"cbb-button cbb-button--copy\" data-cbb-action=\"copy\" data-cbb-done=\"Copied\" data-cbb-failed=\"Press Ctrl+C to copy\"><svg aria-hidden=\"true\" focusable=\"false\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\"><rect x=\"5.5\" y=\"5.5\" width=\"8\" height=\"8.5\" rx=\"1.5\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.5\"\/><path d=\"M10.5 3.5V3A1.5 1.5 0 0 0 9 1.5H4A1.5 1.5 0 0 0 2.5 3v6.5A1.5 1.5 0 0 0 4 11h.5\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.5\"\/><\/svg><span class=\"cbb-button-label\" aria-live=\"polite\">Copy<\/span><\/button><\/span><\/figcaption><pre class=\"cbb-pre\" tabindex=\"0\"><code class=\"cbb-code language-python\" style=\"counter-reset:cbb-line 0;\"><span class=\"cbb-line\"><span class=\"cbb-string\">\"\"\"WCAG 2.2 ratio for two opaque six-digit sRGB hex colours only.\"\"\"<\/span>\n<\/span><span class=\"cbb-line\"><span class=\"cbb-keyword\">import<\/span> re\n<\/span><span class=\"cbb-line\">\n<\/span><span class=\"cbb-line\"><span class=\"cbb-keyword\">def<\/span> <span class=\"cbb-function\">luminance<\/span>(value):\n<\/span><span class=\"cbb-line\">    <span class=\"cbb-keyword\">if<\/span> <span class=\"cbb-keyword\">not<\/span> <span class=\"cbb-function\">isinstance<\/span>(value, str) <span class=\"cbb-keyword\">or<\/span> <span class=\"cbb-keyword\">not<\/span> re.<span class=\"cbb-function\">fullmatch<\/span>(<span class=\"cbb-string\">r\"#?&#91;0-9a-fA-F&#93;{6}\"<\/span>, value):\n<\/span><span class=\"cbb-line\">        <span class=\"cbb-keyword\">raise<\/span> <span class=\"cbb-function\">ValueError<\/span>(<span class=\"cbb-string\">\"Expected six-digit opaque sRGB hex colour\"<\/span>)\n<\/span><span class=\"cbb-line\">    value = value.<span class=\"cbb-function\">removeprefix<\/span>(<span class=\"cbb-string\">\"#\"<\/span>)\n<\/span><span class=\"cbb-line\">    channels = &#91;<span class=\"cbb-function\">int<\/span>(value&#91;i:i+<span class=\"cbb-number\">2<\/span>&#93;, <span class=\"cbb-number\">16<\/span>) \/ <span class=\"cbb-number\">255<\/span> <span class=\"cbb-keyword\">for<\/span> i <span class=\"cbb-keyword\">in<\/span> (<span class=\"cbb-number\">0<\/span>, <span class=\"cbb-number\">2<\/span>, <span class=\"cbb-number\">4<\/span>)&#93;\n<\/span><span class=\"cbb-line\">    linear = &#91;c \/ <span class=\"cbb-number\">12.92<\/span> <span class=\"cbb-keyword\">if<\/span> c &lt;= <span class=\"cbb-number\">0.04045<\/span> <span class=\"cbb-keyword\">else<\/span> ((c + <span class=\"cbb-number\">0.055<\/span>) \/ <span class=\"cbb-number\">1.055<\/span>) ** <span class=\"cbb-number\">2.4<\/span>\n<\/span><span class=\"cbb-line\">              <span class=\"cbb-keyword\">for<\/span> c <span class=\"cbb-keyword\">in<\/span> channels&#93;\n<\/span><span class=\"cbb-line\">    <span class=\"cbb-keyword\">return<\/span> <span class=\"cbb-function\">sum<\/span>(w * c <span class=\"cbb-keyword\">for<\/span> w, c <span class=\"cbb-keyword\">in<\/span> <span class=\"cbb-function\">zip<\/span>((<span class=\"cbb-number\">0.2126<\/span>, <span class=\"cbb-number\">0.7152<\/span>, <span class=\"cbb-number\">0.0722<\/span>), linear))\n<\/span><span class=\"cbb-line\">\n<\/span><span class=\"cbb-line\"><span class=\"cbb-keyword\">def<\/span> <span class=\"cbb-function\">contrast<\/span>(foreground, background):\n<\/span><span class=\"cbb-line\">    a, b = <span class=\"cbb-function\">luminance<\/span>(foreground), <span class=\"cbb-function\">luminance<\/span>(background)\n<\/span><span class=\"cbb-line\">    <span class=\"cbb-keyword\">return<\/span> (<span class=\"cbb-function\">max<\/span>(a, b) + <span class=\"cbb-number\">0.05<\/span>) \/ (<span class=\"cbb-function\">min<\/span>(a, b) + <span class=\"cbb-number\">0.05<\/span>)\n<\/span><span class=\"cbb-line\">\n<\/span><span class=\"cbb-line\"><span class=\"cbb-keyword\">if<\/span> __name__ == <span class=\"cbb-string\">\"__main__\"<\/span>:\n<\/span><span class=\"cbb-line\">    ratio = <span class=\"cbb-function\">contrast<\/span>(<span class=\"cbb-string\">\"#5e7184\"<\/span>, <span class=\"cbb-string\">\"#f1f5f9\"<\/span>)\n<\/span><span class=\"cbb-line\">    <span class=\"cbb-function\">print<\/span>(<span class=\"cbb-string\">f\"{ratio:.4f}:1; AA normal text: {ratio &gt;= 4.5}\"<\/span>)<\/span><\/code><\/pre><\/figure>\n<h2>Cztery ograniczenia kontroli samej palety<\/h2>\n<ol><li><strong>Nazwy nie zast\u0119puj\u0105 zastosowania.<\/strong> <code>--on-accent<\/code> sugeruje tekst na powierzchni akcentowej, ale CSS mo\u017ce u\u017cy\u0107 warto\u015bci gdzie indziej. Warto\u015b\u0107 nazwana mi\u0119kk\u0105 mo\u017ce r\u00f3wnie\u017c stanowi\u0107 wa\u017cny tekst.<\/li><li><strong>Brak nadpisania nie uruchamia automatycznie warto\u015bci zast\u0119pczej.<\/strong> Ciemny motyw mo\u017ce dziedziczy\u0107 warto\u015bci ze wsp\u00f3lnej podstawy. Selektory, kaskada i dziedziczenie okre\u015blaj\u0105 warto\u015b\u0107 obliczon\u0105. Warto\u015b\u0107 zast\u0119pcza <code>var()<\/code> dzia\u0142a w okre\u015blonych warunkach; sam brak drugiej deklaracji nie dowodzi b\u0142\u0119du.<\/li><li><strong>Przezroczysto\u015b\u0107 i gradienty wymagaj\u0105 rzeczywistego pod\u0142o\u017ca.<\/strong> Warto\u015b\u0107 alfa okre\u015bla przezroczysto\u015b\u0107. Widoczna barwa powstaje z po\u0142\u0105czenia cz\u0119\u015bciowo przezroczystej barwy z warstwami poni\u017cej. Obrazy lub gradienty wymagaj\u0105 kontroli najmniej korzystnego istotnego obszaru za tekstem. Obszar mo\u017ce le\u017ce\u0107 tak\u017ce wewn\u0105trz gradientu, a nie tylko na ko\u0144cu.<\/li><li><strong>Stany zmieniaj\u0105 pary.<\/strong> Fokus, najechanie, zaznaczenie, komunikaty b\u0142\u0119d\u00f3w i wyr\u00f3\u017cnione karty mog\u0105 wprowadza\u0107 inne t\u0142a. Poprawna para domy\u015blna nie zatwierdza wszystkich stan\u00f3w ani ca\u0142ej witryny.<\/li><\/ol>\n\n\n<!-- lw-flux-illu 15771-a3 -->\n<figure class=\"lw-illu\"><img src=\"https:\/\/www.lukaswojcik.com\/blog\/wp-content\/uploads\/illustrationen\/flux-15771-a3.webp\" width=\"1120\" height=\"630\" loading=\"lazy\" decoding=\"async\" alt=\"Dwie jednakowe szklane zawieszki wisz\u0105 w oknie, jedna przed zas\u0142on\u0105, druga przed \u015bcian\u0105, i wygl\u0105daj\u0105 zupe\u0142nie inaczej. Tak samo widoczny odcie\u0144 przezroczystej powierzchni zale\u017cy od rzeczywistego t\u0142a.\"><figcaption>Dwie jednakowe szklane zawieszki wisz\u0105 w oknie, jedna przed zas\u0142on\u0105, druga przed \u015bcian\u0105, i wygl\u0105daj\u0105 zupe\u0142nie inaczej. Tak samo widoczny odcie\u0144 przezroczystej powierzchni zale\u017cy od rzeczywistego t\u0142a.<\/figcaption><\/figure>\n\n\n<h2>Fokus i etykiety formularzy<\/h2>\n<p>Wska\u017anik fokusu oznacza element aktualnie wybrany do obs\u0142ugi klawiatur\u0105, na przyk\u0142ad widoczn\u0105 ramk\u0105. Wska\u017anik zaprojektowany przez autora musi spe\u0142nia\u0107 odpowiednie wymagania rozpoznawalno\u015bci stan\u00f3w. WCAG 2.4.13 na poziomie AAA dodaje wymagania dotycz\u0105ce powierzchni wska\u017anika i co najmniej 3:1 pomi\u0119dzy tymi samymi pikselami w stanie z fokusem i bez fokusu. To inne por\u00f3wnanie ni\u017c kontrola s\u0105siednich barw wed\u0142ug 1.4.11. Niezmieniona prezentacja przegl\u0105darki i inne wyra\u017anie wymienione przypadki maj\u0105 osobne wyj\u0105tki.<\/p>\n<p>Tekst zast\u0119pczy w aktywnym polu wymaga odpowiedniego kontrastu tekstowego. Czytelny placeholder nadal nie zast\u0119puje w\u0142a\u015bciwej etykiety, poniewa\u017c wskaz\u00f3wka znika podczas wpisywania. Cel pola i przyk\u0142ady powinny pozosta\u0107 zrozumia\u0142e r\u00f3wnie\u017c w trakcie edycji.<\/p>\n<h2>Co potrafi ustali\u0107 narz\u0119dzie?<\/h2>\n<p><a href=\"https:\/\/www.lukaswojcik.com\/blog\/pl\/narzedzia\/colour-contrast-palette-auditor\/\">Podlinkowany audytor palety<\/a> oblicza pary barw lokalnie w przegl\u0105darce. Obecna implementacja odczytuje deklaracje wzorcem tekstowym i odgaduje role z nazw. Nie rozwi\u0105zuje rzeczywistej kaskady CSS: przy powt\u00f3rzonej nazwie wygrywa pierwsza znaleziona warto\u015b\u0107, a deklaracje w komentarzach tak\u017ce mog\u0105 zosta\u0107 odczytane. Warto\u015bci z <code>var()<\/code> lub <code>oklch()<\/code> nie s\u0105 rozwi\u0105zywane.<\/p>\n<p>Alfa jest oznaczana, ale nie uczestniczy w obliczaniu kontrastu. Izolowany test z ca\u0142kowicie przezroczyst\u0105 czerni\u0105 na bia\u0142ym tle daje wi\u0119c 21:1 i dobr\u0105 ocen\u0119 og\u00f3ln\u0105 mimo ostrze\u017cenia o alfie. Inny test traktuje <code>--text-soft<\/code> jako dekoracj\u0119 i wy\u0142\u0105cza warto\u015b\u0107 z ustale\u0144. Dobry wynik jest zatem tylko wskaz\u00f3wk\u0105 dotycz\u0105c\u0105 rozpoznanych hipotetycznych par, a nie potwierdzeniem poprawno\u015bci wyrenderowanego interfejsu.<\/p>\n<p>Sze\u015b\u0107 izolowanych test\u00f3w logiki narz\u0119dzia i dwana\u015bcie test\u00f3w przyk\u0142adu w Pythonie potwierdza te konkretne stwierdzenia. Obliczenia nie zast\u0119puj\u0105 kontroli wizualnej i stan\u00f3w w przegl\u0105darce. Wiarygodny przegl\u0105d obejmuje oba motywy, faktyczne zestawienia barw oraz istotne stany element\u00f3w steruj\u0105cych.<\/p>\n<div class=\"lw-faq\"><h2>Pytania i odpowiedzi<\/h2><h3>Czy wy\u015bwietlone 4,50 mo\u017ce nadal oznacza\u0107 brak spe\u0142nienia progu?<\/h3><p>Tak. Warto\u015b\u0107 minimalnie poni\u017cej 4,5 mo\u017ce zaokr\u0105gli\u0107 si\u0119 do 4,50. Decyzja musi poprzedza\u0107 zaokr\u0105glenie.<\/p><h3>Czy blada ramka zawsze jest dekoracj\u0105?<\/h3><p>Nie. Decyduje funkcja, a nie barwa ani nazwa zmiennej. Informacja potrzebna do obs\u0142ugi lub zrozumienia wymaga odpowiedniej kontroli.<\/p><h3>Czy dwie kompletne palety dowodz\u0105 dost\u0119pno\u015bci?<\/h3><p>Nie. Kompletno\u015b\u0107 palet i obliczenia kontrastu obejmuj\u0105 tylko cz\u0119\u015b\u0107 wymaga\u0144. Rzeczywisty wygl\u0105d, stany, etykiety i inne kryteria WCAG nadal wymagaj\u0105 oddzielnej oceny.<\/p><\/div>\n<div class=\"lw-quellen\"><h2>\u0179r\u00f3d\u0142a<\/h2><ul><li><a href=\"https:\/\/www.w3.org\/WAI\/WCAG22\/Understanding\/contrast-minimum.html\" target=\"_blank\" rel=\"noopener noreferrer\">WCAG 2.2: minimalny kontrast<\/a><\/li><li><a href=\"https:\/\/www.w3.org\/WAI\/WCAG22\/Understanding\/non-text-contrast.html\" target=\"_blank\" rel=\"noopener noreferrer\">WCAG 2.2: kontrast element\u00f3w nietekstowych<\/a><\/li><li><a href=\"https:\/\/www.w3.org\/TR\/WCAG22\/#dfn-relative-luminance\" target=\"_blank\" rel=\"noopener noreferrer\">WCAG 2.2: luminancja wzgl\u0119dna<\/a><\/li><li><a href=\"https:\/\/www.w3.org\/WAI\/WCAG22\/Understanding\/focus-appearance.html\" target=\"_blank\" rel=\"noopener noreferrer\">WCAG 2.2: wygl\u0105d fokusu<\/a><\/li><li><a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/CSS\/Guides\/Cascading_variables\/Using_custom_properties\" target=\"_blank\" rel=\"noopener noreferrer\">MDN: niestandardowe w\u0142a\u015bciwo\u015bci CSS<\/a><\/li><li><a href=\"https:\/\/www.w3.org\/WAI\/tutorials\/forms\/labels\/\" target=\"_blank\" rel=\"noopener noreferrer\">W3C WAI: etykiety formularzy<\/a><\/li><\/ul><\/div>\n","protected":false},"excerpt":{"rendered":"<p>Kontrast zale\u017cy od rzeczywistych par barw, dziedziczenia CSS i stan\u00f3w element\u00f3w. Sprawdzony przyk\u0142ad sRGB wyja\u015bnia progi WCAG i zaokr\u0105glanie, a testy narz\u0119dzia pokazuj\u0105 ograniczenia kontroli samej palety.<\/p>\n","protected":false},"author":1,"featured_media":32489,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[154],"tags":[92238,92762],"class_list":["post-15775","post","type-post","status-publish","format-standard","hentry","category-tutorials-pl-tworzenie-stron-internetowych","tag-tutorial-pl","tag-web-development-pl"],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v28.1 - https:\/\/yoast.com\/product\/yoast-seo-wordpress\/ -->\n<title>Jasne i ciemne palety: kontrola kontrastu i ograniczenia | Lukas Wojcik<\/title>\n<meta name=\"description\" content=\"Kontrast WCAG 2.2 zmierzony w jasnej i ciemnej palecie: pi\u0119\u0107 barw tekstu poni\u017cej granicy, jak je poprawiono, i cztery fa\u0142szywe ustalenia naiwnego audytu.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.lukaswojcik.com\/blog\/pl\/tworzenie-stron-internetowych\/tutorials-pl-tworzenie-stron-internetowych\/jasne-i-ciemne-palety-kontrola-kontrastu-i-ograniczenia\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Jasne i ciemne palety: kontrola kontrastu i ograniczenia | Lukas Wojcik\" \/>\n<meta property=\"og:description\" content=\"Kontrast WCAG 2.2 zmierzony w jasnej i ciemnej palecie: pi\u0119\u0107 barw tekstu poni\u017cej granicy, jak je poprawiono, i cztery fa\u0142szywe ustalenia naiwnego audytu.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.lukaswojcik.com\/blog\/pl\/tworzenie-stron-internetowych\/tutorials-pl-tworzenie-stron-internetowych\/jasne-i-ciemne-palety-kontrola-kontrastu-i-ograniczenia\/\" \/>\n<meta property=\"og:site_name\" content=\"Lukas Wojcik - Blog\" \/>\n<meta property=\"article:published_time\" content=\"2026-11-13T17:55:00+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.lukaswojcik.com\/blog\/wp-content\/uploads\/2026\/11\/flux-voll2-15771-15775.png\" \/>\n\t<meta property=\"og:image:width\" content=\"1200\" \/>\n\t<meta property=\"og:image:height\" content=\"630\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/png\" \/>\n<meta name=\"author\" content=\"Lukas Wojcik\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Lukas Wojcik\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"5 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\\\/\\\/www.lukaswojcik.com\\\/blog\\\/pl\\\/tworzenie-stron-internetowych\\\/tutorials-pl-tworzenie-stron-internetowych\\\/jasne-i-ciemne-palety-kontrola-kontrastu-i-ograniczenia\\\/#article\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.lukaswojcik.com\\\/blog\\\/pl\\\/tworzenie-stron-internetowych\\\/tutorials-pl-tworzenie-stron-internetowych\\\/jasne-i-ciemne-palety-kontrola-kontrastu-i-ograniczenia\\\/\"},\"author\":{\"name\":\"Lukas Wojcik\",\"@id\":\"https:\\\/\\\/www.lukaswojcik.com\\\/blog\\\/#\\\/schema\\\/person\\\/895f7604f9b6b71aad9bba33af28d0f9\"},\"headline\":\"Jasne i ciemne palety: kontrola kontrastu i ograniczenia\",\"datePublished\":\"2026-11-13T17:55:00+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/www.lukaswojcik.com\\\/blog\\\/pl\\\/tworzenie-stron-internetowych\\\/tutorials-pl-tworzenie-stron-internetowych\\\/jasne-i-ciemne-palety-kontrola-kontrastu-i-ograniczenia\\\/\"},\"wordCount\":975,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\\\/\\\/www.lukaswojcik.com\\\/blog\\\/#\\\/schema\\\/person\\\/895f7604f9b6b71aad9bba33af28d0f9\"},\"image\":{\"@id\":\"https:\\\/\\\/www.lukaswojcik.com\\\/blog\\\/pl\\\/tworzenie-stron-internetowych\\\/tutorials-pl-tworzenie-stron-internetowych\\\/jasne-i-ciemne-palety-kontrola-kontrastu-i-ograniczenia\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/www.lukaswojcik.com\\\/blog\\\/wp-content\\\/uploads\\\/2026\\\/11\\\/flux-voll2-15771-15775.png\",\"keywords\":[\"Tutorial\",\"Web Development\"],\"articleSection\":[\"Tutorials\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\\\/\\\/www.lukaswojcik.com\\\/blog\\\/pl\\\/tworzenie-stron-internetowych\\\/tutorials-pl-tworzenie-stron-internetowych\\\/jasne-i-ciemne-palety-kontrola-kontrastu-i-ograniczenia\\\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/www.lukaswojcik.com\\\/blog\\\/pl\\\/tworzenie-stron-internetowych\\\/tutorials-pl-tworzenie-stron-internetowych\\\/jasne-i-ciemne-palety-kontrola-kontrastu-i-ograniczenia\\\/\",\"url\":\"https:\\\/\\\/www.lukaswojcik.com\\\/blog\\\/pl\\\/tworzenie-stron-internetowych\\\/tutorials-pl-tworzenie-stron-internetowych\\\/jasne-i-ciemne-palety-kontrola-kontrastu-i-ograniczenia\\\/\",\"name\":\"Jasne i ciemne palety: kontrola kontrastu i ograniczenia | Lukas Wojcik\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.lukaswojcik.com\\\/blog\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/www.lukaswojcik.com\\\/blog\\\/pl\\\/tworzenie-stron-internetowych\\\/tutorials-pl-tworzenie-stron-internetowych\\\/jasne-i-ciemne-palety-kontrola-kontrastu-i-ograniczenia\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/www.lukaswojcik.com\\\/blog\\\/pl\\\/tworzenie-stron-internetowych\\\/tutorials-pl-tworzenie-stron-internetowych\\\/jasne-i-ciemne-palety-kontrola-kontrastu-i-ograniczenia\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/www.lukaswojcik.com\\\/blog\\\/wp-content\\\/uploads\\\/2026\\\/11\\\/flux-voll2-15771-15775.png\",\"datePublished\":\"2026-11-13T17:55:00+00:00\",\"description\":\"Kontrast WCAG 2.2 zmierzony w jasnej i ciemnej palecie: pi\u0119\u0107 barw tekstu poni\u017cej granicy, jak je poprawiono, i cztery fa\u0142szywe ustalenia naiwnego audytu.\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/www.lukaswojcik.com\\\/blog\\\/pl\\\/tworzenie-stron-internetowych\\\/tutorials-pl-tworzenie-stron-internetowych\\\/jasne-i-ciemne-palety-kontrola-kontrastu-i-ograniczenia\\\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/www.lukaswojcik.com\\\/blog\\\/pl\\\/tworzenie-stron-internetowych\\\/tutorials-pl-tworzenie-stron-internetowych\\\/jasne-i-ciemne-palety-kontrola-kontrastu-i-ograniczenia\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/www.lukaswojcik.com\\\/blog\\\/pl\\\/tworzenie-stron-internetowych\\\/tutorials-pl-tworzenie-stron-internetowych\\\/jasne-i-ciemne-palety-kontrola-kontrastu-i-ograniczenia\\\/#primaryimage\",\"url\":\"https:\\\/\\\/www.lukaswojcik.com\\\/blog\\\/wp-content\\\/uploads\\\/2026\\\/11\\\/flux-voll2-15771-15775.png\",\"contentUrl\":\"https:\\\/\\\/www.lukaswojcik.com\\\/blog\\\/wp-content\\\/uploads\\\/2026\\\/11\\\/flux-voll2-15771-15775.png\",\"width\":1200,\"height\":630,\"caption\":\"Jasne i ciemne palety: kontrola kontrastu i ograniczenia\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/www.lukaswojcik.com\\\/blog\\\/pl\\\/tworzenie-stron-internetowych\\\/tutorials-pl-tworzenie-stron-internetowych\\\/jasne-i-ciemne-palety-kontrola-kontrastu-i-ograniczenia\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\\/\\\/www.lukaswojcik.com\\\/blog\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Jasne i ciemne palety: kontrola kontrastu i ograniczenia\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/www.lukaswojcik.com\\\/blog\\\/#website\",\"url\":\"https:\\\/\\\/www.lukaswojcik.com\\\/blog\\\/\",\"name\":\"Lukas Wojcik - Blog\",\"description\":\"\",\"publisher\":{\"@id\":\"https:\\\/\\\/www.lukaswojcik.com\\\/blog\\\/#\\\/schema\\\/person\\\/895f7604f9b6b71aad9bba33af28d0f9\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/www.lukaswojcik.com\\\/blog\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":[\"Person\",\"Organization\"],\"@id\":\"https:\\\/\\\/www.lukaswojcik.com\\\/blog\\\/#\\\/schema\\\/person\\\/895f7604f9b6b71aad9bba33af28d0f9\",\"name\":\"Lukas Wojcik\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/www.lukaswojcik.com\\\/blog\\\/wp-content\\\/uploads\\\/2026\\\/07\\\/lw-x2.jpg\",\"url\":\"https:\\\/\\\/www.lukaswojcik.com\\\/blog\\\/wp-content\\\/uploads\\\/2026\\\/07\\\/lw-x2.jpg\",\"contentUrl\":\"https:\\\/\\\/www.lukaswojcik.com\\\/blog\\\/wp-content\\\/uploads\\\/2026\\\/07\\\/lw-x2.jpg\",\"width\":424,\"height\":636,\"caption\":\"Lukas Wojcik\"},\"logo\":{\"@id\":\"https:\\\/\\\/www.lukaswojcik.com\\\/blog\\\/wp-content\\\/uploads\\\/2026\\\/07\\\/lw-x2.jpg\"},\"sameAs\":[\"https:\\\/\\\/www.lukaswojcik.com\\\/blog\"]}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Jasne i ciemne palety: kontrola kontrastu i ograniczenia | Lukas Wojcik","description":"Kontrast WCAG 2.2 zmierzony w jasnej i ciemnej palecie: pi\u0119\u0107 barw tekstu poni\u017cej granicy, jak je poprawiono, i cztery fa\u0142szywe ustalenia naiwnego audytu.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/www.lukaswojcik.com\/blog\/pl\/tworzenie-stron-internetowych\/tutorials-pl-tworzenie-stron-internetowych\/jasne-i-ciemne-palety-kontrola-kontrastu-i-ograniczenia\/","og_locale":"en_US","og_type":"article","og_title":"Jasne i ciemne palety: kontrola kontrastu i ograniczenia | Lukas Wojcik","og_description":"Kontrast WCAG 2.2 zmierzony w jasnej i ciemnej palecie: pi\u0119\u0107 barw tekstu poni\u017cej granicy, jak je poprawiono, i cztery fa\u0142szywe ustalenia naiwnego audytu.","og_url":"https:\/\/www.lukaswojcik.com\/blog\/pl\/tworzenie-stron-internetowych\/tutorials-pl-tworzenie-stron-internetowych\/jasne-i-ciemne-palety-kontrola-kontrastu-i-ograniczenia\/","og_site_name":"Lukas Wojcik - Blog","article_published_time":"2026-11-13T17:55:00+00:00","og_image":[{"width":1200,"height":630,"url":"https:\/\/www.lukaswojcik.com\/blog\/wp-content\/uploads\/2026\/11\/flux-voll2-15771-15775.png","type":"image\/png"}],"author":"Lukas Wojcik","twitter_card":"summary_large_image","twitter_misc":{"Written by":"Lukas Wojcik","Est. reading time":"5 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.lukaswojcik.com\/blog\/pl\/tworzenie-stron-internetowych\/tutorials-pl-tworzenie-stron-internetowych\/jasne-i-ciemne-palety-kontrola-kontrastu-i-ograniczenia\/#article","isPartOf":{"@id":"https:\/\/www.lukaswojcik.com\/blog\/pl\/tworzenie-stron-internetowych\/tutorials-pl-tworzenie-stron-internetowych\/jasne-i-ciemne-palety-kontrola-kontrastu-i-ograniczenia\/"},"author":{"name":"Lukas Wojcik","@id":"https:\/\/www.lukaswojcik.com\/blog\/#\/schema\/person\/895f7604f9b6b71aad9bba33af28d0f9"},"headline":"Jasne i ciemne palety: kontrola kontrastu i ograniczenia","datePublished":"2026-11-13T17:55:00+00:00","mainEntityOfPage":{"@id":"https:\/\/www.lukaswojcik.com\/blog\/pl\/tworzenie-stron-internetowych\/tutorials-pl-tworzenie-stron-internetowych\/jasne-i-ciemne-palety-kontrola-kontrastu-i-ograniczenia\/"},"wordCount":975,"commentCount":0,"publisher":{"@id":"https:\/\/www.lukaswojcik.com\/blog\/#\/schema\/person\/895f7604f9b6b71aad9bba33af28d0f9"},"image":{"@id":"https:\/\/www.lukaswojcik.com\/blog\/pl\/tworzenie-stron-internetowych\/tutorials-pl-tworzenie-stron-internetowych\/jasne-i-ciemne-palety-kontrola-kontrastu-i-ograniczenia\/#primaryimage"},"thumbnailUrl":"https:\/\/www.lukaswojcik.com\/blog\/wp-content\/uploads\/2026\/11\/flux-voll2-15771-15775.png","keywords":["Tutorial","Web Development"],"articleSection":["Tutorials"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/www.lukaswojcik.com\/blog\/pl\/tworzenie-stron-internetowych\/tutorials-pl-tworzenie-stron-internetowych\/jasne-i-ciemne-palety-kontrola-kontrastu-i-ograniczenia\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/www.lukaswojcik.com\/blog\/pl\/tworzenie-stron-internetowych\/tutorials-pl-tworzenie-stron-internetowych\/jasne-i-ciemne-palety-kontrola-kontrastu-i-ograniczenia\/","url":"https:\/\/www.lukaswojcik.com\/blog\/pl\/tworzenie-stron-internetowych\/tutorials-pl-tworzenie-stron-internetowych\/jasne-i-ciemne-palety-kontrola-kontrastu-i-ograniczenia\/","name":"Jasne i ciemne palety: kontrola kontrastu i ograniczenia | Lukas Wojcik","isPartOf":{"@id":"https:\/\/www.lukaswojcik.com\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.lukaswojcik.com\/blog\/pl\/tworzenie-stron-internetowych\/tutorials-pl-tworzenie-stron-internetowych\/jasne-i-ciemne-palety-kontrola-kontrastu-i-ograniczenia\/#primaryimage"},"image":{"@id":"https:\/\/www.lukaswojcik.com\/blog\/pl\/tworzenie-stron-internetowych\/tutorials-pl-tworzenie-stron-internetowych\/jasne-i-ciemne-palety-kontrola-kontrastu-i-ograniczenia\/#primaryimage"},"thumbnailUrl":"https:\/\/www.lukaswojcik.com\/blog\/wp-content\/uploads\/2026\/11\/flux-voll2-15771-15775.png","datePublished":"2026-11-13T17:55:00+00:00","description":"Kontrast WCAG 2.2 zmierzony w jasnej i ciemnej palecie: pi\u0119\u0107 barw tekstu poni\u017cej granicy, jak je poprawiono, i cztery fa\u0142szywe ustalenia naiwnego audytu.","breadcrumb":{"@id":"https:\/\/www.lukaswojcik.com\/blog\/pl\/tworzenie-stron-internetowych\/tutorials-pl-tworzenie-stron-internetowych\/jasne-i-ciemne-palety-kontrola-kontrastu-i-ograniczenia\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.lukaswojcik.com\/blog\/pl\/tworzenie-stron-internetowych\/tutorials-pl-tworzenie-stron-internetowych\/jasne-i-ciemne-palety-kontrola-kontrastu-i-ograniczenia\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.lukaswojcik.com\/blog\/pl\/tworzenie-stron-internetowych\/tutorials-pl-tworzenie-stron-internetowych\/jasne-i-ciemne-palety-kontrola-kontrastu-i-ograniczenia\/#primaryimage","url":"https:\/\/www.lukaswojcik.com\/blog\/wp-content\/uploads\/2026\/11\/flux-voll2-15771-15775.png","contentUrl":"https:\/\/www.lukaswojcik.com\/blog\/wp-content\/uploads\/2026\/11\/flux-voll2-15771-15775.png","width":1200,"height":630,"caption":"Jasne i ciemne palety: kontrola kontrastu i ograniczenia"},{"@type":"BreadcrumbList","@id":"https:\/\/www.lukaswojcik.com\/blog\/pl\/tworzenie-stron-internetowych\/tutorials-pl-tworzenie-stron-internetowych\/jasne-i-ciemne-palety-kontrola-kontrastu-i-ograniczenia\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.lukaswojcik.com\/blog\/"},{"@type":"ListItem","position":2,"name":"Jasne i ciemne palety: kontrola kontrastu i ograniczenia"}]},{"@type":"WebSite","@id":"https:\/\/www.lukaswojcik.com\/blog\/#website","url":"https:\/\/www.lukaswojcik.com\/blog\/","name":"Lukas Wojcik - Blog","description":"","publisher":{"@id":"https:\/\/www.lukaswojcik.com\/blog\/#\/schema\/person\/895f7604f9b6b71aad9bba33af28d0f9"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.lukaswojcik.com\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":["Person","Organization"],"@id":"https:\/\/www.lukaswojcik.com\/blog\/#\/schema\/person\/895f7604f9b6b71aad9bba33af28d0f9","name":"Lukas Wojcik","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.lukaswojcik.com\/blog\/wp-content\/uploads\/2026\/07\/lw-x2.jpg","url":"https:\/\/www.lukaswojcik.com\/blog\/wp-content\/uploads\/2026\/07\/lw-x2.jpg","contentUrl":"https:\/\/www.lukaswojcik.com\/blog\/wp-content\/uploads\/2026\/07\/lw-x2.jpg","width":424,"height":636,"caption":"Lukas Wojcik"},"logo":{"@id":"https:\/\/www.lukaswojcik.com\/blog\/wp-content\/uploads\/2026\/07\/lw-x2.jpg"},"sameAs":["https:\/\/www.lukaswojcik.com\/blog"]}]}},"_links":{"self":[{"href":"https:\/\/www.lukaswojcik.com\/blog\/wp-json\/wp\/v2\/posts\/15775","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.lukaswojcik.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.lukaswojcik.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.lukaswojcik.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.lukaswojcik.com\/blog\/wp-json\/wp\/v2\/comments?post=15775"}],"version-history":[{"count":8,"href":"https:\/\/www.lukaswojcik.com\/blog\/wp-json\/wp\/v2\/posts\/15775\/revisions"}],"predecessor-version":[{"id":33085,"href":"https:\/\/www.lukaswojcik.com\/blog\/wp-json\/wp\/v2\/posts\/15775\/revisions\/33085"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.lukaswojcik.com\/blog\/wp-json\/wp\/v2\/media\/32489"}],"wp:attachment":[{"href":"https:\/\/www.lukaswojcik.com\/blog\/wp-json\/wp\/v2\/media?parent=15775"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.lukaswojcik.com\/blog\/wp-json\/wp\/v2\/categories?post=15775"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.lukaswojcik.com\/blog\/wp-json\/wp\/v2\/tags?post=15775"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}