Check WCAG Contrast for Accessible Text
Kiedy to ma zastosowanie
Use this when you are picking foreground and background colors for UI or content. Enter two sRGB hex colors, compare the ratio to WCAG thresholds, and iterate before you ship.
Narzędzie do użycia
Stosunek kontrastu dwóch kolorów hex i progi AA/AAA.
Otwórz Kontrast WCAG →Kroki
- 1Enter the text (foreground) color as #RRGGBB or #RGB.
- 2Enter the background color the same way.
- 3Read the contrast ratio and which WCAG rows pass or fail.
- 4Adjust colors until you meet your target (often AA for body text).
- 5Re-check after real content is placed (long paragraphs, small labels).
Przykłady
- Gray #111827 on white #ffffff for long-form reading.
- Brand accent button: ensure both default and hover states still pass.
Czego unikać
- Checking only one breakpoint while responsive themes change colors.
- Ignoring non-text UI that still needs discernible boundaries.
- Trusting contrast on gradients without sampling worst-case points.
Powiązane narzędzia
Na blogu
Więcej w Narzędzia obrazów
- Kompresuj obrazy, aby przyspieszyc strony internetowe
- Przygotuj obrazy pod rozmiary social media
- Usun metadane EXIF przed udostepnieniem zdjec
- Konwertuj obrazy pod zgodnosc i rozmiar pliku
- Dodaj znak wodny, aby chronic publikowane obrazy
- Rozmazuj wrazliwe informacje przed udostepnieniem obrazu
Wszystkie przewodniki po zadaniach albo zobacz pełną listę w hub Narzędzia obrazów.
FAQ
Does this replace an audit?
No. It is a fast sRGB check. Full audits cover motion, structure, and more.
Non-hex inputs?
This tool expects hex. Convert from HSL/RGB elsewhere first.
Wszystkie przewodniki po zadaniach · Narzędzia Narzędzia obrazów · Blog