Реклама мешает? Идти Без рекламы Сегодня 

Находитель доступных пар цветов

РазработчикМатематика

РЕКЛАМА · УДАЛЯТЬ?

ВХОД

Автоматический процесс

ВЫХОД

Клиентская сторона

РЕКЛАМА · УДАЛЯТЬ?

Гид

Находитель доступных пар цветов

Find foreground colors that meet WCAG accessibility standards for any background color. Enter a background color and the tool searches the HSL color space to generate a palette of text colors that achieve AA or AAA contrast compliance. Preview each pair with sample text, check specific color combinations, and export accessible pairs as CSS custom properties.

Как использовать

Pick or enter a background color using the color picker or hex input. The tool immediately scans the color space and displays a grid of suggested foreground colors that pass your selected WCAG level. Click any swatch to preview it as text on your background. To check a specific pair, enter both background and foreground colors and see instant pass/fail badges for AA Normal, AA Large, and AAA levels. Export your chosen pairs as CSS custom properties for direct use in your stylesheets.

Функции

WCAG Contrast Computation – Accurate relative luminance and contrast ratio calculation per WCAG 2.1 specification
HSL Grid Search – Systematically searches hue, saturation, and lightness to find all passing foreground colors
Live Text Preview – See sample normal and large text rendered on your chosen background with each suggested color
AA & AAA Compliance – Toggle between AA Normal (4.5:1), AA Large (3:1), and AAA (7:1) contrast thresholds
Specific Pair Checker – Enter any two colors to get instant pass/fail results for all WCAG levels
Color Swatches by Hue – Suggestions organized by hue family for easy browsing
Luminance Formula Display – Shows the WCAG relative luminance computation and values for transparency
CSS Export – Copy accessible pairs as CSS custom properties ready for your stylesheet

РЕКЛАМА · УДАЛЯТЬ?

 Часто задаваемые вопросы

Что такое коэффициент контрастности WCAG и почему он важен?

WCAG (Web Content Accessibility Guidelines) defines minimum contrast ratios between text and background colors to ensure readability for people with visual impairments. The contrast ratio ranges from 1:1 (no contrast) to 21:1 (maximum, black on white). Level AA requires 4.5:1 for normal text and 3:1 for large text. Level AAA requires 7:1 for normal text. Meeting these standards ensures your website is accessible to approximately 1 in 12 men and 1 in 200 women who have color vision deficiency, plus people with low vision.
What is the difference between AA and AAA compliance?

AA is the minimum recommended level of accessibility and requires a contrast ratio of 4.5:1 for normal-sized text and 3:1 for large text (18pt or 14pt bold and above). AAA is the highest level, requiring 7:1 for normal text and 4.5:1 for large text. Most organizations target AA compliance as it provides good accessibility while allowing reasonable design flexibility. AAA is ideal for critical content like body text on government or healthcare sites. Large text has lower requirements because bigger characters are inherently easier to read.
How is relative luminance calculated?

Relative luminance measures the perceived brightness of a color on a scale from 0 (black) to 1 (white). The WCAG formula first converts sRGB values (0-255) to linear RGB by dividing by 255 and applying a gamma correction. For values 0.04045 or less, divide by 12.92. For higher values, add 0.055, divide by 1.055, and raise to the power 2.4. The final luminance is 0.2126 times red plus 0.7152 times green plus 0.0722 times blue. These weights reflect how human eyes perceive brightness, with green contributing the most.
Can I use this tool for brand color selection?

Yes. Enter your brand background color and the tool shows every text color that meets accessibility standards. This is especially useful during brand development or redesign when you need to ensure your color palette works for accessible web design. You can also check existing brand color pairs to verify they pass WCAG requirements. The CSS export feature lets you copy accessible pairs directly into your stylesheets, saving development time and ensuring compliance from the start.