Sprawdzanie kontrastu kolorów

Do4U sprawdza kontrast kolorów twojej marki i strony. Wpisujesz swoje kolory, jeden w wierszu, i dopisujesz, do czego służy każdy kolor: tekst, tło, akcent (na przykład przycisk) lub obramowanie. Kod liczy współczynnik kontrastu każdej pary według wzoru WCAG i pokazuje, które poziomy osiąga: AA i AAA dla zwykłego i dużego tekstu oraz 3:1 dla obramowań, ikon i powierzchni przycisków. Wartości nie są zaokrąglane w górę. Dla każdej pary, która nie spełnia wymagań, dostajesz najbliższy kolor, który je spełnia, raz ciemniejszy i raz jaśniejszy, w tym samym odcieniu. Do4U tworzy też dopasowaną paletę i sprawdza ją jeszcze raz w całości. Eksportujesz paletę jako zmienne CSS, zmienne SCSS lub JSON, a eksport powstaje w twojej przeglądarce. Wszystko działa w kodzie, bez AI, i jest za darmo.

Wypróbuj teraz Cennik

Za darmo i bez konta: Kalkulator kontrastu →

Dla kogo

Dla projektantów, programistów, agencji i właścicieli stron, którzy wybierają kolory marki lub tworzą przewodnik stylu i chcą tekstów i przycisków czytelnych dla wszystkich.

Typowe zastosowania

Sprawdzić nową paletę marki, zanim zacznie się projekt
Znaleźć szary kolor dla tekstu pomocniczego, który nadal spełnia AA
Sprawdzić kolory przycisków, linków i obramowań na tle strony
Wyeksportować dopasowane kolory jako zmienne CSS do arkusza stylów

Przykład

Dane wejściowe

#1a1a1a tekst #777777 tekst Pomocniczy #ffffff tło #cccccc obramowanie

Wynik

#1a1a1a na #ffffff: 17,4:1, spełnia AA i AAA #777777 na #ffffff: 4,47:1, nie spełnia AA dla zwykłego tekstu (dla dużego tekstu spełnia). Ciemniejszy: #767676 → 4,54:1. Jaśniejszy: niemożliwe #cccccc na #ffffff: 1,6:1, nie spełnia kontrastu elementów nietekstowych 3:1. Ciemniejszy: #949494 → 3,03:1 Eksport (dopasowany): :root { --color-text: #1a1a1a; --pomocniczy: #767676; --color-background: #ffffff; --color-border: #949494; }

Stały przykład, skrócony. Prawdziwe wyniki są generowane przez AI: sprawdź je.

Cena i limity

Cena: za darmo, do 30 sprawdzeń dziennie
Dostępne w: Free, Z pakietem
Limit danych wejściowych: Do 3 000 znaków na plik

Ochrona danych

Przetwarzane na własnych serwerach w UE (w Polsce). Dane wejściowe i wyniki usuwamy po 7 dniach (Free) lub 30 dniach (pakiety) – albo zaraz po wyświetleniu, jeśli wyłączysz zapisywanie. Obrazy usuwamy zaraz po przetworzeniu.

W API

Nazwa narzędzia: contrast_check. Utwórz zadanie przez POST /api/v1/jobs i pobierz wynik przez GET /api/v1/jobs/{id}. Klucz API znajdziesz na swoim koncie.

curl -X POST https://do4u.eu/api/v1/jobs \
  -H "Authorization: Bearer d4u_…" -H "Content-Type: application/json" \
  -d '{"tool": "contrast_check", "colors": ["#1a1a1a text", "#ffffff background", "#0066cc accent"]}'

Pełna dokumentacja API →

Pytania i odpowiedzi

Jak liczony jest współczynnik kontrastu?

Wzorem WCAG 2.2: najpierw względna luminancja każdego koloru, potem (L1 + 0,05) / (L2 + 0,05), gdzie L1 to jaśniejszy kolor. Wynik leży między 1:1 a 21:1. Wartości są porównywane bez zaokrąglania, dlatego 4,49:1 nie osiąga 4,5:1, a wyświetlana wartość nigdy nie jest zaokrąglana w górę.

Które pary są sprawdzane?

Tekst jest sprawdzany na każdym tle i na kolorach akcentu, względem 4,5:1 i 7:1 dla zwykłego tekstu oraz 3:1 i 4,5:1 dla dużego tekstu. Kolory akcentu i obramowania są sprawdzane na tle względem 3:1 dla kontrastu elementów nietekstowych. Kolor bez roli jest porównywany ze wszystkimi innymi kolorami.

Jak powstają proponowane kolory?

Zmienia się tylko jasność, w przestrzeni kolorów OKLCH; odcień zostaje ten sam. Do4U szuka najbliższego koloru, który spełnia wymagania, raz ciemniejszego i raz jaśniejszego, i sprawdza go jeszcze raz jako kod hex. Jeśli na danym tle żaden kolor nie może spełnić wymagań, wynik to podaje.

Czy mój tekst jest przechowywany?

Tylko tak długo, jak trzeba: 7 dni w Free, 30 dni z pakietem – albo wcale, jeśli wyłączysz zapisywanie. Przetwarzanie odbywa się na własnych serwerach w UE (w Polsce).

Czy mogę od razu użyć wyniku?

Wyniki są generowane przez AI. Przeczytaj je, zanim je opublikujesz lub wyślesz.

Powiązane narzędzia

Sprawdzenie dostępności
Sprawdza stronę pod kątem typowych barier i wyjaśnia, jak je usunąć.
Opinia o projekcie ze zrzutu ekranu
Prześlij zrzut ekranu strony lub aplikacji i otrzymaj ponumerowane, konkretne uwagi o wielkości przycisków, kontraście, tekście w obrazach, hierarchii i odstępach – każdą z ramką na obrazie. To ocena AI, nie pomiar.
Teksty alternatywne
Krótkie opisy obrazów dla czytników ekranu i wyszukiwarek.

Wszystkie narzędzia →