WCAG Color Contrast Checker
Check foreground/background contrast ratio against WCAG AA and AAA standards.
Check foreground/background contrast ratio against WCAG AA and AAA standards.
This free WCAG Color Contrast Checker from KX Toolkit is part of our all-in-one online toolkit. It runs entirely in your browser, so your data never leaves your device for client-side operations. 100% free, forever - no paywall, no credit card, no trial.
How to use the WCAG Color Contrast Checker
- Pick or paste your base color (HEX, RGB or HSL).
- Run the conversion or palette generation.
- Preview the result on light and dark backgrounds.
- Copy the values into your design tokens or CSS.
What you can do with the WCAG Color Contrast Checker
- Build accessible palettes that pass WCAG contrast.
- Convert between color models for design vs code.
- Find harmonious palettes from a brand color.
- Audit existing screens for contrast issues.
Why use KX Toolkit's WCAG Color Contrast Checker
- Browser-based: Works on Windows, macOS, Linux, iOS and Android - no install, no extension.
- Privacy-first: Client-side tools never upload your data; server-side tools delete files right after processing.
- Mobile-friendly: Full feature parity on phones and tablets - not a stripped-down view.
- Fast: Optimised for instant feedback. No artificial waiting screens, no email-gated downloads.
- One hub for everything: 300+ tools across SEO, text, image, PDF, code, color, calculators and more - skip switching between sites.
Tips for the best results
Always check text contrast at the actual font weight - large bold text only needs 3:1, while small body copy needs 4.5:1.
Related Color Tools
If you find this tool useful, explore the full Color Tools collection or browse our complete tool directory. KX Toolkit is built for marketers, developers, designers, students and anyone who needs a quick utility without signing up for yet another SaaS.
What is WCAG and why does color contrast matter for accessibility?
WCAG, the Web Content Accessibility Guidelines, is the international standard for making web content usable by people with disabilities, including those with low vision and color blindness. Color contrast directly affects how easily users can read text against a background. Insufficient contrast makes content unreadable for many users and can violate accessibility laws in regions like the EU and US, exposing organizations to legal and reputational risk.
What contrast ratio do I need to pass WCAG AA?
WCAG AA requires a contrast ratio of at least 4.5:1 for normal body text and 3:1 for large text, defined as 18 point or 14 point bold and above. Non-text UI elements like icons, form controls, and focus indicators also need at least 3:1 against adjacent colors. AA is the minimum target for most websites, while AAA tightens these to 7:1 for body and 4.5:1 for large text.
How is the contrast ratio actually calculated?
The contrast ratio compares the relative luminance of two colors using the formula (L1 + 0.05) divided by (L2 + 0.05), where L1 is the lighter color and L2 is the darker. Relative luminance is computed by converting RGB values to linear light intensities and weighting them by human eye sensitivity. The result ranges from 1:1, identical colors, to 21:1, pure black on pure white.
Does WCAG contrast apply to disabled buttons and placeholder text?
Disabled controls are explicitly exempt from WCAG contrast requirements, which is why placeholder text and disabled buttons often have lower contrast. However, exempt does not mean ideal. Many users still need to read disabled state labels, so aim for reasonable contrast even when not strictly required. Avoid using only low contrast to indicate disabled state, since users with vision impairments may not perceive the difference reliably.
Why does my color pair pass on white but fail on a colored background?
Contrast is calculated against the actual rendered background, not your intended background. If text sits over a gradient, image, or semi-transparent overlay, the effective background changes pixel by pixel. Always test contrast against the worst-case background, or add a solid backdrop, dark overlay, or text shadow to guarantee readability. WCAG considers the final rendered pixel color, not the source CSS values.
What is the difference between WCAG 2 contrast and the new APCA method?
WCAG 2 uses a relative luminance ratio that does not always reflect how humans perceive contrast, especially for very light or saturated colors. APCA, the Accessible Perceptual Contrast Algorithm proposed for WCAG 3, uses a perceptual model that accounts for font weight, size, and polarity. APCA is more accurate but not yet a legal requirement. For now, target WCAG 2 AA as the standard while keeping APCA in mind for the future.
No reviews yet
Be the first to share your experience with the WCAG Color Contrast Checker.