Accessible Color Pair Finder
指导
Accessible Color Pair Finder
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.
