Color Contrast Checker
Check color contrast ratio for WCAG accessibility compliance. Test foreground and background colors for AA and AAA standards.
The quick brown fox jumps over the lazy dog
Body copy at 16px - this is what your visitors will actually read.
WCAG Accessibility Guidelines
AA Normal (4.5:1): Minimum contrast for normal text (less than 18pt or 14pt bold). Required for most web content.
AA Large (3:1): Minimum contrast for large text (18pt+ or 14pt+ bold).
AAA Normal (7:1): Enhanced contrast for normal text. Highest accessibility standard.
AAA Large (4.5:1): Enhanced contrast for large text. Recommended for critical content.
Presets
History
WCAG Accessibility Guidelines
The Color Contrast Checker helps you ensure your website meets WCAG accessibility standards. It calculates the contrast ratio between foreground and background colors and evaluates compliance with AA and AAA levels for both normal and large text. Accessible design is not just good practice — it's required by law in many countries.
Popular Tools
About Color Contrast Checker
Set a foreground and background color by hex code or color picker and this checker reports the WCAG 2.1 contrast ratio, with pass or fail marks for AA normal text (4.5:1), AA large text (3:1), AAA normal (7:1) and AAA large (4.5:1). A live sample shows the pair at heading and body sizes, which is what designers need before signing off a palette. The relative luminance math happens in your browser, and saved pairs stay in local storage.
Use Cases
How to use
Set your text colour in the Foreground field, using the colour swatch or by typing a hex value such as #4f46e5 into the box beside it.
Set the page colour in the Background field the same way; the large Aa preview repaints instantly and the ratio badge in its top right corner updates.
Read the four WCAG cards under the preview - AA Normal, AA Large, AAA Normal and AAA Large - each showing a green tick or a red cross against its threshold.
Press the swap arrows between the two colour fields to test the reversed combination, or click a preset such as White on Dark or GitHub Dark to load a known pairing.
Press Copy under the big ratio number to put the ratio and all four pass or fail results on the clipboard, or press Save to keep the pair in the History strip.
Pro Tips
- Paste your content directly — the Color Contrast Checker detects common input patterns and applies sensible defaults automatically.
- Use keyboard shortcuts (Ctrl/Cmd+A to select all, Ctrl/Cmd+C to copy) to speed up your workflow inside the Color Contrast Checker.
- For very large inputs, break them into chunks — most browser tabs can handle megabytes of text, but parsing huge payloads may freeze the UI briefly.
- The Color Contrast Checker does not log or store your input. If you need history, copy important outputs to a local file or note app.
- Combine the Color Contrast Checker with other tools on this site (formatters, converters, encoders) to build complete data pipelines without leaving your browser.
Frequently Asked Questions
Yes, fully free with no signup, no API key, no watermarks, and no usage limits.
No. The Color Contrast Checker runs entirely client-side in your browser. Your input never touches our servers.
There is no hard limit, but expect slowdowns on inputs larger than a few megabytes, depending on your device's memory.
Yes. Outputs generated with the Color Contrast Checker are yours to use freely in any personal or commercial project.
Most of the logic runs in client-side JavaScript, so after the initial load you can often keep working without a network connection.
None. Because the Color Contrast Checker runs in your browser, you can process as many inputs as your hardware allows without API keys or throttling.