Contrast Checker
Free online WCAG contrast checker. Test foreground and background color combinations for AA and AAA accessibility compliance. Includes color picker, hex input, and live preview. No signup required.
How to Use the Contrast Checker
Enter your foreground (text) color and background color using the color pickers or hex inputs. The contrast ratio and WCAG pass/fail results update instantly. The live preview below shows how actual text looks at various sizes with your color combination. If the combination fails, the Suggestions section offers the closest colors that would pass. Use the Palette Checker to test all pairs in a color scheme at once, and the Share button to send a permalink to a colleague.
About This Tool
A WCAG 2.1 color contrast checker that calculates the contrast ratio between any two colors and evaluates compliance with AA and AAA accessibility standards for normal text, large text, and UI components. Uses the official WCAG relative luminance formula implemented in pure JavaScript — zero external libraries. When a color combination fails, the tool suggests the closest passing alternative using a binary search on HSL lightness. The palette checker mode tests all pairwise combinations from a set of up to 10 colors. Related: Color Converter for converting between color formats, Base Converter for hex and binary conversions.
Quick Reference Table
| Context | AA Minimum | AAA Minimum |
|---|---|---|
| Normal text (< 18pt) | 4.5:1 | 7.0:1 |
| Large text (≥ 18pt / 14pt bold) | 3.0:1 | 4.5:1 |
| UI components & graphics | 3.0:1 | N/A |
Frequently Asked Questions
Does this tool check WCAG 2.2 or WCAG 3.0?
This tool implements WCAG 2.1 contrast requirements, which remain the current legal and practical standard. WCAG 2.2 did not change contrast requirements. WCAG 3.0 proposes a new APCA model, but it has not yet replaced WCAG 2.1 in legal or regulatory frameworks.
What is the gray on white contrast ratio at exactly WCAG AA?
The exact minimum gray value that achieves 4.5:1 against white (#FFFFFF) is #767676. Any color darker than this passes AA for normal text on white. This is a commonly referenced value in accessibility work.
Does contrast ratio apply to images or decorative elements?
WCAG contrast requirements apply to text and meaningful UI components (such as form field borders and icons that convey information). Purely decorative images and elements that have no informational purpose are exempt.
Does this matter for dark mode?
Yes — contrast requirements apply equally to dark mode. White text on a dark background must also meet the same 4.5:1 minimum for normal text. Many designs that look fine in light mode fail in dark mode when the contrast has not been independently verified.
My design uses a semi-transparent overlay — how do I check it?
Calculate the effective composite color by blending the overlay with its background first, then check contrast against the composited result. This tool processes opaque colors only — compute the blended color manually using alpha compositing, then paste the result into the checker.